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

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

Answer 2

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

Answer 3

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

Answer 4

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