jquery/ajax form submission not working

Question

i got a jquery code for form submission from some tutorial websites, but the ajax was not working i guess. It happens nothing when i submit the form. I tried everything but no result.

here is my jquery code.

    $("#summary").submit(function (event) {
    event.preventDefault();
    var name = $("#name").val();
    var address = $("#address").val();
    var landline_number = $("#landline_number").val();
    var mobile_number = $("#mobile_number").val();
    var profile_email = $("#profile_email").val();
    var profile_statement = $("#profile_statement").val();
    var dataString = 'name='+name+'&address='+address+'&landline_number=' + landline_number + '&profile_email=' + profile_email + '&prof  ile_statement=' + profile_statement + '&mobile_number=' + mobile_number;
    $.ajax({
        type: 'POST',
        data: dataString,
        url: 'test2.php',
        success: function (data) {
            $('#hello').html(data);
        }
    });
});

Html Code

<form name="summary" id="summary" action="" method="POST"> 
 <div class="profile-header">

  <table  width="740">
  <tr>
  <td>
  <h2>Personal Detail:</h2>
  </td>
  <td>
  <input type="text" id="name" name="name" />
  </td>
  </tr>
  </table>
  </div>
  <div class="profile-table-hide">

  <table  width="740">
  <tr>
    <td width="297"><p>Address Location</p></td>
    <td width="10" class="divider"></td>
    <td width="428"><input id="address" type="text" name="address" /></td>
  </tr>
  <tr>
    <td><p>Landline Number</p></td>
    <td class="divider">&nbsp;</td>
    <td><input type="text" id="landline_number" name="landline_number" /></td>
  </tr>
  <tr>
    <td><p>Mobile Number</p></td>
    <td class="divider"></td>
    <td><input type="text" id="mobile_number" name="mobile_number" /></td>
  </tr>
  <tr>
    <td><p>Email Address</p></td>
    <td class="divider">&nbsp;</td>
    <td><input type="text" id="profile_email"  name="profile_email" /></td>
  </tr>
  <tr>
    <td><p>Personal Statement</p></td>
    <td class="divider">&nbsp;</td>
    <td><textarea id="profile_statement" name="profile_statement"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td class="divider">&nbsp;</td>
    <td><input type="button" id="save1" value="Save" name="save1" /></td>
  </tr>
</table>
</div>
</form>

Php File

$sql = "INSERT INTO `profile_detail` (`ref`,`p_name`,`p_mob`,`landline_number`,`p_email`,`p_add`,`p_statement`) VALUES 
    ('$user_app_id','".$_POST['name']."','".$_POST['mobile_number']."','".$_POST['landline_number']."',
     '".$_POST['profile_email']."','".$_POST['address']."','".$_POST['profile_statement']."') ";
if (mysql_query($sql)) {
echo "<script>window.top.location='index'</script>";
  }
else {
echo mysql_error();
}

What are you expecting? Are you getting any errors in the console (F12)? — adeneo
– adeneo, Commented Nov 21, 2013 at 14:05
i expecting form submission when i submit it! but nothing happens even on console. — Abeer Waseem
– Abeer Waseem, Commented Nov 21, 2013 at 14:07
what is the post params sent in the request? check it in chrome/firebug console — Murali Murugesan
– Murali Murugesan, Commented Nov 21, 2013 at 14:08

Johan · Accepted Answer · 2013-11-21 14:13:09Z

3

Clicking an input element with type="button" won't submit the form. You need to change it to type="submit".

<td><input type="submit" id="save1" value="Save" name="save1" /></td>

answered Nov 21, 2013 at 14:13

Johan

1,0268 silver badges13 bronze badges

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

1 Comment

Abeer Waseem Over a year ago

woowwwwwwww, what a sily mistake!! Thanks bro, you made my day!!

Murali Murugesan · Accepted Answer · 2013-11-21 14:04:20Z

0

Try using serializeArray() to post your data

$.ajax({
    type: 'POST',
    data: $('#summary').serializeArray()
    url: 'test2.php',
    success: function (data) {
        $('#hello').html(data);
    }
});

answered Nov 21, 2013 at 14:04

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Comments

Atutouato · Accepted Answer · 2013-11-21 14:05:57Z

0

I think your problem is that you're running the code from file:// protocol. Server scripts like .php need http:// protocol.
In order to run this, look into Apache and try running that server. For Linux, you should put your files into /var/www, but for other operating systems, I'm not sure.
Good luck!

answered Nov 21, 2013 at 14:05

Atutouato

3754 silver badges13 bronze badges

2 Comments

Abeer Waseem Over a year ago

i am running it on xamp.

Atutouato Over a year ago

Hm. Sorry... I don't know from there.

user7789076 · Accepted Answer · 2013-11-21 14:30:57Z

0

There are two mistake in you code

First Change

1.<input type="button" id="save1" value="Save" name="save1" />

to

<input type="submit" id="save1" value="Save" name="save1" />

and second

$('#hello').html(data);

I cant see any hello id in your form so make one like

<div id="hello"></div>

Thanks

answered Nov 21, 2013 at 14:30

user7789076

7983 gold badges12 silver badges25 bronze badges

Collectives™ on Stack Overflow

jquery/ajax form submission not working

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related