Ajax submit doesn't work

Question

$(document).ready(function(){
  $("#form1").submit(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                }

                })
  });
  return false;
});

I have echoed in several places to see where it goes wrong. only "working 02 is displayed and nothing happened. portal.php is ready to accept data. Here's my form.

 <form id="form1" method="post">
          <label class="label_title"> e-mail </label>
          <input type="text" id="email" required>

          <label class="label_title">Comments:</label>
          <textarea cols="50" rows="10" name="com" id="com" class="textarea required" required ></textarea>
          <input type="submit" class="button" value="Send">
          </form>

Change button type to button, and call above function on click — Vinit Prajapati
– Vinit Prajapati, Commented Jun 18, 2014 at 5:45
open console and try the ajax function and check whether it shows any errors. try this... $.ajax({ type: 'POST', url : '../portal.php', data: $('#form1').serialize(), success: function(response) { $('#form1').fadeOut("slow"); alert ('working 03'); } }); — Vaisakh Parannattil Cherul
– Vaisakh Parannattil Cherul, Commented Jun 18, 2014 at 5:46

Amin Jafari · Accepted Answer · 2014-06-18 05:55:28Z

2

you can't use submit and ajax, it's better to use click:

$(document).ready(function(){
  $(".button").click(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                }

                })
  });
});

P.S. it's better to remove the type="submit" from your button

UPDATE:

$(document).ready(function(){
  $(".button").click(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.post('../portal.php',{data:$('#form1').serialize()},function(response){
             $('#form1').fadeOut("slow");
             alert ('working 03');
         });
  });
});

edited Jun 18, 2014 at 5:55

answered Jun 18, 2014 at 5:43

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tharaka Nuwan Over a year ago

thanx, But results are same.

Chetan Gawai · Accepted Answer · 2014-06-18 05:47:04Z

Try this out

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<form id="form1" method="post">
          <label class="label_title"> e-mail </label>
          <input type="text" id="email" required>

          <label class="label_title">Comments:</label>
          <textarea cols="50" rows="10" name="com" id="com" class="textarea required" required ></textarea>
          <input type="button" class="button" id="submit" value="Send"><!--changed-->
          </form>
          <script>
            $(document).ready(function(){
 $("#submit").click(function (e){            //changed
        alert ('working 01');
          //  e.preventDefault();
           // var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                }

                })
  });
  //return false;
});
          </script>

Govind Singh · Accepted Answer · 2014-06-18 05:45:16Z

0

ajax is asynchronus.

so your return false; called before the ajax request.

return on the success of ajax

$(document).ready(function(){
  $("#form1").submit(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                return false;  
                }

                })
  });

});

answered Jun 18, 2014 at 5:45

Govind Singh

15.5k14 gold badges77 silver badges109 bronze badges

3 Comments

Tharaka Nuwan Over a year ago

earlier tried removing return false;. results same. thanks for supporting.

Govind Singh Over a year ago

@TharakaandRukshan yes both behave sames

Govind Singh Over a year ago

@TharakaandRukshan if you want to remove return statement then make sure you you are not using submit type of button

Collectives™ on Stack Overflow

Ajax submit doesn't work

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related