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:

<HTML>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<script type="text/javscript">
$('#form_id').on('submit', function(e){
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: "http://www.vemvo.com/test/postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
});
</script>   
<form method="post" id="form_id">
<input type="text" name="ime">
<input type="submit" id="submit" name="submit" value="Send">
</form>

You can see the page here: http://www.vemvo.com/test/post.php

Here is the code from my postinfo.php:

<?PHP

$ime = $_POST['ime'];

echo "Your name is $ime";
?>

Here is located postinfo.php - http://www.vemvo.com/test/postinfo.php

So where is my mistake and how I can make it work? Now it's not sending the data and not giving me the success alert.

http://www.johnboy.com/scripts/simple-jquery-form-without-page-refresh/contact.php — Seazoux, Oct 20 '13 at 11:53
Wrap $('#form_id').on('submit', function(e){}) in $(function() { ... }) — mplungjan, Oct 20 '13 at 11:54

David · Answer 1 · 2013-10-20T12:09:44.150

2

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');
   }
});
return false;

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:

<script type="text/javscript">

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

<script type="text/javascript">

edited Oct 20 '13 at 12:09

answered Oct 20 '13 at 11:57

David

208,112
36
198
279

So what i have to change to make it post the data to ./postinfo.php ? How my whole code will look like? – Tonny Struck Oct 20 '13 at 12:03
No need to return false! – mplungjan Oct 20 '13 at 12:04
@TonnyStruck: As I suggested, you need to wrap your jQuery code in `$(function() { ... });`. Currently your code is executing *before* the `form` element exists. (Notice how your JavaScript block is above the `form` element. It executes inline right away, so it executes before the `form` element is known.) Wrapping it in the jQuery function will cause it to not execute until the entire document is ready. – David Oct 20 '13 at 12:06
@TonnyStruck: I just noticed you also have a typo here: ` – David Oct 20 '13 at 12:10
Thanks now it's works well! See the code here (view as source) - http://vemvo.com/test/post.php Are you sure that i need `return false;` and how my whole script will look like. BIG THANKS ONCE MORE! – Tonny Struck Oct 20 '13 at 12:13
@TonnyStruck: I'm not 100% sure that `return false;` is necessary in this case. You can test it easily enough, though. It *may* even be browser-specific behavior. I can't imagine that it hurts anything, so personally I'd leave it in place just in case. – David Oct 20 '13 at 12:14
No need for the return false. All other corrections I made are good practice – mplungjan Oct 20 '13 at 12:14
Good to see it working! It was the $(function(){}); that fixed it? – Richard Peck Oct 20 '13 at 13:47

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="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>
  <form method="post" id="form_id">
    <input type="text" name="ime">
    <input type="submit" value="Send">
  </form>
</body>
</html>

edited May 23 '17 at 12:15

Community

1
1

answered Oct 20 '13 at 11:55

mplungjan

169,008
28
173
236

I've tried your code but it's not giving the success alert. I think it's not sending the data too.. – Tonny Struck Oct 20 '13 at 12:01
1

Please do NOT call anything name=SUBMIT! – mplungjan Oct 20 '13 at 12:03
What do you mean ? I have changed my code to look exactly like the one you are giving me and it's not giving the Success alert. Here you can see it - http://vemvo.com/test/post.php – Tonny Struck Oct 20 '13 at 12:05
Very strange. I was sure it was the name="submit" that blocked the event handler. I will look closer – mplungjan Oct 20 '13 at 12:08
Typo IN **text/javascript"** was the main reason ! – mplungjan Oct 20 '13 at 12:10
Can this script send `enctype="multipart/form-data"` type form? – Tonny Struck Oct 20 '13 at 12:22
Hey @mplungjan, this is based on [another post](http://stackoverflow.com/questions/19476532/send-post-data-from-html-form-with-javascript/19476594#19476594) that we [wrote a JSFiddle](http://jsfiddle.net/nBNwU/3/) for. The code the OP is using is from that fiddle. Here's the working fiddle for you: http://jsfiddle.net/nBNwU/3/ – Richard Peck Oct 20 '13 at 13:43
I posted because you'll be able to see a functioning version of the JS - I think the problem is either with the guy's host (security), or something else server-side – Richard Peck Oct 20 '13 at 13:45
@RichPeck Nothing of the sort The main problem was not spelling text/javascript correctly so none of his JS was executed – mplungjan Oct 20 '13 at 14:02
Ok, it's good that it's fixed! I provided the code the OP was using (he was trying to do some weird stuff before using $.ajax), and I also provided the misspelt `text/javascript` code, so I just wanted to point out that the code I actually provided the OP was functional in JSFiddle, and it was his implementation which was likely causing the issue – Richard Peck Oct 20 '13 at 14:11

Send HTML form post data to file with Jquery?

2 Answers2

Linked