 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> |
  |
 
|
| CharlesEF |
Mar 16 2023, 12:26 AM
Post
#2
|
|
Programming Fanatic  Group: Members Posts: 1,950 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
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'. This post has been edited by CharlesEF: Mar 16 2023, 12:29 AM |
|
|
|
| PeterR |
Mar 16 2023, 01:51 AM
Post
#3
|
|
Group: Members Posts: 3 Joined: 15-March 23 Member No.: 28,855 |
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. |
|
|
|
| coothead |
Mar 16 2023, 05:38 AM
Post
#4
|
|
Member Group: Members Posts: 78 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
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 |
|
|
|
| Christian J |
Mar 16 2023, 06:58 AM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,353 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/ |
|
|
|
| pandy |
Mar 16 2023, 07:14 AM
Post
#6
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,435 Joined: 9-August 06 Member No.: 6 |
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 <input type="radio" name = "ans" value="button #2" onclick="alert('Butn 2 clicked!');"> |
|
|
|
| PeterR |
Mar 16 2023, 12:35 PM
Post
#7
|
|
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. |
|
|
|
| CharlesEF |
Mar 16 2023, 01:21 PM
Post
#8
|
|
Programming Fanatic Group: Members Posts: 1,950 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
QUOTE(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> 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. This post has been edited by CharlesEF: Mar 16 2023, 01:27 PM |
|
|
|
| Christian J |
Mar 16 2023, 01:26 PM
Post
#9
|
|
. Group: WDG Moderators Posts: 9,353 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 |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 25th March 2023 - 05:49 AM |
Invision Power Board
© 2023 IPS, Inc.
Licensed to: HTMLHelp.com, LLC