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

【问题标题】：How to radio button change form action address如何单选按钮更改表单操作地址
【发布时间】：2013-11-13 00:44:48
【问题描述】：

如何让单选按钮改变表单动作地址

我得到了一个包含以下内容的表单

还有一个单选按钮

<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 ？
@ShankarDamodaran 由于页面获得了除了选项之外的一些帖子值，是否可以在 register_page4.php 使用标头重定向到 payment.php 或者我应该在 javascript 级别解释然后做正确的重定向到 payment.php 而不是重新路由

标签： javascript php jquery html forms

【解决方案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');
        }
    });
});

【讨论】：

我根据您的更改进行了更改，但它仍然无法正常工作。代码贴在上面。
最好将所有 JS 代码放在 body 元素的末尾（就在结束

【解决方案2】：

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

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

或

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

然后简单地重定向到 $nextPage

【讨论】：

但是由于页面除了选择之外还有一些帖子值，是否可以在 register_page4.php 使用 header 重定向到 payment.php
哦，我明白你的意思了。我个人不喜欢分离出这些类型的代码，并且会让逻辑发生在脚本中。不过，jQuery 是你最好的选择。
Mike 对 jQuery 做事的方法有很好的回答，实际上。
就个人而言，我会在一个脚本中完成所有逻辑。不要重定向到页面，而是使用与我提交的代码类似的逻辑来决定您对帖子执行的操作。在尝试使用 mike 的代码之前，您是否包含了 jQuery 库等？

【解决方案3】：

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

【讨论】：

【解决方案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);
    });
});

【讨论】：

我需要它能够相应地采取行动，不需要禁用按钮，我更新了我的问题。
只有当有人选中No时才会禁用按钮，当你选中Yes时会出现NEXT按钮，你可以在payment.php上提交表单
@user1777711 方法简单，无需每次刷新页面。只需在是/否上启用/禁用提交按钮

【解决方案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">

【讨论】：

【解决方案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

【讨论】：

这里为什么是-1。请讲道理。