radio button value print

[rizwansyed]

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 August 8, 2018 by rizwansyed

[Ingolme]

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.

[rizwansyed]

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

[dsonesuk]

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 August 9, 2018 by dsonesuk

[rizwansyed]

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

[dsonesuk]

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.

[rizwansyed]

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

[dsonesuk]

You've answered your own question? that example gives exactly what your asking for?