logo标签列表

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

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

你为什么不把表单操作从register_page4.php改成payment.php呢？ - Shankar Narayana Damodaran
@ShankarDamodaran 由于页面除了choice之外还有一些post值，因此在register_page4.php中使用header重定向到payment.php是否可行，或者我应该在javascript级别上进行解释，然后正确重定向到payment.php而不是重新路由。 - user1777711
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');
        }
    });
});
我已经按照您的更改进行了编码，但是仍然没有有效果。代码已发布在上面。 - user1777711
1
将所有JS代码放在body元素的末尾（紧接着闭合的</body>标签之前）是最佳实践。这样做可以使浏览器更快地渲染页面，因为JS会在末尾加载。我已经更新了我的JS代码，以适应您的示例HTML代码。 - Mike Vranckx
我尝试了你的新代码，但它仍然不起作用。无论选择哪个选项，它仍然会跳转到register_page4.php，并更新了我的问题。 - user1777711
好的，我没有注意到单选输入元素的名称已经从 choice 更改为 collection ... 抱歉。我已经再次更新了我的答案。 - Mike Vranckx
1

根据您使用的是POST还是GET方法，它可能是以下之一：

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

或者

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

然后简单地重定向到 $nextPage。
但是，由于页面除了choice之外还有一些post值，所以在register_page4.php中使用header将其重定向到payment.php是否可行？ - user1777711
哦，我明白你的意思了。个人而言，我不喜欢将这些类型的代码分离出来，而是会让逻辑在脚本中发生。否则，jQuery 是你最好的选择。 - skrilled
Mike对于使用jQuery方法做事情有一个很好的答案。 - skrilled
个人而言，我会让所有逻辑都在一个脚本中完成。不要重定向到另一页，使用我提交的代码类似的逻辑来决定您对帖子的操作。你在尝试使用Mike的代码之前是否已经包含了jQuery库？ - skrilled
1
$("input[name=choice]").change(function(){
if ($("input[name=choice]").val() == 'yes'){
   $("#formId").attr("action","payment.php");
}
else
{
   $("#formId").attr("action","register_page4.php");
}
});
0

如果 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);
    });
});
我需要它能够相应地行动，没有必要禁用按钮，我已经更新了我的问题。 - user1777711
只有当有人选择“否”时，它才会禁用按钮，当您选择“是”时，“下一步”按钮将出现，然后您可以在“payment.php”上提交表单。 - Sumit Bijvani
@user1777711 这是一种简单的方法，无需每次刷新页面。只需在是/否上启用/禁用提交按钮即可。 - Sumit Bijvani
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">
-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>

这里有一个演示

为什么这里是-1？请说明理由。 - Rajesh Paul
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接