jquery ajax submit form to php -
jquery ajax submit form to php -
i've started trying larn jquery need help.
i've got form i'm trying submit, should simple messing me up. i'm using chrome's console see whats going on, , functions.php doesn't requested. instead of post request, request appearing in console.
i've included jquery in file's head.
cold explain me i'm doing wrong here? i've tried several other examples i've found on forums here without success.
html:
<form name="mypage_form" id="mypage_form"> <input id="mypage_location" type="text" size="50" placeholder="enter 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); } }); } });
if using jquery, why using document.get*
functions. seek this:
$('#mypage_form').submit(function (e) { { e.preventdefault(); // < -- 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, utilize .serializearray
function (api doc):
$('#mypage_form').submit(function (e) { { e.preventdefault(); // < -- stop form submission var info = $(this).serializearray(); $.ajax({ url: 'functions.php', data: data, type: 'post', success: function (data) { $('#response-div').append(data); } }); } });
jquery ajax
Comments
Post a Comment