Question

Hi I want to send data to the server and then have the php file save it.
But currently I can’t get even a simple POST to work.

This is the javascript and html part:
This function is declared in the head:

function sendTableToServer(){
    var xhttp;
    if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
    } else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhttp.open("POST","http://music.collwyncraig.info/hajimama/save_setlist.php",true);
    xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhttp.send("fsong=AbandonSeoul");
}

Then this html is in the body:

<button type="button" onclick="sendTableToServer()">Save Setlist</button>

This is the php file

<?php
if (isset($_POST["fsong"])){
    echo 'trying';
    $song = $_POST["fsong"]; 
    echo $song;
    echo 'ok';
}
?>

When I click the button, nothing happens.
If I use a <form> and a submit button, the php file is loaded by the browser, and I can access the input. However, I want to use a function like this because the information I want to send is going to be taken out of the html page using javascript and HTML DOM.
So, why doesn’t anything happen? 🙂

Answer 1

If you want the same behavior as a form except you want to get data from the page, just create a form and submit it:

var form = document.createElement('form');
form.action = 'http://www.example.com/do-something';
form.method = 'post';
var song = document.createElement('input');
song.type = 'hidden';
song.name = 'song';
song.value = 'Song Name';
form.appendChild(song);
form.submit();