Jquery and Ajax not POSTing data to or loading PHP page

Question

Full disclaimer, I have a limited knowledge of JavaScrip, JQuery, Ajax and PHP and I have been struggling to fix my issue since mid March. I am trying to format some data into an array, using JavaScript, and then post it to a PHP page (which must open and display some HTML) using Ajax.

I have tried almost every variation I can think of for the following code:

(This code is in a <script> tag below the Form in the HTML Document and script tags in the header include the Ajax and JavaScript src references)

$("#dataForm").submit(function(event){

console.log("Submit started");
var test = $("#title").val();
var serData = 'test1='+test;
//event.preventDefault();

//POST to PHP
$.ajax({
    method: "POST",
    url: "summary.php",
    data: {serData: serData},
    success: function(response){
        console.log("Success!");
    },
error: function(xhr, ajaxOptions, thrownError){
    console.log("Didn't work!");
}
    });
//event.preventDefault();
});

But this does not even POST the data and instead shows all of the data in the URL area - nor does it load the PHP page. I cannot find any references to explain how this should be done.

I did find this window.location = "summary.php" - however, it only loads the PHP page and none of the data is POSTed.

Here is my HTML:

<form id="dataForm">
    <strong>Title:</strong>
    <input type="text" name="title">

    <input type="submit" name="sub_button" value="Submit">
</form>

And PHP (summary.php):

if (isset($_POST['serData'])){
    echo "Data POSTed: ";
    echo $_POST["test1"];
    $test1 = $_POST["test1"];
}
//assume there is some simple HTML code here
<html>
<p>{$test1}</p>
</html>

The console logs "Success!" each time, but I am having no such success.

So to summarize - for testing purposes I would just like to POST this test1 variable and retrieve it on the PHP side, then display the PHP HTML page.

From there on, I would like to know the best way to POST a JavaScript array to PHP (thinking JSON here) and whether it is best to add this array onto the end of ("#dataForm").serialize() (eg. ("#dataForm").serialize() +"&array") OR to POST it separately (if that is indeed possible).

Happy to provide more code if need be! Cheers

Edit1:

My data now looks like data: { serData: true, test1: $('input[name="title"]').val() }

When I hit the submit button the data no longer shows in the URL! This is good! But the PHP page still doesnt open! Am I missing something here?

Also, I think you want `data: { serData: true, test1: $('input[name="title"]').val() }`. You don't appear to be doing anything with `response` either — Phil, Apr 04 '19 at 06:00
Hey Phil! Adding `preventDefault` doesn't make any difference, but you are correct it should be there. I think I commented it out for testing. I'll give that bit of code a try when I get back home. Could you please explain why it is written like that? Cheers! — Liam G, Apr 04 '19 at 06:38
I don't believe this is a duplicate either. I have looked at all of those posts before I asked this question. None of them solved my problem. I also have used JSON decode but did not include it in my post as it was evident that the data is not evening getting to the PHP side. — Liam G, Apr 04 '19 at 06:41
Fix up your `data`. As it is now, you are not sending a `test1` parameter. See my second comment — Phil, Apr 04 '19 at 07:19
Really not sure what you mean by _"the PHP page doesn't open"_ but I think you should check out the last link in the duplicate list at the top of your question — Phil, Apr 04 '19 at 10:46
When I add an action to the form header ie. `action="summary.php"` the PHP page opens and displays a "thank you" page with some HTML, I want to do the same thing here, I just need to process some form data using Jquery because it is not automatically POSTed when I add `method="POST"`. Most of the data is POSTed except for a specific set of `divs` that are dynamically added - hence the need for Jquery. How do I achieve this? — Liam G, Apr 05 '19 at 00:30
Dynamically add `` elements to the form and let it submit normally — Phil, Apr 05 '19 at 00:58
If I make them hidden then I can't enter text into them? I have a div that holds a set of dynamically added divs (with text inputs), which hold another set of dynamically added divs (with some more text inputs). — Liam G, Apr 05 '19 at 01:24
If you're dynamically adding text inputs, just make them part of the `
` to be included. This is really straying quite far from what's in your question. — Phil, Apr 05 '19 at 01:26
They are part of the form. My question is how to I process data in JavaScript and then open a PHP page after POSTing the data to it. — Liam G, Apr 05 '19 at 01:37
And I told you exactly how to do that. On submit, add dynamic hidden inputs with the names and values you actually want, then allow the form to submit naturally (ie, don't call `event.preventDefault()`) — Phil, Apr 05 '19 at 01:38
I've added a new duplicate to the top of your question. I think it will help — Phil, Apr 05 '19 at 01:45
Ohhhhhh.. I didn't realise that's what you meant. I'll give that a try, thanks! — Liam G, Apr 05 '19 at 01:45
Thanks Phil, you've solved my month long problem! Should I delete this post? — Liam G, Apr 05 '19 at 12:06

Jquery and Ajax not POSTing data to or loading PHP page

0 Answers0