How to change form action with jQuery based on checkbox

Question

Iam working on login page of my website. Using same login page the users and admin can login to website I have given two options(checkbox) based on than the form action should cange but it is not woking properly. The form is This

<form method="post" id="loginForm">
    Username <input placeholder="email" class="form-control" name="email" id="email" type="text" required=""> 
        Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
        <input type="checkbox" id="user" checked="checked"> User 
        <input type="checkbox" id="adminAction"> Admin 
        <a href="#" class="text-right text-white text-capitalize">forgot password?</a>
         <input type="submit" value="Log In"> 
         <a href="/register" class="text-white  font-weight-bold"> Register Now</a>
</form>

And this is the jquery code

<script>
if($('#adminAction').is(':checked')){
        $('#loginForm').attr('action','/adminLogin');
    }
    else{
        $('#loginForm').attr('action','/userLogin');
    }
</script>

Not sure why you would need something like that. Its not a very good practice. You should use the same form and redirect the user accordingly AFTER he logs in and has a specific role.Also this looks like a duplicate - https://stackoverflow.com/questions/5451600/jquery-to-change-form-action — Dante R., Dec 19 '18 at 18:50
Possible duplicate of [Jquery to change form action](https://stackoverflow.com/questions/5451600/jquery-to-change-form-action) — Dante R., Dec 19 '18 at 18:51

brianyates · Accepted Answer · 2018-12-19T19:03:27.263

As Dante mentioned, it's probably not a great idea to toggle between form actions on the client side. But all that aside, I think your issue is that you didn't put $(document).ready in your script. Furthermore, you should probably set an initial action in your form of action='/userLogin' since there's no action when the page initially loads, and there's no trigger in your code to change anything when the checkbox gets changed. Try something like this:

<form method="post" id="loginForm">
    Username <input action='/userLogin' placeholder="email" class="form-control" name="email" id="email" type="text" required=""> 
        Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
        <input type="checkbox" id="user" checked="checked"> User 
        <input type="checkbox" id="adminAction"> Admin 
        <a href="#" class="text-right text-white text-capitalize">forgot password?</a>
         <input type="submit" value="Log In"> 
         <a href="/register" class="text-white  font-weight-bold"> Register Now</a>
</form>

<script>
    $(document).ready(function(){
        $('#adminAction').change(function(){
            var checked = $('#adminAction').is(':checked');
            if(checked){
                $('#loginForm').attr('action','/adminLogin');
            }
            else{
                $('#loginForm').attr('action','/userLogin');
            }
        })  
    });
</script>

How to change form action with jQuery based on checkbox

1 Answers1