jQuery force form POST
Hi
I have dynamically generated page with multiple forms on. When a form is submitted I wish to show a simple success / fail message within the form wrapper.
If I disable the javascript the form is received by the back end PHP via $_POST but with the javascript enabled it's received via $_GET!
How do I force the jQuery to 'post' the form?
SubmitForm.php
I have dynamically generated page with multiple forms on. When a form is submitted I wish to show a simple success / fail message within the form wrapper.
If I disable the javascript the form is received by the back end PHP via $_POST but with the javascript enabled it's received via $_GET!
How do I force the jQuery to 'post' the form?
<!doctype html>
<html>
<head>
<title>Test form</title>
<link rel="stylesheet" href="/jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
<script>
$(document).on("submit","form", function(evt){
evt.preventDefault() ; // stop the form submitting
// alert($(this).attr("action") + " " + $(this).serialize() )
//Find the forms wrapper get the form's action submit it & load the responce into the forms wrapper
$(this).closest(".FormWrap").load($(this).attr("action") + "?" + $(this).serialize() )
})
</script>
<style type="text/css">
body {
font-family:Arial;
font-size:12px;
background:#ededed;
}
#PageWrap{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div id="PageWrap">
<header><img src="/images/Banner.jpg" > </header>
<div class="FormWrap">
<fieldset>
<legend>My Form
<legend>
<form id="MyFrm_1"class="form" action="SubmitForm.php" method="post">
<label for="user_1" >Name</label><input id="user_1" type="text" name="user"value ="Holly">
<label for="age_1" >Age</label><input type="text" id="age_1" name="age" value ="23">
<input type="submit" name="submit" value="submit" />
</form>
</fieldset>
</div>
</div>
</body>
</html>
SubmitForm.php
<?php
if(isset($_POST['Name'])){
echo "post Name " . $_POST['Name'];
}
elseif(isset($_GET['Name'])){
echo "GET Name " . $_GET['Name'];
}
else{
echo "Wot no form";
}
Full Stack Developer
jQuery.load() (only does GET unless you pass it an object for data, then POST)
Using, jQuery.ajax(), you can make it POST
Using, jQuery.ajax(), you can make it POST
$.ajax({
'url': 'postTo.php',
'type': 'POST',
'data': $('#yourFormId').serialize(),
'success': function(result){
//process here
}
});
Here's the entire "hello world" example using jQuery and PHP. It shows how to do the request and response into the same page.
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html
@Julian
That worked thanx
Can you tell me why you use different 'this'
That worked thanx
Can you tell me why you use different 'this'
url: this.action,
data: $(this).serialize(),
Can you tell me why you use different 'this'Good question!
The $.ajax() call is a jQuery function. When you select elements using jQuery Ex $('form') what you are doing is calling a jQuery function $() and passing it a string or object that is used to find the element or elements you are wanting to target. jQuery finds those elements and wraps them in a jQuery object making the jQuery library accessible on the return from that function.
From that object to get to an attribute one needs to use the .attr() method. To get the action attribute using jQuery we would have to do this
$(this).attr('action');
EDIT
In the second this
$(this).serialize()