CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
user1777711
user1777711

Reputation: 1754

How to radio button change form action address

How to make radio button change the form action address

I got a form which have the following

and a radio button

<b>Would you like to to make payment ? <input type="radio" name="choice" value="yes">Yes <input type="radio" name="choice" value="no" checked>No</b>'

If user selection is no (default checked) the form action will still be register_page4.php

but if user selected yes and press the submit button:

<input  id="btnSubmit" type="submit" value="Next" />

I would like the form action to be payment.php instead of register_page4.php, how do I achieve it.

I make the changes and this is what I type

<html>
<head>
</head>
<body>

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

    Would you like to make an appointment for collection ? 
<input type="radio" name="collection" value="yes">Yes 
<input type="radio" name="collection" value="no" checked>No
   <input  id="btnSubmit" type="submit" value="Next" />  
    </form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(document).ready(function($) {
    var form = $('form[name="form1"]'),
        radio = $('input[name="choice"]'),
        choice = '';

    radio.change(function(e) {
        choice = this.value;

        if (choice === 'yes') {
            form.attr('action', 'payment.php');
        } else {
            form.attr('action', 'register_page4.php');
        }
    });
});
</script>
</body>
</html>

But the result is still going to register_page4.php even I click on the radio button with yes, I try click on both and both still go to register_page4.php

Upvotes: 3

Views: 9084

Answers (6)

Rajesh Paul
Rajesh Paul

Reputation: 7019

Use the following code:

<body>
  <form name="form1" id="form1" method="post" action="register_page4.php">
    Would you like to make an appointment for collection ? 
    <input type="radio" name="collection" value="yes" onChange="if(this.checked){document.getElementById('form1').action='payment.php'}">Yes 
    <input type="radio" name="collection" value="no" checked>No
    <input type="submit">
  </form>
</body>

Here is a demo

Upvotes: -1

Joao Paulo
Joao Paulo

Reputation: 1103

Add Document Ready

<script>
$(document).ready(function(){
    $("input[name=choice]").change(function(){
        if ($("input[name=choice]").val() == 'yes'){
            $("#form1").attr("action","payment.php");
        }
        else
        {
            $("#form1").attr("action","register_page4.php");
        }
    });

});
</script>

If continue the issue try to remove the action:

Remove action from form.

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

Correct

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

Upvotes: 0

Mike Vranckx
Mike Vranckx

Reputation: 5577

Here is an example using a javascript solution. Basically, when changing the radio button, the attribute of the form (here with id #yourForm) is altered with the correct action.

jQuery(document).ready(function($) {
    var form = $('form[name="form1"]'),
        radio = $('input[name="collection"]'),
        choice = '';

    radio.change(function(e) {
        choice = this.value;

        if (choice === 'yes') {
            form.attr('action', 'payment.php');
        } else {
            form.attr('action', 'register_page4.php');
        }
    });
});

Upvotes: 7

Sumit Bijvani
Sumit Bijvani

Reputation: 8179

Disable Submit button if checked = No

Working JSFiddle DEMO


HTML

<form action="payment.php" method="POST">   
<input name="choice" type="radio" id="choiceyes" value="yes" />Yes
<input name="choice" type="radio" id="choiceno" value="no" checked="checked" />No
<input  id="btnSubmit" name="btnSubmit" type="submit" value="Next" /></form>

Script

$(function () {
    var $join = $("input[name=btnSubmit]");
    var processJoin = function (element) {
        if(element.id == "choiceno") {
            $join.attr("disabled", "disabled");
        }
        else {
            $join.removeAttr("disabled")
        }
    };

    $(":radio[name=choice]").click(function () {
        processJoin(this);
    }).filter(":checked").each(function () {
        processJoin(this);
    });
});

Upvotes: 0

Joao Paulo
Joao Paulo

Reputation: 1103

$("input[name=choice]").change(function(){
if ($("input[name=choice]").val() == 'yes'){
   $("#formId").attr("action","payment.php");
}
else
{
   $("#formId").attr("action","register_page4.php");
}
});

Upvotes: 1

skrilled
skrilled

Reputation: 5371

depending on whether you are using POST or GET method, it's either:

$nextPage = ($_POST['choice']=='yes') ? 'payment.php' : 'register_page4.php';

OR

$nextPage = ($_GET['choice']=='yes') ? 'payment.php' : 'register_page4.php';

then simply redirect to $nextPage

Upvotes: 1

Related Questions