Question

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

我有一张表格，内容如下

和一个单选按钮

<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

Answer 1

以下是使用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');
        }
    });
});

Answer 2

取决于您使用的是POST还是GET方法，它是：

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

OR

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

然后只需重定向到$ nextPage

Answer 3

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

Answer 4

如果checked = No

，请停用提交按钮

正在使用 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>

<强>脚本

$(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);
    });
});

Answer 5

添加文档

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

Answer 6

使用以下代码：

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

这是 demo

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

6 个答案: