get html form info and push to PHP using ajax

Question

I am struggling with this ajax get POST. I have tried various methods of grabbing user info and sending it to a fake server (my php file) including

serializing the form data,

adding action="reserveA.php" and method="post" to the form declaration,

and having the data in the ajax equal to the form input id.val()

I am sure I am messing up somewhere else and although I have a php page that I am referencing to, I don't have anything on the page because I don't know what to put on it.

HTML Form

<form  id="thisform" action="reserveA.php" method="post">
    <fieldset>
      <legend>Place a Reservation</legend>
      <label for="firstName">First name: </label>
      <input id="firstName" type="text" placeholder="first name" autofocus="autofocus"
        required="true" /><br/><br/>

ending with

<input id="submit" type="submit" value="Submit"/>

JS

$(document).ready(function() {            
    var submit = document.getElementById("submit");
    var firstName = $("#firstName").val();
    var LastName = $("#LastName").val();
    var Phone = $("#Phone").val();
    var Party = $("#Party").val();
    var dateof = $("#dateof").val();
    var Timeof = $("#Timeof").val();

    submit.onclick = function(){         
        $.ajax({
            url: "reserveA.html",
            dataType: "json",
            data: $("thisform").serialize(),
            type: "POST",
            success: function() {
                console.log("oh")
                alert("form submitted");
            },
        });

    }
}

then my reserveA.php is blank.

Not entirly sure what you mean. But usually when you collect the data on the form the php file will do the insertions and insert into the database. The database information would also be needed somewhere. Some of the syntax on this site might be outdated but it seems to be similar to what you are asking. http://www.formget.com/form-submission-using-ajax-php-and-javascript/ — Phreak, May 10 '16 at 21:16
I also prefer to use `onsubmit` on the from event instead of `onclick` on the submit button. That way, you can submit the form by pressing "Enter". Make sure you `event.preventDefault()` to prevent regular submission — NicolasMoise, May 10 '16 at 21:21
you should use `name` attribute on the `input`, that is the key that will be used on `serialize` (or when you do a normal submit) — Pevara, May 10 '16 at 21:22
i changed the ajax url to reserveA.php and nothing changes. my php file is blank because I don't know what to put in it, and when i click submit it changes the page to the blank php file, im assuming because the action for the form is the php destination? — , May 10 '16 at 21:22

score 0 · Answer 1 · edited May 23 '17 at 11:52

You have a few mistakes but basically your AJAX call should look like this:

$.ajax({
    url: $("#thisform").attr('action'),
    dataType: "json",
    data: $("#thisform").serialize(),
    type: $("#thisform").attr('method'),
    success: function() {
        console.log("oh")
        alert("form submitted");
    },
});

If you want to learn more then check out these posts:

PHP+AJAX

Debugging AJAX

get html form info and push to PHP using ajax

1 Answers1