The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Radio buttons message question, HTML beginner seeking a little help
PeterR
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 16 2023, 12:26 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeterR
post 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. sad.gif
Will revisit this again tmrw, but if you or someone has another suggestion
I'd be most grateful.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Mar 16 2023, 05:38 AM
Post #4


Advanced Member
****

Group: Members
Posts: 194
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 16 2023, 06:58 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 16 2023, 07:14 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. sad.gif
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!');">

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PeterR
post 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. biggrin.gif
*** Now I must find some way to display a message if Submit is clicked!? ***

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

As mentioned I'm a beginner with html so patience kindly appreciated.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Mar 16 2023, 01:21 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,981
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 16 2023, 01:26 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,628
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. sad.gif (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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:57 PM