My form data is not being submitted via JQuery code

Question

Following is my JQuery script code in the body tag.

<script type="text/javascript">
    $("#submit-data").click(function()
        {
            var form = new FormData($('#patient-personal')[0]);
            console.log(form);
        });
</script>

Following is my HTML code:

<form id="patient-personal" onsubmit="return false;" role="form">
<div class="form-body">
    <div class="row">
        {{-- Form Start --}}
        {{-- First Name --}}
        <div class="col-md-4">
            <div class="form-group form-md-line-input form-md-floating-label">
                <input type="text" class="form-control" name="firstname" id="firstname">
                <label for="firstname">First Name</label>
                <span class="help-block">Patient's First Name</span>
            </div>
        </div>
        {{-- Last Name --}}
        <div class="col-md-4">
            <div class="form-group form-md-line-input form-md-floating-label">
                <input type="text" class="form-control" name="lastname" id="lastname">
                <label for="lastname">Last Name</label>
                <span class="help-block">Patient's Last Name</span>
            </div>
        </div>
        {{-- Date of Birth --}}
        <div class="col-md-4">
            <div class="form-group form-md-line-input form-md-floating-label">
                <input type="date" class="form-control" name="dob" id="dob">
                {{-- <label for="dob">Date of Birth</label> --}}
                <span class="help-block">Patient's Date of Birth</span>
            </div>
        </div>
    </div>
</div>
<a href="javascript:;" id="submit-data" class="btn green button-submit"> Submit</a>
</form>

When ever i click on the submit button it shows no values in the Form variable. It shows a blank array. What may be the reason behind it?

like: `$('.myForm').serialize()` - docs here: http://api.jquery.com/serialize/ — treyBake, Jul 25 '17 at 15:43
Possible duplicate of [Obtain form input fields using jQuery?](https://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery) — Robert Moskal, Jul 25 '17 at 15:44
It is no duplicate please you can run the code and see I have used the advanced html5 form object there is no presence of it on that page please do confirm and do post duplicate tags _/\_ — Akshay Shrivastav, Jul 25 '17 at 15:51

score -2 · Answer 1 · edited Jul 25 '17 at 16:07

-2

Try this snip:

$('#patient-personal').serialize();

edited Jul 25 '17 at 16:07

TomServo

7,248
5
30
47

answered Jul 25 '17 at 15:49

Niranjan

47
2
7

never just post code - always add an explanation and references :) – treyBake Jul 25 '17 at 16:12

My form data is not being submitted via JQuery code

1 Answers1