how to submit form using jquery ajax?

Question

basically i have a form which inside it i have couple of text boxes with a submit button, the problem is that when i submit the form it just send the username box value and no other text box's values.

i am using servlet.

my code:

$(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        Form_submition();
    });

  });
  function Form_submition(){
      var formData = {
            'firstname': $('input[name=FirstName]').val(),
                'username': $('input[name=UserName]').val(),
              };
              $.ajax({
                  type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                  url: '../postr', // the url where we want to POST
                  data: formData, // our data object
                  dataType: 'json', // what type of data do we expect back from the server
                  encode: true

                })
                // using the done promise callback
                .done(function(data) {

                  console.log(data);
                });
  }

this is how i create the form and textboxes:

 <form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">


        <div id="Registeration_Firstname_Div" class="Registeration_Firstname_Div">
            <input type="text" id="Registeration_Firstname_box" class="Registeration_Firstname_box"
            placeholder="First name" name="FistName" maxlength="30" onblur="checkTextField(this, 'firstnameerror_div');" onclick="textboxfocus(this)"/>
        </div>


        <div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
            <input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
                placeholder="" name="UserName" maxlength="30" onblur="Usernameerrorfunc(this, 'Usernameerror_spn', 'Usernamenowallow_spn');" onclick="textboxfocus(this)"/>
        </div>

</form>
<div class="Registration_Submit_Div">
            <input type="submit" value="Sign up" id="SumbitForm_btn" class="SumbitForm_btn" name="Submit_btn"/>
        </div>

My servlet code that i output received data:

 PrintWriter out = response.getWriter();

    String str = request.getReader().lines().collect(Collectors.joining(System.lineSeparator()));

    System.out.println(str);

the output i get in my server is just username with value and nothing more

Try removing the `,` at the end of line 11 (first code part). Last object property doesn't need a comma at the end. — yuriy636, Aug 27 '16 at 11:05
@yuriy636 Unless he's running a very old version of IE, it should work. — Barmar, Aug 27 '16 at 11:09
And if that was the problem he wouldn't get any results, because it would complain about a syntax error. — Barmar, Aug 27 '16 at 11:10
i just removed the, no changes still am getting just the username, and i tried this on the latest version of chrome, firefox and opera — jacky, Aug 27 '16 at 11:11
Look in the Network tab, and check what request parameters it says are being sent. — Barmar, Aug 27 '16 at 11:12
i am not really much used to network tab in browser but i get: postr 200 xhr JquerySock.js:6 73 B 8 ms — jacky, Aug 27 '16 at 11:20

score 1 · Answer 1 · answered Aug 27 '16 at 14:34

just in case somebody else faced this problem. i changed my jquery code instead of getting the box through it's name to ID. and that fixed my problem!

var formData = {
     'firstname': $('#Registeration_Firstname_box').val(),
     'username': $('input[name=UserName]').val()
};

how to submit form using jquery ajax?

1 Answers1