Not posting jQuery form

Question

I'm trying to post a form via Ajax, and I came across jQuery's POST, which sounds like the propper tool to use. I tried using the following html form:

<form id="my_form" action="http://localhost:4567/pedidos/guardar" method="POST">
  Name:<br>
  <input type="text" name="person_name"><br>
  Amount:<br>
  <input type="text" name="amount">
  <br>
  <input type="submit" value="Submit" id="submit_form">
</form>

<script type="text/javascript">
    $('#submit_form').click( function() {
  $.post( 'http://localhost:4567/pedidos/guardar', $('#my_form').serialize(), function(data) {
       // ... do something with response from server
       alert( "Data saved: " + data );
     },
     'json' // I expect a JSON response
  );
    });
</script>

This form was built based on this SO answer
I'm expecting to POST the form to /pedidos/guardar. On the server side, to test that the form is properly posted, I created a really small Sinatra script:

require 'sinatra'
require 'json'

not_found do
  status 404
  "This page could not be found"
end

get '/' do
  "Hello World!"
end

get '/pedidos' do
   { :person_name => "#{params[:person_name]}" }.to_json
end

post '/pedidos/guardar' do
  #{}"I got #{params[:person_name]}."
   { :person_name => "#{params[:person_name]}" }.to_json
end

When using my form, I'm getting {"person_name":"Juan"}, which is the expected response from Sinatra. But I'm not getting any alert window, it's like no Ajax is being used at all.
What am I missing in my form to make it work with Ajax? Do I need the action and method="POST" there?
Thanks in advance

Remove the action from form and implement submit function for the form in jQuery `$("#myform").submit(function(e){...your code here});` — Sambhav Gore, Jan 18 '16 at 19:29
Your alert will be shown only on success response which in your case will be `200` plus the content type in response will be checked for json. You may want to convert your ajax request from a shorthand `post` syntax to a more general one ( http://api.jquery.com/jQuery.ajax/ ) to be able to attach a `complete` callback that will be fired both on success or error responses. You can then check what is coming from server. — Nikolay Ermakov, Jan 18 '16 at 19:34
@wapsee it wasn't, and that was a problem too. Thank you all — jmm, Jan 18 '16 at 22:10

score 1 · Answer 1 · answered Jan 18 '16 at 19:38

1

You are sending your data throw ajax: $.post is a shorthand to $.ajax, but as the documentation explains it, you have to get a reference to the submit event and stop the default action.

$('#submit_form').click( function( event ) {
    // Stop form from submitting normally
    event.preventDefault();

answered Jan 18 '16 at 19:38

Ghepes Doru

51
4

So, that would be just before the `$.post` call? – jmm Jan 18 '16 at 19:54

agusgambina · Accepted Answer · 2016-01-18T22:11:52.550

0

Try replacing the script with this

$('#submit_form').click( function(){
  $.ajax({
    url: 'http://localhost:4567/pedidos/guardar',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data:  JSON.stringify($('#my_form').serialize()),
    success: function(data){
      alert( "Data saved: " + data );
    }
  });
});

setting the contentType is for the response data type.

edited Jan 18 '16 at 22:11

answered Jan 18 '16 at 21:12

agusgambina

6,229
14
54
94

Thanks, although this should have been `dataType : 'json'` – jmm Jan 18 '16 at 22:10

Not posting jQuery form

2 Answers2