Post form data to php through Ajax?

Question

I am trying to post data from a html form to a php page.

Below is the form:

<form onSubmit="return validEmail()" style="text-align:center; clear:both">        
        <input type="text" id="ms_firstName" name="ms_firstName" required placeholder="First Name" style="float:left;" >  
        <input type="text" id="ms_lastName" name="ms_lastName" required style="float:left; margin-left:20px;" placeholder="Last Name"> 
        <input type="email" id="ms_email" name="ms_email" required placeholder="Corporate Email address" pattern="^.*(\w+@barclays|\w+@barcap.com).*$" oninvalid="this.setCustomValidity('Please enter your corporate email')" style="float:left; margin-top: 10px;">
        <input type="password" id="ms_password" name="ms_password" required style="clear:right; margin-top: 10px; margin-left: 20px;" placeholder="Password" pattern=".{6,}">
        <input type="submit"  name="submit" style="alignment-adjust:central; margin-top:30px; clear:right;" ><br>    
     </form>

and here is the ajax:

  $.ajax({ 
        url: "/ms_form_handler.php",
        method:"POST",
        data: "{'ms_firstName':'" + ms_firstName+ "', 'ms_lastName':'" + ms_lastName+ "', 'ms_email':'" + ms_email+ "', 'ms_password':'" + ms_password+ "'}",
        success: function (){
            alert('form was submitted succesfully');
        }
             });

and below is the php picking up field names:

if($_POST && isset($_POST['submit'], $_POST['ms_firstName'], $_POST['ms_lastName'], $_POST['ms_email'], $_POST['ms_password']`)){}

Any help would be appreciated.

if you have the form why do you need ajax, for your page not to reload ? or ? — Marko Mackic, Jul 27 '16 at 16:01
Why do you code the data field manually? Why not simply submit the form via ajax, as shown in all examples? — arkascha, Jul 27 '16 at 16:02
[`serialize()`](https://api.jquery.com/serialize/) saves a bunch of hand coding. — Jay Blanchard, Jul 27 '16 at 16:15
Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server? — Jay Blanchard, Jul 27 '16 at 16:17

Yassin Senhaji · Answer 1 · 2016-07-28T10:19:09.893

0

You should start getting data from FORM by using this :

EDITED

ms_firstName = $('#ms_firstName').val();
ms_lastName = $('#ms_lastName').val();
ms_email = $('#ms_email').val();
ms_password = $('#ms_password').val();

And use this to send AJAX request :

$('form').submit(function(){
  $.ajax({ 
    url: "/ms_form_handler.php",
    method:"POST",
    data: "{ms_firstName: ms_firstName, ms_lastName: ms_lastName, ms_email: ms_email, ms_password: ms_password}",
    success: function (){
        alert('form was submitted succesfully');
    }
   });
});

edited Jul 28 '16 at 10:19

answered Jul 27 '16 at 16:06

Yassin Senhaji

77
11

You seem to have forgotten to get the value from the input objects; for example: `ms_firstName = $('#ms_firstName').val();` – Poiz Jul 27 '16 at 16:17
Since you have left the suggestion @Poiz do not edit the answer without allowing sufficient time for the OP to come along and edit it themselves. – Jay Blanchard Jul 27 '16 at 16:28

score 0 · Accepted Answer · edited Jul 27 '16 at 16:16

First, You were passing a string rather than an Object in your data Property. You could just modify your code like so:

THE HTML FORM::

    <form onSubmit="return validEmail()" style="text-align:center; clear:both">
        <input type="text"      id="ms_firstName"   name="ms_firstName" required placeholder="First Name" style="float:left;" >
        <input type="text"      id="ms_lastName"    name="ms_lastName" required style="float:left; margin-left:20px;" placeholder="Last Name">
        <input type="email"     id="ms_email"       name="ms_email" required placeholder="Corporate Email address" pattern="^.*(\w+@barclays|\w+@barcap.com).*$" oninvalid="this.setCustomValidity('Please enter your corporate email')" style="float:left; margin-top: 10px;">
        <input type="password"  id="ms_password"    name="ms_password" required style="clear:right; margin-top: 10px; margin-left: 20px;" placeholder="Password" pattern=".{6,}">
        <input type="submit"    name="submit" style="alignment-adjust:central; margin-top:30px; clear:right;" ><br>
    </form>

THE JQUERY CODE::

    <script type="text/javascript">
        var ms_firstName    = $("#ms_firstName").val();
        var ms_lastName     = $("#ms_lastName").val();
        var ms_email        = $("#ms_email").val();
        var ms_password     = $("#ms_password").val();
        $.ajax({
            url     : "/ms_form_handler.php",
            method  : "POST",
            data    : { // THE data PROPERTY IS EXPECTED TO BE AN OBJECT & YOU PASSED A STRING...
                ms_firstName    : ms_firstName,
                ms_lastName     : ms_lastName,
                ms_email        : ms_email,
                ms_password     : ms_password
            },

            success: function (){
                alert('form was submitted succesfully');
            }
        });
    </script>

Post form data to php through Ajax?

2 Answers2