Skip to main content
Participant
April 30, 2015
Answered

How to submit a form on a radio button click?

  • April 30, 2015
  • 1 reply
  • 27963 views

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.

<form action="outdoorfaucet.php" 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>

  <p>

    <input type="submit" name="submit" id="submit" value="Submit">

  </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. 

This topic has been closed for replies.
Correct answer BenPleysier

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']; 

?> 

1 reply

BenPleysier
Community Expert
Community Expert
April 30, 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!
Participant
May 3, 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

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
May 3, 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!