Not sure what I am looking for

Ok, I will try this this weekend. I’m not at the same place as my code right now…

I had a chance to try it now. But it didn’t work.
Well, nothing happens when I click the SAVE button.

I placed your code after some of the other code. Like this:

    <script>
      $(document).ready(function() {
        $("#header").keyup(function(){
          $("#headerPreview").text($(this).val());
        });
        $("#content").keyup(function(){
          $("#contentPreview").text($(this).val());
        });
        $("#footer").keyup(function(){
          $("#footerPreview").text($(this).val());
        });
      });
    </script>
    
<button id="save">Save!</button>

<script>
$("#save").on("click", function(){
  var headerText = $("#header").text(), 
      contentText = $("#content").text(), 
      footerText = $("#footer").text();  

  $.ajax({
    type: "POST",
    url: "myScript.php",
    data: 'header=' + headerText + '&content=' + contentText + '&footer=' + footerText ,
    success: function(res) {
      console.log(res);
   }
  });
});
   </script>

So you entered something into all of the text areas, but when you press the “Save” button, nothing is logged to the console?

Well, when entering something, there is no reaction of the button. It’s just dead.

Here is a test page.
http://coverman.se/test.html

Hi,

Thanks for making a test page - very helpful.

You need to learn how to use the console.
Here’s a brief tutorial on how to do that.

It says:

POST http://coverman.se/myScript.php 404 (Not Found) 

Which means that your AJAX call is not finding your PHP script.

Sorry for the short reply, but the web app I am currently working on, has just exploded into a million pieces :frowning:

Does anyone know how to make this work? Just to save the text that is written into three different strings.

Hi,

So did you fix the issue with your AJAX script not being able to find the PHP script?

Oh, sorry I didn’t see your previous post. My page wasn’t updated. I will look at it now.

Very strange. Maybe it was case sensitive? Now I made it lower case. so the link is called myscript.php and IT IS on the server.
If you test this link, it’s there. Right? http://www.coverman.se/myscript.php

Ok, progress.
If you look at the console now however, you’ll see:

XMLHttpRequest cannot load http://www.coverman.se/myscript.php. Origin http://coverman.se is not allowed by Access-Control-Allow-Origin.

Could you ammend this:

url: "http://www.coverman.se/myscript.php"

to this:

url: "myscript.php"

Changed that now.

Good. Now the AJAX script is talking to the PHP script.

Unfortunately, it is not returning us any values.

Can you post the contents of myscript.php?

This is my script.php

<?php
  $header = $_POST['header'];
  $content = $_POST['content'];
  $footer = $_POST['footer'];

  echo "You submitted: " . $header . ", " . $content . ", " . $footer;
?>

Ok, that’s weird.
Give me a while and I’ll set everything up on my local machine, so we are both able to run the same code.

Ok, found the problem - simple really.

Change:

var headerText = $("#header").text(), 
    contentText = $("#content").text(), 
    footerText = $("#footer").text();  

To:

var headerText = $("#header").val(), 
    contentText = $("#content").val(), 
    footerText = $("#footer").val();  

And things should work as expected.

No, it’s not working. I changed it to this:

<button id="save">Save!</button>
   <script>
$("#save").on("click", function(){  
var headerText = $("#header").val(), 
    contentText = $("#content").val(), 
    footerText = $("#footer").val(); 

  $.ajax({
    type: "POST",
    url: "myscript.php",
    data: 'header=' + headerText + '&content=' + contentText + '&footer=' + footerText ,
    success: function(res) {
      console.log(res);
   }
  });
});
   </script>

No, it is working!

You are now submitting the three values to your PHP script and it successfully echos them back to you.

Please look at the tutorial I linked to previously, so that you know how to view the output of console.log(res).

Obviously, having your PHP script simply spit the values back at you, is not very useful, so you should modify it to have the values inserted into the db instead.

But is the code on my test page working for you?
http://coverman.se/test.html

It’s not working for me. The my script.php is just echoing empty.
It says: You submitted: , ,

And the save button isn’t taking me there. I have to write the myscript.php url manually after clicking save. So I guess it’s not working.
Can you try my test page again and see if that one is working for you.

Yes, it’s doing exactly what it should.

I fear you’re missing the point of AJAX.
It’s asynchronous, so you never leave the original page.
The save button should not take you there.

Of course, if you access the PHP script directly you will see "You submitted: , , "
The output is being logged to the console.
You should really read the tutorial I linked to previously.