jQuery change submit value to “Please wait” & then submit the form using PHP

Question

I have a form.

            <form action="login.php" method="post" id="form">
                <input type="text" name="name" class="textbox" id="name" placeholder="Username"><br /><br />
                <input type="password" name="pass" class="textbox" id="pass" placeholder="Password"><br /><br />
                <div id="holder">
                    <input type="submit" name="submit" value="Login" class="submit_wide">
                </div>
                <br />
            </form>

I want to change the value of the submit input to "Please wait.." upon click. So while the page is redirecting, user will see "Please wait..".

I don't want to POST using javascript, I want it to redirect.

When I click 'Login', it changes to 'Please wait', but the submit action stops, but when I click again, it redirects.

What's wrong and how do I fix this?

$(document).ready(function() {
            $(".submit_wide").click(function() 
            {
                if ($("#name").val() != '' && $("#pass").val() != '')
                {
                    $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');
                }
                else
                {
                    $("#error").fadeIn("slow");
                    $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');
                    event.preventDefault();                 
                }
            });
        });

What I've tried:

Adding

$("#form").submit();

after the HTML change line.

It' just does the same as it did before.

How do I fix this and what causing this? Thanks.

Answer 1

Try this:

$(".submit_wide").click(function (event) {
    if ($("#name").val() != '' && $("#pass").val() != '') {
        $(this).val('Please wait..');
    } else {
        event.preventDefault();
        $("#error").fadeIn("slow");
        $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');
    }
});

Answer 2

replace

$("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');

with

$('.submit_wide').val('please wait..');

when you use html() , it removes your submit button and creates a new one. You should only change the value of the button.

Answer 3

To make it submit you will need to return true from the submit handler.

$(document).ready(function() {
            $(".submit_wide").click(function() 
            {
                if ($("#name").val() != '' && $("#pass").val() != '')
                {
                    $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');
                    return true;
                }
                else
                {
                    $("#error").fadeIn("slow");
                    $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');            
                    return false;
                }
            });
        });

ps I would just change the value of the submit not replace the whole button.

Answer 4

Make this your html script:

<form action="login.php" method="post" id="form" onSubmit="return replaceIt()" >
                <input type="text" name="name" class="textbox" id="name" placeholder="Username"><br /><br />
                <input type="password" name="pass" class="textbox" id="pass" placeholder="Password"><br /><br />
                <div id="holder">
                    <input type="submit" name="submit" value="Login" class="submit_wide">
                </div>
                <br />
            </form>

And this your JS function:

function replaceIt() {
            if ($("#name").val() != '' && $("#pass").val() != '')
            {
                $("#holder").html('<input type="submit" name="submit" value="Please wait.." class="submit_wide">');
                return true;
            }
            else
            {
                $("#error").fadeIn("slow");
                $("#error").html('<span class="alert alert-error">Please fill ALL of the fields.</span>');
                return false;              
            }
    }