Change form action dependent upon radio buttons

Question

I am trying to change the action of an html form dependent on which radio button is checked. I am trying to use jquery to do this. I have some code and can' work out why it is not working. Can someone please help me get this code working.

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")
    }
  }

Could this question be a duplication of [question](http://stackoverflow.com/questions/5451600/jquery-to-change-form-action) — Felipe Valencia, Apr 26 '17 at 19:15
If you would submit the form with JS you could skip that part entirely. or just use document.getElementById('login').action = "newaction"; — Nima Foladi, Apr 26 '17 at 19:15

score 4 · Answer 1 · answered Apr 26 '17 at 19:17

if($("#employer").prop("checked", true)){ will always return true because you're setting the property to checked. You want to test if($("#employer").prop("checked") == true){ instead.

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

score 0 · Answer 2 · answered Apr 26 '17 at 19:18

Comments in code explain errors

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

score 0 · Answer 3 · answered Apr 26 '17 at 19:24

0

Use the $('#employer').is(":checked")

Please see below fiddle for reference https://jsfiddle.net/ganesh2412/4kt0f1bh/

answered Apr 26 '17 at 19:24

ganesh deshmukh

314
4
17

score 0 · Answer 4 · answered Apr 26 '17 at 19:51

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

Change form action dependent upon radio buttons

4 Answers4