 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> |
  |
 
|
  |
Replies
| Christian J |
Mar 16 2023, 06:58 AM
Post
#2
|
|
.  Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
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...-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,661 Joined: 10-August 06 Member No.: 7 |
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 |
|
|
|
Posts in this topic
PeterR Radio buttons message question Mar 16 2023, 12:03 AM
CharlesEF You could add event listeners to both buttons or y... Mar 16 2023, 12:26 AM PeterR Thanks for suggestion CharlesEF but I had 'sli... Mar 16 2023, 01:51 AM
pandy
Thanks for suggestion CharlesEF but I had 'sl... Mar 16 2023, 07:14 AM
CharlesEF
Thanks for suggestion CharlesEF but I had 'sl... Mar 16 2023, 01:21 PM coothead Hi there PeterR,
this project of yours may be don... Mar 16 2023, 05:38 AM |
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 04:53 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC