Jquery serialize() method is returning null

Question

I am using serialize() method in my JSP page. But its returning null. Dont know what I am doing wrong Please help.

jQuery Code :

$(document).ready(function() {

  $("#addBtn").click(function() {
      var offerData = $("#testForm").serialize();
      alert(offerData);
  }

});

HTML Code :

<form id="testForm">
  <table>
    <tr>
      <td>Name :</td>
      <td>
        <input type="text" name="name" id="name" />
      </td>
    </tr>
    <tr>
      <td>Address :</td>
      <td>
        <input type="text" name="address" id="address" />
      </td>
    </tr>
    <tr>
      <input type="button" id="addBtn" />
    </tr>
  </table>
</form>

I posted relevant code only.

could you once replace input type button to submit and try. If not working then also then try using the form id selector and post the response :) — DpEN
– DpEN, Commented Jan 15, 2016 at 18:29

juallom · Accepted Answer · 2016-01-15 17:40:19Z

1

I think your javascript code is bad formatted, I tried this and it works fine...

$(document).ready(function () {

      $("#addBtn").click(function () {
          var offerData = $("#testForm").serialize(); 
          alert(offerData);
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form id="testForm">
<table>
<tr>
 <td>Name :</td>
 <td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
 <td>Address :</td>
 <td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>

answered Jan 15, 2016 at 17:40

juallom

1167 bronze badges

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

Comments

Cedric Ipkiss · Accepted Answer · 2016-01-15 17:41:42Z

1

There's an error in your javascript code. It should be:

<script type="text/javascript">
  $(document).ready(function () {

      $("#addBtn").click(function () {
          var offerData = $("#testForm").serialize(); 
          alert(offerData);
          });
         });
</script>

Notice the closing bracket and semicolon after your click method.

answered Jan 15, 2016 at 17:41

Cedric Ipkiss

6,5457 gold badges52 silver badges79 bronze badges

Comments

Alyson Freitas · Accepted Answer · 2016-01-15 17:45:02Z

1

you forgot the close parenthesis, the code below works

 $(document).ready(function () {
    $("#addBtn").click(function () {
      var offerData = $("#testForm").serialize(); 
      alert(offerData);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<form id="testForm">
<table>
<tr>
 <td>Name :</td>
 <td><input type="text" name="name" id="name"/></td>
</tr>
<tr>
 <td>Address :</td>
 <td><input type="text" name="address" id="address"/></td>
</tr>
<tr>
<input type="button" id="addBtn"/>
</tr>
</table>
</form>

answered Jan 15, 2016 at 17:45

Alyson Freitas

1361 silver badge5 bronze badges

Comments

jherax · Accepted Answer · 2016-01-15 18:02:21Z

1

Missing closing parenthesis for click event handler. Also in the HTML the last <tr> has no <td> included. Consider including your input element into <td colspan="2">

jQuery

  $("#addBtn").click(function() {
      var offerData = $("#testForm").serialize();
      alert(offerData);
  }); // <-- missing );

HTML

<tr>
  <td colspan="2">
    <input type="button" id="addBtn" />
  </td>
</tr>

answered Jan 15, 2016 at 18:02

jherax

5,2775 gold badges40 silver badges50 bronze badges

Collectives™ on Stack Overflow

Jquery serialize() method is returning null

4 Answers 4

Comments

Comments

Comments

jQuery

HTML

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

jQuery

HTML

Comments

Your Answer

Sign up or log in

Post as a guest

Related