Radio buttons message question, HTML beginner seeking a little help |
Radio buttons message question, HTML beginner seeking a little help |
PeterR |
Mar 16 2023, 12:03 AM
Post
#1
|
Group: Members Posts: 3 Joined: 15-March 23 Member No.: 28,855 |
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> |
Christian J |
Mar 16 2023, 06:58 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,681 Joined: 10-August 06 Member No.: 7 |
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...-radio-buttons/ https://www.nngroup.com/articles/radio-butt...ault-selection/ |
PeterR |
Mar 16 2023, 12:35 PM
Post
#3
|
Group: Members Posts: 3 Joined: 15-March 23 Member No.: 28,855 |
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. |
Christian J |
Mar 16 2023, 01:26 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,681 Joined: 10-August 06 Member No.: 7 |
<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 |
Lo-Fi Version | Time is now: 5th June 2024 - 11:54 PM |