Submitting Forms With JQuery May Not Give You The Results You Expect

We all know the scenario where we have a form, some input fields and a submit button. Have a look at the code below.

<form action="myPage.asp" method="post">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="button" id="btnSubmit" name="btnSubmit" value="btnSubmit" class="btn btn-default">Submit</button>
</form>

Notice that we have a button element which is type="button". It is not a type="submit" button. We could use javascript to do some validation on the form elements before posting, then initiate the form submit event. Like this.

$(function () {
    $("#btnSubmit").click(function () {
        if ($("#exampleInputEmail1").val() != '') {
            $("form").submit();
        }
    });
});

What you might expect to happen here is that when the btnSubmit button is clicked, there is validation to see if the exampleInputEmail1 field has a value. If it does, submit the form. Otherwise, do nothing.

This would be fine but there may be issues on the other side of the form post. You can see that the form is posting to a page called myPage.asp which will get all the form elements that were posted and do something with them (probably write them to a database). And in a lot of cases, people might use the value of btnSubmit to verify that the form has been posted (see code below for an example).

But, there is an issue with that. We posted the form from javascript which means that the btnSubmit element is not included in the form post payload. So therefore, if we try to do something like this on receipt of the form, we will not get what we expect.

if Request.Form("btnSubmit") <> "" then
	exampleInputEmail1 = Request.Form("exampleInputEmail1")
	exampleInputPassword1 = Request.Form("exampleInputPassword1")
	''  write to the database
end if

This block of code will never be satisfied because the btnSubmit element was not included in the post. Therefore, the Request.Form("btnSubmit") object will never have a value.

I suspect the reason that this functionality occurs is because $("form").submit(); is far too generic. It is possible (and quite likely) that you will have multiple forms in a single page. Subequently, how does javascript know which form on your page it should post?

A better approach is to use the <button type="submit" /> element and add it inside the form that you want to post. That way, you can still use javascript to do validation and all the elements you need will be posted in the form payload.

Til next time ...