2017-04-26 2 views
-1

Ich versuche, die Aktion eines HTML-Formulars abhängig davon, welches Optionsfeld aktiviert ist, zu ändern. Ich versuche, jQuery dafür zu verwenden. Ich habe etwas Code und kann herausfinden, warum es nicht funktioniert. Kann mir bitte jemand helfen, dass dieser Code funktioniert?Ändern Formularaktion abhängig von Optionsfeldern

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:

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

Könnte diese Frage sei eine Verdoppelung von [Frage] (http://stackoverflow.com/questions/5451600/jquery-to-change-form-action) –

+0

Wenn du würdest Übermitteln Sie das Formular mit JS, Sie könnten diesen Teil komplett überspringen. oder verwenden Sie einfach document.getElementById ('Login'). Action = "newaction"; –

Antwort

3

if($("#employer").prop("checked", true)){ wird immer wahr zurück, weil Sie die Eigenschaft auf checked sind einstellen. Sie möchten stattdessen if($("#employer").prop("checked") == true){ testen.

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

Kommentare im Code erklären Fehler

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

Hier ist, wie Sie dynamisch die Aktion ändern können:

Ausblick:

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

Der Controller/Modell:

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