如何單選按鈕更改表單操作地址
[英]How to radio button change form action address
問題描述
如何使單選按鈕更改表單操作地址
我有一張表格，內容如下
和一個單選按鈕
<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
6 個解決方案
解決方案1
6 已采納 2013-11-01 18:42:32
這是一個使用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');
}
});
});
解決方案2
1 2013-11-01 18:39:44
根據您使用的是POST還是GET方法，它可以是：
$nextPage = ($_POST['choice']=='yes') ? 'payment.php' : 'register_page4.php';
要么
$nextPage = ($_GET['choice']=='yes') ? 'payment.php' : 'register_page4.php';
然后只需重定向到$ nextPage
解決方案3
1 2013-11-01 18:45:33
$("input[name=choice]").change(function(){
if ($("input[name=choice]").val() == 'yes'){
$("#formId").attr("action","payment.php");
}
else
{
$("#formId").attr("action","register_page4.php");
}
});
解決方案4
0 2013-11-01 18:52:34
如果checked = No則禁用“提交”按鈕
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);
});
});
解決方案5
0 2013-11-01 19:11:13
添加文檔就緒
<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
-1 2013-11-01 19:18:56
使用以下代碼：
<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>
這是一個演示
如何根據多個單選按鈕組更改表單操作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.