Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Radio buttons message question

Posted by: PeterR Mar 16 2023, 12:03 AM

I have the following 15 line index.html file which displays 2 radio buttons and prompts visitor to select button 1 or 2.
I also provided a [Submit] button. Would someone please tell me how to display a message if [Submit] is clicked?
for example a message like so: "Button 1 was selected." or "Button 2 was selected."
................
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Domain Title</title>
<body>
<form>
<p>Select button 1 or 2<p>
<input type="radio" name = "ans" value="button #1"> button1 </br>
<input type="radio" name = "ans" value="button #2"> button2 </br> </br>
<button type="button">Submit</button>
</form>
</body>
</html>

Posted by: CharlesEF Mar 16 2023, 12:26 AM

You could add event listeners to both buttons or you could use the onclick attribute of the buttons like this:

CODE

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Domain Title</title>
<script>
function showMessage(obj)
{
console.log(obj.value);
}
</script>
<body>
<form>
<p>Select button 1 or 2<p>
<input type="radio" name = "ans" onclick="showMessage(this);" value="button #1"> button1 </br>
<input type="radio" name = "ans" onclick="showMessage(this);" value="button #2"> button2 </br> </br>
<button type="submit">Submit</button>
</form>
</body>
</html>

Also, the button type needs to be 'submit'.

Posted by: PeterR Mar 16 2023, 01:51 AM

Thanks for suggestion CharlesEF but I had 'slightly' better success using this...
<form>
<p>Select button 1 or 2<p>
<input type="radio" name = "ans" value="button #1"> button1 </br>
<input type="radio" name = "ans" value="button #2" onclick="alert('Butn 2 clicked!');" </br> </br>
<button type="button">Submit</button>
</form>

But now my 2nd button no longer has the description 'button 2' to its right.
I'm encouraged to see the message 'Butn 2 clicked!' when I click it though.
I don't yet know how to show button 2 description to right AND its message.
Will revisit this again tmrw, but if you or someone has another suggestion
I'd be most grateful.

Posted by: coothead Mar 16 2023, 05:38 AM

Hi there PeterR,

this project of yours may be done with CSS...

CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>button information</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">

/*
   the following CSS should, of course,
   be removed and placed in a .css file
*/

body {
    font: normal 1em / 1.5em  sans-serif;
}
#info1,
#info2{
   margin-left: 2em;
   display: none;
   color: #f00;

}
#r1,
#r2,
label {
    cursor: pointer;
}
#r1:checked ~ #info1,
#r2:checked ~ #info2{
   display: inline-block;
}
</style>

</head>
<body>

<form action="#">

<p>Select button 1 or 2<p>

<input type="radio" id="r1" name="ans" value="button #1">
<label for="r1"> : button1</label>
<span id="info1"> button 1 clicked!</span></br>

<input type="radio" id="r2" name="ans" value="button #2">
<label for="r2"> : button2</label>
<span id="info2"> button 2 clicked!</span><br></br>

<button type="submit">Submit</button>

<input type="reset">

</form>

</body>
</html>

coothead

Posted by: Christian J Mar 16 2023, 06:58 AM

QUOTE(PeterR @ Mar 16 2023, 06:03 AM)

Would someone please tell me how to display a message if [Submit] is clicked?
for example a message like so: "Button 1 was selected." or "Button 2 was selected."

If the form is meant to be used with a server-side script, that script could create the message too. In addition to that you can also do it on the form page (using client-side javascript or CSS) in case of say a delayed server response, but with today's fast internet speeds it will rarely be noticed.

QUOTE

<input type="radio" name = "ans" value="button #1"> button1 </br>
<input type="radio" name = "ans" value="button #2"> button2 </br> </br>
<button type="button">Submit</button>

Note that groups of radio buttons should normally offer a default selection, that the user can return to. See also
https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
https://www.nngroup.com/articles/radio-buttons-default-selection/

Posted by: pandy Mar 16 2023, 07:14 AM

QUOTE(PeterR @ Mar 16 2023, 07:51 AM)

Thanks for suggestion CharlesEF but I had 'slightly' better success using this...
<form>
<p>Select button 1 or 2<p>
<input type="radio" name = "ans" value="button #1"> button1 </br>
<input type="radio" name = "ans" value="button #2" onclick="alert('Butn 2 clicked!');" </br> </br>
<button type="button">Submit</button>
</form>

But now my 2nd button no longer has the description 'button 2' to its right.
I'm encouraged to see the message 'Butn 2 clicked!' when I click it though.
I don't yet know how to show button 2 description to right AND its message.

Will revisit this again tmrw, but if you or someone has another suggestion
I'd be most grateful.

To answer your question, that's simply because you have forgotten it. Just type it in as you did with "button 1". But see to it that you complete the INPUT tag first. You have forgotten the closing >.

You have...

CODE

<input type="radio" name = "ans" value="button #2" onclick="alert('Butn 2 clicked!');"

...which should be like so.

CODE

Posted by: PeterR Mar 16 2023, 12:35 PM

I managed to improve my form (see below). As pointed out by Pandy
I'd previously neglected to include a setting in the input to 2nd button.

<form>
<p>Select button 1 or 2<p>
<input type="radio" name = "ans" value="button #1" onclick="alert('Button 1 was clicked!');" <label for="button 1"> button 1</label> </br> </br>
<input type="radio" name = "ans" value="button #2" onclick="alert('Button 2 was clicked!');" <label for="button 2"> button 2</label> </br> </br>
<button type="button">Submit</button>
</form>

Your solution which I read afterward tested better though, thank you.
*** Now I must find some way to display a message if Submit is clicked!? ***

Presently form resets if Submit is clicked. (see 2 lines below)
<button type="submit">Submit</button>
<input type="reset">

As mentioned I'm a beginner with html so patience kindly appreciated.

Posted by: CharlesEF Mar 16 2023, 01:21 PM

QUOTE(PeterR @ Mar 16 2023, 01:51 AM)

In case you don't know, console.log() is used to help debug code. The results are shown in the console section of your browsers 'Developer Tools'. If you want to show the results on the same page then you need to add a 'span' element for that.

A 'submit' button is used to send the data to the web server for server-side processing. If there is no server-side code to run then the page is redrawn. Do you really need 'submit'? Otherwise just change it back to type button and add a onclick event handler.

Posted by: Christian J Mar 16 2023, 01:26 PM

QUOTE(PeterR @ Mar 16 2023, 06:35 PM)

<input type="radio" name = "ans" value="button #1" onclick="alert('Button 1 was clicked!');" <label for="button 1"> button 1</label> </br> </br>
<input type="radio" name = "ans" value="button #2" onclick="alert('Button 2 was clicked!');" <label for="button 2"> button 2</label>

The ">" characters pandy mentioned are still missing from both INPUT elements.

Also, if you want to use the LABEL element's FOR attribute, the INPUT element needs a corresponding ID value. See https://htmlhelp.com/reference/html40/forms/label.html

QUOTE

Presently form resets if Submit is clicked.

(see 2 lines below)
<button type="submit">Submit</button>
<input type="reset">

It doesn't actually reset, it just loads the same URL (page) again. When the user submits a form it will load the URL specified in its FORM element's ACTION attribute. If there is not ACTION attribute (like in your case) the form page will reload itself. Both methods are valid HTML, it all depends on how the form handling server-side script is written.

See also https://htmlhelp.com/faq/html/forms.html#form-howto