How to submit a form on a radio button click?

Report · Apr 29, 2015

I use a php page to presents the user with two options. The person clicks one of the options and then clicks the Submit button. Upon clicking the Submit button, the value of the clicked radio button is posted on an the corresponding action page.

Instead what I'd like is when the person clicks on the radio button group, its value is posted on the corresponding action page without the user having to click the Submit button.

Here is the current code for the simple two radio button form. The user can click Indoors or Outdoors.

<p>

<label for="radio">Outdoor</label>

</p>

<p>

<label for="radio2">Indoors</label>

</p>

<p>

</p>

</form>

And here is the post statement on the corresponding action page as it is now.

<?php

// echo the values from the select facet page

echo "You have selected " . $_POST['selectedfaucet']. "<br";

?>

Can somebody help me modify this code so that the radio button's value is submitted, or posted, or otherwise sent to the action page? I'm new at this. Thanks in advance.

Report · Apr 29, 2015

Try

<?php
if ((($_SERVER["REQUEST_METHOD"] == "POST") && (isset($_SERVER["HTTP_REFERER"]) && strpos(urldecode($_SERVER["HTTP_REFERER"]), urldecode($_SERVER["SERVER_NAME"].$_SERVER["PHP_SELF"])) > 0) && isset($_POST))) {
    // echo the values from the select facet page
    echo "You have selected " . $_POST['selectedfaucet']. "<br";
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<form  method="post" name="form1" id="form1">
    <p>
        <input type="radio" name="selectedfaucet" id="radio" value="outdoor">
        <label for="radio">Outdoor</label>
    </p>
    <p>
        <input type="radio" name="selectedfaucet" id="" value="indoors">
        <label for="radio2">Indoors</label>
    </p>
</form>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
 $(document).ready(function() { 
   $('input[name=selectedfaucet]').change(function(){
        $('form').submit();
   });
  });
</script>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 02, 2015

Hi Ben

I tried your code... and it sort of worked, but didn't quite do what I was looking for. The code displays the radio buttons - perfect.

But when I select a radio button, the "You have selected indoor/outdoor" statement appears on the same page. I'd like it to display on a different page, and I do not what the radio buttons showing any more.

Upon clicking on a radio button, on the same page, it displays the label from the button I clicked

Report · May 02, 2015

In my code change

<form method="post" name="form1" id="form1">

to

<form action="outdoorfaucet.php" method="post" name="form1" id="form1">

and move the script at the top of the page to outdoorfaucet.php

<?php

if (($_SERVER["REQUEST_METHOD"] == "POST") && isset($_POST)) {

// echo the values from the select facet page

echo "You have selected " . $_POST['selectedfaucet'];

}

?>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 04, 2015

Thank you Ben.... it works perfect.....

I know I'm asking a lot, but would you put a few comments in the java script below so I can decipher what's going on.

$(document).ready(function() {

$('input[name=selectedfaucet]').change(function(){

$('form').submit();

});

</script>

Thanks again,

Kevin

Report · May 04, 2015

$(document).ready(function() { // wait until the document has loaded

$('input[name=selectedfaucet]').change(function(){ // monitor the input element with a name of selectedfaucet

$('form').submit(); // if there is a change of value then submit the form

}); // end input change function

}); // end document loaded function

</script>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · May 07, 2015

Thanks Ben,

If you don't mind me asking, why do you have to load the jQuery Library?

Report · May 07, 2015

KevinatCirris wrote:

Thanks Ben,

If you don't mind me asking, why do you have to load the jQuery Library?

Because without it this script aint going to be doing anything:

$(document).ready(function() { // wait until the document has loaded

$('input[name=selectedfaucet]').change(function(){ // monitor the input element with a name of selectedfaucet

$('form').submit(); // if there is a change of value then submit the form

}); // end input change function

}); // end document loaded function

</script>

How to submit a form on a radio button click?

1 Correct answer

Photos