根据单选按钮更改表单操作
[英]Change form action dependent upon radio buttons
问题描述
I am trying to change the action of an html form dependent on which radio button is checked. 
我试图根据选中的单选按钮更改html表单的操作。 I am trying to use jquery to do this. 我正在尝试使用jquery来做到这一点。 I have some code and can' work out why it is not working. 我有一些代码，无法弄清楚为什么它不起作用。 Can someone please help me get this code working. 有人可以帮我使此代码正常工作。
html: 的HTML：
<form name=loginForm id='login' action='' method='post'>
<legend>Login</legend>
<input type='text' name='email' maxlength="100" placeholder="Email"/>
<input type='password' name='password' maxlength="100" placeholder="password"/>
<div class="checkBoxGroup">
<label for="Employer">Employer</label>
<input type="radio" name="status" id='employer' value="employer">
</div>
<div class="checkBoxGroup">
<label for="Staff">Staff</label>
<input type="radio" name="status" id='staff' value="staff">
</div>
<input type='submit' name='Submit' value='Login' />
</form>
Javascript: Javascript：
$(document).ready(function(){
$("input[name='status']").change(function(){
if($("#employer").prop("checked", true)){
$("#login").attr("action", "DB/employerVerification.php")
}
else{
$("#login").attr("action", "DB/userVerfification.php")
}
}
4 个解决方案
解决方案1
3 2017-04-26 19:17:33
if($("#employer").prop("checked", true)){ will always return true because you're setting the property to checked . if($("#employer").prop("checked", true)){将始终返回true，因为您将属性设置为checked 。 You want to test if($("#employer").prop("checked") == true){ instead. 您想测试if($("#employer").prop("checked") == true){ 。
$(document).ready(function(){ $("input[name='status']").change(function(){ if($("#employer").prop("checked") == true){ $("#login").attr("action", "DB/employerVerification.php") } else{ $("#login").attr("action", "DB/userVerfification.php") } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name=loginForm id='login' action='' method='post'> <legend>Login</legend> <input type='text' name='email' maxlength="100" placeholder="Email"/> <input type='password' name='password' maxlength="100" placeholder="password"/> <div class="checkBoxGroup"> <label for="Employer">Employer</label> <input type="radio" name="status" id='employer' value="employer"> </div> <div class="checkBoxGroup"> <label for="Staff">Staff</label> <input type="radio" name="status" id='staff' value="staff"> </div> <input type='submit' name='Submit' value='Login' /> </form>
解决方案2
0 2017-04-26 19:18:43
Comments in code explain errors 代码中的注释说明错误
$(document).ready(function(){
$("input[name='status']").change(function(){
//if($("#employer").prop("checked", true)){ <--- wrong / this set the property !
if($("#employer").prop("checked")){ // <--- this check the property
$("#login").attr("action", "DB/employerVerification.php")
}
else{
$("#login").attr("action", "DB/userVerfification.php")
}
alert($("#login").attr("action"));
}); // missing parentheses
}); // missing parentheses
解决方案3
0 2017-04-26 19:24:29
Use the $('#employer').is(":checked") 使用$('#employer').is(":checked")
Please see below fiddle for reference https://jsfiddle.net/ganesh2412/4kt0f1bh/ 请参阅以下提琴以获取参考https://jsfiddle.net/ganesh2412/4kt0f1bh/
解决方案4
0 2017-04-26 19:51:31
Here is how you can dynamically change the action: 您可以通过以下方式动态更改操作：
View: 视图：
@model Testy20161006.Controllers.theModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index57</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("#setAction").click(function () {
//credit to http://stackoverflow.com/questions/5451600/jquery-to-change-form-action
if ($('input[name=changeAction]:checked').val() == "true") {
$("form").attr('action', 'ChangedAction');
}
})
})
</script>
</head>
<body>
<div>
@using (Html.BeginForm("Index57", "Home", FormMethod.Post))
{
//make sure N in Name is capital so it overrites the name property
@Html.RadioButtonFor(model => model.ChangedAction, "true", new { Name = "changeAction" })
<span>ChangedAction</span>
@Html.RadioButtonFor(model => model.ChangedAction, "false", new { Name = "changeAction" })
<span>NoActionChanged</span>
<input type="button" id="setAction" value="set Action" />
<input type="submit" id="theBtn" value="submit" />
}
</div>
</body>
</html>
The controller/model: 控制器/型号：
public class theModel
{
public bool ChangedAction { get; set; }
}
public class HomeController : Controller
{
[HttpPost]
public ActionResult ChangedAction(theModel theModel)
{
return View();
}
[HttpPost]
public ActionResult Index57(theModel theModel)
{
return View();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.