Access to the form values via JavaScript

Question

I am trying to obtain the form values from JavaScript. The HTML code of the form is:

<form action="./ExampleServlet" method="POST" id="myform">
    <label>Username</label> 
    <input type="text" name="user"><br>

    <label>Password</label> 
    <input type="password" name="pswd" id="launchX"><br>

    <div class="action_btns">
        <div class="one_half last" id="loginButton">
            <a onclick="document.getElementById('myform').submit();" class="btn btn_red">Login</a>
        </div>
        <div class="one_half last" id="bottonBack">
            <a href="#closeButton" class="btn btn_red">Back</a>
        </div>
    </div>
</form>

$(function(){
    $("#launchX").keypress(function (e) {
        if (e.keyCode == 13) {
            alert('You pressed enter!');
            $.ajax({
                type: "POST",
                url: "./ExampleServlet",
                //data: {formValues: "formValues="+JSON.stringify($("#myform"))}
                data : { 
                    formValues: "formValues=" + $("#myform")[0].action
                }
            });
        }
    });
});

How can I send to my servlet only the values for the form (user and pswd parameters)?

Note 1: I commented //data: {formValues: "formValues="+JSON.stringify($("#myform"))} to toggle in-out some server-side console output tests.

Note 2: in this case the form $("#myform")[0].action returns correctly printing the url of the servlet. I tried also $("#myform")[0].method and it returns post as a string as expected.

Note 3: the form JSON.stringify($("#myform")) returns the entire "form object" and it prints all the form fields, but I can't find the field "user" and "pswd", i.e. the parameters I need.

I suppose to use $('#myform').serialize() but I'm not sure.

Rory McCrossan · Accepted Answer · 2016-04-04 14:35:23Z

2

As you noted, you should use the serialize() method on the form. Here's how:

$("#launchX").keypress(function (e) {
    if (e.keyCode == 13) {
        $.ajax({
            type: "POST",
            url: "./ExampleServlet",
            data: $('#myform').serialize()
        });
    }
});

Note that you could make this more dynamic by traversing the DOM to find the form related to the input that raised the event and setting all properties of the AJAX request from that form:

$("#launchX").keypress(function (e) {
    if (e.keyCode == 13) {
        var $form = $(this).closest('form');
        $.ajax({
            type: $form.prop('method'),
            url: $form.prop('action'),
            data: $form.serialize()
        });
    }
});

Either of the above will work for you.

edited Apr 4, 2016 at 14:35

answered Apr 4, 2016 at 14:18

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access to the form values via JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related