Ajax Error, get request param appending in same link

Question

I don't know why ajax instead of sending request to specified url, it makes request to the same link. Only this ajax request in the whole page is acting weird. Please give me some light over this issue

       $(document).ready(function(){
          $("#phoneForm").submit(function(){
     $.ajax({
             type: "POST",
             url: "http://example.com/chat.pl",
             data: $('form#phoneForm').serialize(),
             success: function(data)
            {   
            if(data==="1")
            {
             $('#phoneResult').html('Thank you');//hide button and show thank you
             $('#phone_modal').modal('toggle');
            }
             },
                       error: function(){
                        alert("failure");
                   }
       });
      });
     });

Form content:

      <form class='horizontal' id='phoneForm' name='phoneForm' accept-charset='utf-8'>
    <input type='text' pattern='\\d*' id='phoneNumber' name='number'/>
        <button class='btn btn-dark' type='submit'>submit</button>  
</form>

Edited:

I added the ajax error function. Its giving the alert before ajax submission and give request to the same page

what kind of data u getting response from your server?json or text or html? — kamesh, Feb 28 '14 at 11:43
Html response.Header is added and just the digit 1 from server if the process succeeds. — gzix, Feb 28 '14 at 11:50
one more big boubt actually example.com is that your own server path or other site path? — kamesh, Feb 28 '14 at 11:54
just for example i have given.. i have given my own server path. — gzix, Feb 28 '14 at 11:55
Try setting a relative path in the url field, instead of a full path. Something like /controller/action for MVC or whatever else you use. — valentin, Feb 28 '14 at 13:22

score 1 · Accepted Answer · answered Feb 28 '14 at 13:41

1

If I understand correctly, you want to submit your form asynchronously?

Try with an event.PreventDefault() like this:

$("#phoneForm").submit(function (event) {
    $.ajax({
        type: "POST",
        url: "http://example.com/chat.pl",
        data: $('form#phoneForm').serialize(),
        success: function (data) {
            if (data === "1") {
                $('#phoneResult').html('Thank you');//hide button and show thank you
                $('#phone_modal').modal('toggle');
            }
        },
        error: function () {
            alert("failure");
        }
    });
    event.preventDefault();
});

answered Feb 28 '14 at 13:41

valentin

667
2
12
19

Hi i used return false and thought of answering my own answer yesterday. But i don't know how it is working. Please explain why its not working without event.preventDefault() or return false. – gzix Mar 01 '14 at 05:58
1

Sorry for taking so long to answer. It's because your submit handler (the function (event)) doesn't _replace_ the submit event by default, it only allows you to execute additional code before it's triggered. The preventDefault or return false simply cancels that trigger. Also, see [this](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) for a difference between preventDefault and return false. – valentin Mar 03 '14 at 09:26

score 0 · Answer 2 · answered Feb 28 '14 at 11:48

0

Try to add

method="POST"

into the

<form class='horizontal' id='phoneForm' name='phoneForm' method="POST" accept-charset='utf-8'>

answered Feb 28 '14 at 11:48

madushak

250
1
5

Its again giving post request to the same url – gzix Feb 28 '14 at 11:53

Ajax Error, get request param appending in same link

2 Answers2