2017-04-26 97 views
-1

我試圖根據檢查哪個單選按鈕來更改html表單的操作。我想用jQuery來做到這一點。我有一些代碼,可以'找出它爲什麼不工作。有人可以幫助我讓這個代碼工作。依賴於單選按鈕的更改表單操作

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:因爲你的屬性設置爲checked

$(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") 
    } 
    } 
+0

莫非這個問題是[問題]的重複(http://stackoverflow.com/questions/5451600/jquery-to-change-form-action) –

+0

如果你願意用JS提交表單,你可以完全跳過這個部分。 或者只是使用document.getElementById('login')。action =「newaction」; –

回答

3

if($("#employer").prop("checked", true)){將始終返回true。您想改爲測試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>

0

代碼中的註釋解釋錯誤

The jsfiddle

$(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 
0

這裏是你如何可以動態地改變行動:

查看:

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

控制器/型號:

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