Member Avatar for dendenny01

How can I transfer the values inserted in <input type="text" name="num1"> to radio button <input type="radio" name="rep_num1" value="">On submit of form.
Actuall when user insert the value or text in the textbox the value of the text box should replace or transfer to the value in radio button when user click on submit.
example if the user typed hello in text box on submitting the form the "hello" should replace the blank value of radio button as on submit the radio button should have the value "hello"
Please help me Thanxx
The code should be in javascript or HTML if possible
Thanxx

  • 2 Contributors
  • 1 Reply
  • 301 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Topi Ojala

Dani AI

Generated

Short answer for : copy the textbox value into the radio's current value property right before the form is sent. That is simpler than forcing an AJAX POST and works with normal form submission. The snippet below uses plain JavaScript and ensures the radio will be sent to the server with the textbox content.

<form id="myForm" method="post" action="/submit">
  <input type="text" name="num1" id="num1" />
  <input type="radio" name="rep_num1" id="rep_num1" value="" />
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function () {
  var txt = document.getElementById('num1').value.trim();
  var radio = document.getElementById('rep_num1');
  if (txt !== '') {
    radio.value = txt;    // update the radio's value property
    radio.checked = true; // ensure it will be included in the POST
  }
});
</script>

Notes and troubleshooting: only the checked radio for a given name is submitted, so setting radio.checked = true guarantees the server receives rep_num1. Disabled inputs are not submitted, so ensure the element is enabled. If the form actually contains multiple radios for the same name, target the specific radio by id or consider using a hidden input instead (create <input type="hidden" name="rep_num1"> and set its value) which avoids changing radio semantics. Trim and validate the textbox before submission and always sanitize on the server.

Comment on : their AJAX approach is useful when an asynchronous submit is needed, but for a simple transfer-and-submit the plain form-change above is lighter and easier to debug (check the Network/Form Data tab in devtools to verify what the server receives).

Member Avatar for Topi Ojala

This does not sound like a good way to implement a form :)

Anyhow, you can attach your submit button to a javascript function, in which you can make a customized POST call with ajax

function submitForm()
{
 //select the text value with native js or jquery
 var text = $('.classOftextInput').attr( value );

 //make the custom POST string to map the text with rep_num1
 var postString = 'rep_num1=' + text;

 //use native js or jquery AJAX to submit the form with POST
 $.ajax( '/formBackend' ,
     { 
         'type': 'POST',
         'data': postString,
     }).done( function(data)
         {
            // give information to the user about form submit ( success/ fail )
         });

This might not be 100% accurate, but you get the idea

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.