CODEWITHSUNDEEP
javascriptjquery
Rahman
Rahman

Reputation: 3785

Jquery serialize() method is returning null

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.

Upvotes: 0

Views: 474

Answers (4)

jherax
jherax

Reputation: 5267

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>

Upvotes: 1

Alyson Freitas
Alyson Freitas

Reputation: 136

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>

Upvotes: 1

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

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.

Upvotes: 1

juallom
juallom

Reputation: 116

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>

Upvotes: 1

Related Questions