rizwansyed Posted August 8, 2018 Share Posted August 8, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted August 8, 2018 Share Posted August 8, 2018 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. Link to comment Share on other sites More sharing options...
rizwansyed Posted August 9, 2018 Author Share Posted August 9, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2018 Share Posted August 9, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
rizwansyed Posted August 9, 2018 Author Share Posted August 9, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2018 Share Posted August 9, 2018 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. Link to comment Share on other sites More sharing options...
rizwansyed Posted August 10, 2018 Author Share Posted August 10, 2018 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2018 Share Posted August 10, 2018 You've answered your own question? that example gives exactly what your asking for? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now