Jump to content
rizwansyed

radio button value print

Recommended Posts

Hi

I am working on radio buttons.How can i get a selected radio button value to be displayed in text box.

1.I have a following snippet code. When ever i try to write radVal value in text box,it writes radVal and not the value.

<form id="mainForm" name="mainForm">
    <input type="radio" name="rads" value="1" />
    <input type="radio" name="rads" value="2" />
    <input type="radio" name="rads" value="3" />
    <input type="radio" name="rads" value="4" />
</form>
<span id="result"></span>

<script>
document.mainForm.onclick = function(){
    var radVal = document.mainForm.rads.value;
    result.innerHTML = 'You selected: '+radVal;
}
</script>


  <input type="text" name="firstname" value=radVal>
  <br>
  
  <br><br>
  <input type="submit" value="Submit">

 

 

Thanks and Regards

Rizwan Syed

 

 

Please suggest how to proceed

Edited by rizwansyed

Share this post


Link to post
Share on other sites

You cannot put a Javascript variable in the value attribute, whatever is in the value attribute is shown literally as it is in the HTML. If you want to change the value of an input element, it is similar to how you are putting in the <span> except that you should set the .value property instead of .innerHTML.

Share this post


Link to post
Share on other sites

Hi Ingolme,

I didnt get what you have mentioned.Please can you mention it clearly for getting the dynamic value instead of static

Thanks and Regards

Rizwan Syed

Share this post


Link to post
Share on other sites

Whatever you use for a value for the value attribute will be always a textual representation, a JavaScript variable  radVal will treated/shown as 'radVal'.

With all form inputs you should use .value to add or retrieve a value, while other elements would use .innerHTML such as you have used for the span.

With radio button you would need to identify which is checked first, then retrieve the value  belonging to the checked radio button.

An example is shown here:

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_radio_checked4

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Thanks Dsonesuk.

One more clarification, As shown in the below figure.

Just by selecting a radio button (without using a submit button)  , Is it possible to send a value to my board saying that particular radio button is selected

Please select your favorite season:

 Spring  Summer  Fall  Winter
 
Please suggest
 
Thanks and Regards
Rizwan Syed

Share this post


Link to post
Share on other sites

Yes! its possible, it requires an event such as a button click or onchange event on all radio buttons to run the JavaScript code to retrieve and insert the selected value where you want it.

Share this post


Link to post
Share on other sites

Hi Dsoneusk

Thanks for the reply.It was helpful

I tried the below example 

https://www.w3schools.com/js/tryit.asp?filename=tryjs_form_radio

It prints the value whichever radio button is selected, Is it possible to send the selected radio button  to my micro controller board  (without using a submit button,just by clicking a radio button)

Thanks and Regards

Rizwan Syed

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×