Save data through ajax jQuery post with form submit

Question

I have a form and I want to save data through ajax jQuery post. If the save button is type="submit", it does not do any this just empty alert... I want to save data and remain on same form with refresh fields...

Here is what I have tried:

$("#saveNewContact").click(function () {
  var name       = $("#name").val(); 
  var last_name  = $("#last_name").val();
  $.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name},
   success: function(msg){ 
     alert(msg);
  });
 });

and here is my form

<form id="myForm" action="#" method="post">
<table id="table_1" class="form_table" align="center" cellpadding="0" cellspacing="0">
<tbody>
  <tr><td>
    <input  name="name"  id="name" value="" tabindex="5" readonly="" type="text">
    <input  name="name"  id="name" value="" tabindex="5" readonly="" type="text"> 
    <button type="submit" id="update" style="display:none;" 
     class="save_button saveHEX" name="Update" 
     value="Update Listing">Save Lead</button></td>
  </tr>
 </table>
 </form>

you can clear it another way. $('#myForm').find('input').val(''); do it inside your success function. — Siamak Motlagh
– Siamak Motlagh, Commented Mar 9, 2013 at 6:46
mplungjan:yes i have this $(function() {...}) and button is submit — Methew
– Methew, Commented Mar 9, 2013 at 6:47

Mm-Art-In · Accepted Answer · 2024-07-01 15:56:03Z

16

Do it this way

HTML

<form name="frm" method="POST" action="">
 <input type="text" name="name" id="name" value="" />
 <input type="text" name="last_name" id="last_name" value="" />
 <input type="submit" name="Update" id="update" value="Update" />
</form>

Your jQuery

$("#update").click(function(e) {
  e.preventDefault();
  var name = $("#name").val(); 
  var last_name = $("#last_name").val();
  var dataString = 'name='+name+'&last_name='+last_name;
  $.ajax({
    type:'POST',
    data:dataString,
    url:'insert.php',
    success:function(data) {
      alert(data);
    }
  });
});

So in the insert.php page

NOTE: this is a concept example only. This is not a safe way of handling user submitted data.

<?php
  $name = $_POST['name'];
  $last_name = $_POST['last_name'];
  $insert = "insert into TABLE_NAME values('$name','$last_name')";// Do Your Insert Query
  if(mysql_query($insert)) {
   echo "Success";
  } else {
   echo "Cannot Insert";
  }
?>

Hope this gives an Idea

edited Jul 1, 2024 at 15:56

Mm-Art-In

23.1k13 gold badges81 silver badges144 bronze badges

answered Mar 9, 2013 at 6:47

Roger

1,7011 gold badge18 silver badges34 bronze badges

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

4 Comments

Methew Over a year ago

exactly i tried this ..but issue was when button type was submit,it return empty alert...no data inserted in db...can i change type=submit?

Roger Over a year ago

@Methew : Yes You can use type="submit". But with a little modification.I have updated the answer please check

rebe100x Over a year ago

I think it would be nicer to use the dataType attribute of the post (or ajax method -> set it to json and no need for ugly serialization ! api.jquery.com/jQuery.post

RubbelDieKatz Over a year ago

I'm pretty sure that this SQL statement is vulnerable to SQL injection.

Dipesh Parmar · Accepted Answer · 2013-03-09 06:50:23Z

9

You do not need click event for this remove $("#saveNewContact").click(function () { and use .submit() jQuery method.

Also use .serialize that allow you to serialize form fields with value and create urlencoded dataString.

$("#myForm").on("submit",function (e)
{
    e.preventDefault();
    var formData = $(this).serialize();
    $.ajax(
    {
        type:'post',
        url:'receiver url',
        data:formData,
        beforeSend:function()
        {
            launchpreloader();
        },
        complete:function()
        {
            stopPreloader();
        },
        success:function(result)
        {
             alert(result);
        }
    });
});

answered Mar 9, 2013 at 6:50

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

mplungjan · Accepted Answer · 2013-03-09 06:46:23Z

2

Bind the form's submit instead AND no success in the $.post necessary, the function is enough:

$(function() {
  $("#myForm").on("submit",function (e) {
    e.preventDefault(); // stop the normal submission
    var name       = $("#name").val(); 
    var last_name  = $("#last_name").val();
    $.post("ajax_files/save_mydeals.php", {name: name, last_name: last_name},
     function(msg){ 
       alert(msg);
       $("#name").empty(); 
       $("#last_name").empty();
    });
   });
 });

answered Mar 9, 2013 at 6:46

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

Save data through ajax jQuery post with form submit

3 Answers 3

NOTE: this is a concept example only. This is not a safe way of handling user submitted data.

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

NOTE: this is a concept example only. This is not a safe way of handling user submitted data.

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related