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?

<!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>

Open in new window


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

Open in new window

LVL 1
trevor1940Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Banshi lal dangiFull Stack DeveloperCommented:
jQuery.load() (only does GET unless you pass it an object for data, then POST)

Using, jQuery.ajax(), you can make it POST

$.ajax({
    'url': 'postTo.php',
    'type': 'POST',
    'data': $('#yourFormId').serialize(),
    'success': function(result){
         //process here
    }
});

Open in new window

Julian HansenCommented: 
$(this).closest(".FormWrap").load($(this).attr("action") + "?" + $(this).serialize() )

Open in new window

This is a GET - you want to use
$.post
OR
var target = $(this).closest('.FormWrap');
$.ajax({
   url: this.action,
   data: $(this).serialize(),
   type: 'POST'
}).done(function(resp) {
   target.html(resp);
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
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
Ensure Business Longevity with As-A-Service

Using the as-a-service approach for your business model allows you to grow your revenue stream with new practice areas, without forcing you to part ways with existing clients just because they don’t fit the mold of your new service offerings.

Download eBook
trevor1940Author Commented:
@Julian
That worked thanx
Can you tell me why you use different 'this'

   url: this.action,
   data: $(this).serialize(),

Open in new window

Julian HansenCommented:
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');

Open in new window

But ... in the event handler this refers to the DOM Node - not a jQuery wrapped DOM Node - so you have access to all the default methods and properties you would in normal JavaScript. In normal JavaScript you can get the action as a property on the form element - so it makes no sense to go wrapping the this in a jQuery object to get access to the action attribute when it is natively available on the this in the event handler.
EDIT
In the second this
$(this).serialize()

Open in new window

We are accessing a jQuery function - so we have to wrap the form element in a jQuery object to be able to use that function.
trevor1940Author Commented:
Thank you for solution and additional explanation
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.