Ajax is giving me an error when I send data

Question

I am trying to submit a form by Ajax but I am unable to . I have multiple forms and I am using (this) to submit the data. I am getting the error From error:0 error .The alert messages are showing me that I have the value.

<script type="text/javascript">
$(document).ready(function() {

    $(".submitform").click(function (){
        alert ($(this).parent().serialize());
        $.ajax({
                type: "POST",
                url: "reply_business.php",
                timeout:5000,
                data: $(this).parent().serialize(),
                beforeSend: function(xhr){
                    $('#load').show();
                },
                success: function(response){
                    $(this).parent().find('.sentreply').append(response);
                    $('.sentreply div:last').fadeOut(10).fadeIn(2000);
                    //uncomment for debugging purposes
                    //alert(response);
                },
                error: function(jqXHR) {
                   alert ('From error:' + jqXHR.status + ' ' +jqXHR.statusText);
                },
                complete: function(jqXHR, textStatus){
                    //uncomment for debugging purposes
                    //alert ('From complete:' + jqXHR.status + ' ' +jqXHR.statusText + ' ' + textStatus);
                    $('#load').hide();
           }
        });

    });
}); 

    </script>

I am creating the form below by the PHP code

foreach ($array['business_ids'] as $business) 
                  {              

                        ?>
<form >
  <input type="hidden" name="b_id" value="<?php echo $business ; ?>" />
  <input type="hidden" name="c_id" value="<?php echo $sqlr['conversation_id']; ?>" />
  <input type="hidden" name="q_id" value="<?php echo $sqlr['query_id']; ?>" />
  <input type="hidden" name="u_id" value="<?php echo $sqlr['u_id']; ?>" />
  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;
  <textarea  name="reply">Type the reply here.</textarea>
  <input type="submit"  class="submitform" value="Submit">
</form>
<?php


                  }

I do not understand why Ajax isn't able to send the data.

Answer 1

Without seeing the markup or the network traffic, we can only guess. Perhaps $(this).parent() isn't the form?

It's typically safer to attach $(form).submit() than $(button).click() for this reason and because $(button).click() doesn't capture form submit by hitting the enter key.

Edit Here's an example:

<form id="theform">
    <input type="text" id="thetext" name="thetext" />
    <input type="submit" value="send" />
</form>
<form id="anotherform">
    <input type="text" id="anothertext" name="anothertext" />
    <input type="submit" value="save 2" />
</form>
<script>
    $(document).ready(function () {
        $("#theform").submit(function (e) {
            var data = {
                thetext: $("#thetext").val()
            };
            $.ajax("/the/server/url", {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (r) {
                    alert("done");
                }
            });
            // Technically you need only one or the other
            e.preventDefault();
            return false;
        });
    });
</script>

Answer 2

You seem to have submitted the form after starting the Ajax request - and when the page is unloaded, the request is cancelled. Since your form has no action , the submit will just reload the current page so you might not notice it.

To prevent this, you will need to preventDefault() the catched event. Also, you should not handle just click events on submit-buttons, but rather the submit -event of the <form> itself.