Send Html Form Post Data To File With Jquery?

Question

I am trying to send post data to my post data file handler called postinfo.php with jQuery but so far I can make it. Here is my post.php code:

Solution 1:

Your jQuery selector isn't going to find that form, since the selector is running before the form tag exists in the DOM. Try wrapping it in the jQuery function to wait for the document to be ready:

$(function () {
    $('#form_id').on('submit', function(e){
        // the rest of your code
    });
});

It also might be a good idea to return false at the end, to further suppress the form's default post action:

e.preventDefault();
$.ajax({
   type: "POST",
   url: "./postinfo.php",
   data: $(this).serialize(),
   success: function() {
     alert('success');
   }
});
returnfalse;

Currently the form is posting as normal. Since the AJAX handler is never attached (because the element doesn't exist when the selector executes), it's just doing a normal document-level form post. And since there's no action attribute specified in the form tag, the page is posting to itself by default. Which just responds with the current page.

Edit: You also have a typo which may be preventing the browser from executing your JavaScript code at all:

Baca Juga

<scripttype="text/javscript">

You're missing the second "a". This should be:

<scripttype="text/javascript">

Solution 2:

You MUST spell text/javascript correctly
You need to assign the event handler on load
There should not be any need to return false as posted by some other people here
NEVER call anything submit in a form
Wrap your html in body tags
Use a correct DOCTYPE
For files you can have a look at uploadify or How can I upload files asynchronously?

Fixed code for point 1 to 6

<!DOCTYPE html><html><head><title>Test Ajax</title><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scripttype="text/javascript">
 $(function(){
    $('#form_id').on('submit', function(e){
      e.preventDefault();
      $.ajax({
       type: "POST",
       url: "./postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
  });
});
</script></head><body><formmethod="post"id="form_id"><inputtype="text"name="ime"><inputtype="submit"value="Send"></form></body></html>

JavaScript General

Send Html Form Post Data To File With Jquery?

Solution 1:

Solution 2:

Post a Comment for "Send Html Form Post Data To File With Jquery?"