3

如何使单选按钮更改表单操作地址

我得到了一个具有以下内容的表格

和一个单选按钮

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

如果用户选择是no（默认选中），表单action仍然是register_page4.php

但如果用户选择yes并按下提交按钮：

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

我希望表单操作是payment.php而不是register_page4.php，我该如何实现。

我进行了更改，这就是我输入的内容

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

但结果仍然是 register_page4.php 即使我点击单选按钮是，我尝试点击两者，两者仍然去 register_page4.php

4

6 回答 6

6

这是一个使用 javascript 解决方案的示例。基本上，在更改单选按钮时，表单的属性（此处为 id #yourForm）会通过正确的操作进行更改。

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');
        }
    });
});
于 2013-11-01T18:42:32.723 回答
1

根据您使用的是 POST 还是 GET 方法，可以是：

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

或者

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

然后只需重定向到 $nextPage

于 2013-11-01T18:39:44.213 回答
1 
$("input[name=choice]").change(function(){
if ($("input[name=choice]").val() == 'yes'){
   $("#formId").attr("action","payment.php");
}
else
{
   $("#formId").attr("action","register_page4.php");
}
});
于 2013-11-01T18:45:33.440 回答
0

禁用提交按钮，如果checked = No

工作JSFiddle 演示


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>

脚本

$(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);
    });
});
于 2013-11-01T18:52:34.783 回答
0

添加文档就绪

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

如果继续问题，请尝试删除操作：

从表单中删除操作。

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

正确的

<form name="form1" method="post">
于 2013-11-01T19:11:13.690 回答
-1

使用以下代码：

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

这是一个演示

于 2013-11-01T19:18:56.307 回答