CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Tharaka Nuwan
Tharaka Nuwan

Reputation: 782

Ajax submit doesn't work

$(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>

Upvotes: 2

Views: 2902

Answers (3)

Amin Jafari
Amin Jafari

Reputation: 7207

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

Upvotes: 2

Chetan Gawai
Chetan Gawai

Reputation: 2401

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>

Upvotes: 1

Govind Singh
Govind Singh

Reputation: 15490

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;  
                }

                })
  });

});

Upvotes: 0

Related Questions