CODEWITHSUNDEEP
formsjquery
mcbeav
mcbeav

Reputation: 12275

Problem posted data with jQuery submit()

I have the script below. I am trying to POST the data and insert it into a database, the jQuery executes just fine, but does not post anything, the action is working properly because when i post the data without the script, the data posts fine and is inserted into the database fine without any errors, so it seems as if the jquery function is posting nothing. can someone please help?

$('#form').live('submit',function(){
  $('#form').fadeOut('slow');
  $('#div').append("<h2>submittes</h2>");
  return false;
  });


<form id="form" method="post" action="execute.php" name="form">
<textarea id="text" name="update"></textarea>
<br>
<input type="submit" value="update" id="update-submit">
</form>

EDIT:

$('#form').live('submit',function(){
var updateTextArea = $('#textarea').val();
$.ajax({  
  type: "POST",  
  url: "execute.php",  
  data: updateTextArea,  
  success: function() {  
  $('#form').fadeOut('slow');
  $('#div').append("<h2>updated</h2>");
  }
  });
  return false;
  });

this is what i have for the ajax, but i am still not having any success.

Upvotes: 0

Views: 1123

Answers (2)

jAndy
jAndy

Reputation: 236092

Well, by returning false from the event handler function, you trigger two things:

  • prevent the default action (.preventDefault())
  • stop the event propagation (.stopPropagation())

This prevents that the submit ever happens.

You need to transfer the data on your own within the submit event handler. For instance, create an ajax request which serializes the form data and sends it to your server.

Could look like:

$('#form').live('submit',function(){
  $('#form').fadeOut('slow');
  $('#div').append("<h2>submittes</h2>");

  $.post('execute.php', $(this).serialize(), function(data) {
      // do something after success
  });
  return false;
});

Upvotes: 1

coreyward
coreyward

Reputation: 80090

You don't have any AJAX calls in your javascript. You're just fading out the form, appending an h2, and preventing the default action from occurring (which would be to submit the form normally).

Here's a basic example of how to create a POST ajax request:

$('#form').submit(function(){
  $.post($(this).attr('action'), { update: $(this).find('#text).val() }, function(){
    // success
  });
});

Checkout the jQuery API/Docs for more info on this. There are also dozens of tutorials lurking around the net on how to do this.

Upvotes: 2

Related Questions