Get radio button value which is outside a form post

Question

I have a form which has some radio buttons which is outside this form.The html is as follows

<input type="radio" id="radio1" name="radios" value="radio1" checked>
   <label for="radio1">Credit Card</label>

<input type="radio" id="radio2" name="radios"value="radio2">
   <label for="radio2">Debit Card</label>

<form method="post" action='./process.php'>
  <label>name</label>
  <input type="text"/>
  <input type="submit" style="float:right" value="Pay Now"/>
</form>

When I press on the paynow button,i want to pass the value of button selected to the php of this form (process.php) .But I dont want to place the radio buttons inside the form.Is there any solution?

Answer 1

You could have a hidden value inside the form, onsubmit put the value of that radio button inside the hidden value

<input type="radio" name="test" value="a">a<br>
<input type="radio" name="test" value="b">b
<form>
  <input type="hidden" name="test" id="hidden">
  <submit onClick="transferData">
</form>
<script>
  var transferData = function() {
    var radioVal =$('input:radio[name=test]:checked').val()
    $('#hidden').val(radioVal);
  }
</script>

Answer 2

HTML5 supports an attribute called "form". You can use it to set the form for controls that are outside your form, like so:

<input type="radio" id="radio1" name="radios" value="radio1" checked>
<label form="myForm" for="radio1">Credit Card</label>

<input type="radio" id="radio2" name="radios"value="radio2">
<label form="myForm" for="radio2">Debit Card</label>

<form id="myForm" method="post" action='./process.php'>
    <label>name</label>
    <input type="text"/>
    <input type="submit" style="float:right" value="Pay Now"/>
</form>

Note how id="myForm" is added to the form and form="myForm" is added to the radio-buttons. Hope that helped you.

Answer 3

Yeah, you could add a reference to jQuery, before the </body> . Then, using JQuery, you could select the checked radio button as follows:

var selected = $("input[type='radio']:checked");
if (selected.length > 0) {
    selectedVal = selected.val();
}

The selectedVal parameter will hold the value you want.

The selection of the selected radio button should be done on the click event of submit button.

That could be done as follows:

$("input[type='submit']").click(function(){    
    // code goes here.    
});

Answer 4

You must have a onsubmit attribute on your form, and inside, assign to a hidden field the selected radio button value.

Like this:

<form id='myForm' method="post" action='./process.php' onsubmit='getRadioButtonValue()'>
    ...
    <input type="hidden" name="selectedRadioValue" />
</form>

function getRadioButtonValue(){
    var radioValue = $('input[name=radios]:checked', '#myForm').val();
    $('input[name='selectedRadioValue']').val(radioValue);
}

Answer 5

Put everything in the form. If you want to send all values. Add required attibute to your tags.

Other wise use jquery

<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password"  id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<ul id="answer"></ul>
</body>
<script>
    $("#sub").click(function(event){
        event.preventDefault();
        query = $.post({
            url : 'check_ajax.php',
            data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
        });
        query.done(function(response){
            $('#answer').html(response);
        });
    });
</script>

All you need to do is to add the value of the option/input outside the form in the data

Answer 6

Use this onsubmit event!

$('input[name=radios]:checked').val()

Check the example