Jquery send post form ajax not work

Question

am try to send form ajax like this code

<script type='text/javascript'>
/* attach a submit handler to the form */
  $("#non").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* get some values from elements on the page: */
      var $form = $( this ),
          url = $form.attr( 'action' );

      /* Send the data using post */
      var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );

      /* Alerts the results */
      posting.done(function( data ) {
        alert('success');
      });
    });
 </script>

it not alert success,and i check action after click button is ok

So there's no alert? Did you check the console for errors, and make sure the page doesn't actually reload when you submit the form — adeneo, Apr 30 '16 at 14:03
Did you try using `always()` instead of `done()` to be sure request is even sent and returns? Normally you should check it in developer tools of whatever browser you are using but you can as well do it this way. — Linek, Apr 30 '16 at 14:23
jquery-1.12.3.min.js:4 POST http://localhost:8000/index/saveedit 500 (Internal Server Error) — Slatan-ko, Apr 30 '16 at 14:25
It is because when you use $.post, javascript send POST request and go to next line. Javascript dont wait for $.post response! You need to use done in $.post. — Mohammad, Apr 30 '16 at 14:29

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

If jquery.min.js added. Then please ignore it. Else add it. To get action of <form> Use var action_url = form.attr('action');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#non').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
    var action_url = form.attr('action');
    $.ajax({
      url: action_url,
      type: "POST",
      data: formData,
      success: function (data) {
                alert(data);
      },
      error: function () {
        alert("Oops..!! Problem Ocurred. Please Try Again..!!");
      }
  });
});  
</script>

User's Requirement

<script>
$('#non').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var val1 = $('#text1').val();
    var val2 = $('#text2').val();
    var action_url = form.attr('action');
    $.ajax({
      url: action_url,
      type: "POST",
      data: { text1: val1, text2: val2 },
      success: function (data) {
                alert(data);
      },
      error: function () {
        alert("Oops..!! Problem Ocurred. Please Try Again..!!");
      }
  });
});

Or, check Send FormData and String Data Together Through JQuery AJAX?

Additional

<script>
$('#non').on('submit', function(e) {
    e.preventDefault();
    var form = $(this);
    var formData = form.serialize();
        var title_f = $('#mak').val();
    var meaning_f = $('#za').val();
        formData.append(title,title_f);
        formData.append(meaning,meaning_f);
    var action_url = form.attr('action');
    $.ajax({
      url: action_url,
      type: "POST",
      data: formData,
      success: function (data) {
                alert(data);
      },
      error: function () {
        alert("Oops..!! Problem Ocurred. Please Try Again..!!");
      }
  });
});

edited May 23 '17 at 12:31

Community

1
1

answered Apr 30 '16 at 14:25

Nana Partykar

10,556
10
48
77

another if i want to send variable from this code but it is not form from. like variable in javascript how can i implement it – Slatan-ko Apr 30 '16 at 14:30
i mean add variable in script to var formData – Slatan-ko Apr 30 '16 at 14:32
Wait for 5 Minutes @NonBrazilian – Nana Partykar Apr 30 '16 at 14:32
I edited my answer in **User's Requirement** section. Please have a look. I am going from office. Can't be online. So, keep trying. *Keep Coding.* @NonBrazilian – Nana Partykar Apr 30 '16 at 14:37
If not getting, then please click that link which I edited in my answer. You will know @NonBrazilian – Nana Partykar Apr 30 '16 at 14:38
data: { text1: val1, text2: val2 }, text1 text2 mean ? i have fail – Slatan-ko Apr 30 '16 at 14:44
Please check latest answer. I updated. Now, you will understand @NonBrazilian. And, please follow that link. – Nana Partykar Apr 30 '16 at 14:48
alert Oops..!! Problem Ocurred. Please Try Again.. i check title_f meanig_f is correct data why it not work – Slatan-ko Apr 30 '16 at 14:54
Please see my edited answer @NonBrazilian: Good night. – Nana Partykar Apr 30 '16 at 14:59
error on browser Computer:93 Uncaught ReferenceError: title is not defined – Slatan-ko Apr 30 '16 at 15:03

score 0 · Answer 2 · answered Apr 30 '16 at 14:15

Why not attach your Handler directly to the Submit-Button & do something like this:

<script type='text/javascript'>
  /* attach a submit handler to the form */
  $("#submitBtn").on("click", function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  // HERE IS THE PROBLEM... THE $(this) VARIABLE POINTS TO THE BUTTON, NOT FORM.   
  var $form = $( this ).parentsUntil("form").parent("form"),
      url = $form.attr( 'action' );

  /* Send the data using post */
  var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});

Jquery send post form ajax not work

2 Answers2