jquery ajax submit form to php

Question

I've recently started trying to learn jquery but I need some help.

I've got a form that I'm trying to submit, should be simple but something is messing me up. I'm using chrome's console to see whats going on, and functions.php doesn't get requested. Also instead of a POST request, a GET request is appearing in the console.

I've included jquery in the file's head.

Cold someone explain to me what I'm doing wrong here? I've tried several other examples that I've found on the forums here without success.

html:

<form name="myPage_form" id="myPage_form">
    <input id="myPage_location" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />  
    <input type="text" id="myPage_city" name="myPage_city" />
    <input type="text" id="myPage_cityLat" name="myPage_cityLat" />
    <input type="text" id="myPage_cityLng" name="myPage_cityLng" />  
    <input type="text" id="myPage_type" name="myPage_type" value="selected"/> 
    <input type="submit" value="submit"/>
</form>
<div id="response-div">location is:</div>

jquery:

   $('#myPage_form').submit(function() {
 {
    myPage_city = document.getElementById('myPage_city');
    myPage_cityLat = document.getElementById('myPage_cityLat');
    myPage_cityLng = document.getElementById('myPage_cityLng');
    myPage_type = document.getElementById('myPage_type');

    $.ajax({ 
    url: 'functions.php',
    data: ({myPage_type:myPage_type,myPage_city:myPage_city,myPage_cityLat:myPage_cityLat,myPage_cityLng:myPage_cityLng}),
    type: 'post',
    success: function(data){
        $('#response-div').append(data);
    }
    });
}   
});

Apul Gupta · Accepted Answer · 2014-11-04 14:47:31Z

If you are using jQuery, why are you using document.get* functions. Try this:

$('#myPage_form').submit(function (e) {
     {
         e.preventDefault(); // < -- To stop form submission

         myPage_city    = $('#myPage_city').val();
         myPage_cityLat = $('#myPage_cityLat').val();
         myPage_cityLng = $('#myPage_cityLng').val();
         myPage_type    = $('#myPage_type').val();

         $.ajax({
             url: 'functions.php',
             data: ({
                 myPage_type: myPage_type,
                 myPage_city: myPage_city,
                 myPage_cityLat: myPage_cityLat,
                 myPage_cityLng: myPage_cityLng
             }),
             type: 'POST',
             success: function (data) {
                 $('#response-div').append(data);
             }
         });
     }
     });

Or, just use .serializeArray function (API Doc):

$('#myPage_form').submit(function (e) {
     {
         e.preventDefault(); // < -- To stop form submission

        var data = $(this).serializeArray();

         $.ajax({
             url: 'functions.php',
             data: data,
             type: 'POST',
             success: function (data) {
                 $('#response-div').append(data);
             }
         });
     }
     });

Aida.Mirabadi · Accepted Answer · 2014-11-04 15:59:16Z

1

$('input[type="submit"]').click(function(event) {
    event.preventDefault();

    myPage_city =$('#myPage_city').val();
    myPage_cityLat = $('#myPage_cityLat').val();
    myPage_cityLng = $('#myPage_cityLng').val();
    myPage_type = $('#myPage_type').val();

    $.ajax({ 
    url: 'functions.php',
    data:({myPage_type:myPage_type,myPage_city:myPage_city,myPage_cityLat:myPage_cityLat,myPage_cityLng:myPage_cityLng}),
    type: 'post',
    success: function(data){
        $('#response-div').append(data);
    }
    });  
});

edited Nov 4, 2014 at 15:59

answered Nov 4, 2014 at 15:00

Aida.Mirabadi

1,0564 gold badges13 silver badges28 bronze badges

Comments

Arron · Accepted Answer · 2014-11-04 14:45:31Z

0

Check this plugin, it is what I use for any type of ajax-form you can think of. You could do all the work manualy, but there is no reason for that.

ps. if you want to go jQuery, change

myPage_city = document.getElementById('myPage_city');

to

myPage_city = $('#myPage_city');

answered Nov 4, 2014 at 14:45

Arron

9166 silver badges15 bronze badges

Comments

Owen · Accepted Answer · 2014-11-04 15:17:42Z

Thanks for the lessons on jquery! I now know how to reference inputs properly and the event.preventDefault(). However "instead of a POST request, a GET request is appearing in the console" was the issue, function.php not being called was the issue. Thanks anyways

This solved my issue. Simply add an onlick method to the submit button and the following:

function getCity(){

        event.preventDefault();

         myPage_city    = $('#myPage_city').val();
         myPage_cityLat = $('#myPage_cityLat').val();
         myPage_cityLng = $('#myPage_cityLng').val();
         myPage_type    = $('#myPage_type').val();

    $.ajax({ 
    url: 'functions.php',
    data: ({myPage_type:myPage_type,myPage_city:myPage_city,myPage_cityLat:myPage_cityLat,myPage_cityLng:myPage_cityLng}),
    type: 'POST',
    success: function(data){
        $('#response-div').append(data);
    }
    });
}

Collectives™ on Stack Overflow

jquery ajax submit form to php

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related