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.

How does the request look like in your network debugger? Does the server respond? — Bergi, Jan 19 '13 at 17:50
similiar problem, this may even solve your problem: http://stackoverflow.com/questions/5661813/jqxhr-http-status-code-403-but-the-statuscode-is-0 — doniyor, Jan 19 '13 at 17:53
@Bergi - The status comes as CANCELED for the requested page? any idea why is that . In that php i just saw the header which says ` — Yahoo, Jan 19 '13 at 18:45
@doniyor : Hmm.. but in my case I am on the same server and in same Dir too... what might be wrong ? — Yahoo, Jan 19 '13 at 18:55
I removed the Header but Still I am getting the Error. Its showing Canceled in the network debugger. — Yahoo, Jan 19 '13 at 18:59

score 1 · Accepted Answer · edited Jan 20 '13 at 08:49

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>

edited Jan 20 '13 at 08:49

Bergi

630,263
148
957
1,375

answered Jan 19 '13 at 18:22

robrich

13,017
7
36
63

@Robrich- But since i have 10-12 forms... If i do `$(form).submit() ` all of the form elements will be submitted. Any alternative ? – Yahoo Jan 19 '13 at 18:41
`$("#formid").submit()` will attach the submit only to this one form. – robrich Jan 19 '13 at 18:44
But the page will reload right. I wanted the ajax thing for avoiding the page reload. – Yahoo Jan 19 '13 at 19:04
As long as you `return false` at the end of the function (or `e.preventDefault()`), it won't do the default behavior -- in this case submit the form. You're likely already doing that for the button click and link click to avoid them doing interesting things. – robrich Jan 19 '13 at 19:09
Could you please give me and example how could I impliment it ? Well i just want that out of the 10 form that I have the one which I click that is submitted in the database with ought reloading the page. – Yahoo Jan 19 '13 at 19:40

Bergi · Answer 2 · 2013-01-20T08:47:25.523

0

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.

edited Jan 20 '13 at 08:47

answered Jan 19 '13 at 19:07

Bergi

630,263
148
957
1,375

The Ajax is being loaded on `$(document).ready(function() {` so .. and moreover the ` alert ($(this).parent().serialize());` is giving me the proper parameters to pass. I am bit confused. well what should I do to pass the paraments of the form to the Php file. which is the easiest method ' – Yahoo Jan 19 '13 at 19:31
Could you please give me and example how could I impliment it ? Well i just want that out of the 10 form that I have the one which I click that is submitted in the database with ought reloading the page ? – Yahoo Jan 19 '13 at 19:40
@robrich : Thank you so much :) I spent 10 hours to fix this. I am accepting your answer. But how did `e.preventDefault(); return false;` make the difference? – Yahoo Jan 19 '13 at 21:26
1

Apologies, I edited the wrong post when I added my example. That'll learn me to answer a question quickly when I've got one foot out the door. – robrich Jan 20 '13 at 00:03

Ajax is giving me an error when I send data

2 Answers2