How to permanently change website content based on user input (in HTML)?

Question

So I am making a website (in HTML) where the user can permanently add text to the content of the website. So if someone vists the website after that, he sees the modified content.The modification should be permanent and should not disappear after reload. For this I used the following code :

        <form id="myform" method="POST" action="">
            <input type="text" name="textbox" value="">
            <input type="button" name="button1" value="SUBMIT" onclick="func()">
        </form>
        <br>
        <p id="Test"></p>
        <script>
            function func()
            {
                var x=document.getElementById("myform");
                var text=x.elements[0].value;
                document.getElementById("Test").innerHTML+=text;
            }
        </script>

But the changes are made only on the client side and are not made on the website. So how can I change the source code of the website based on user Input so the changes are made permanently.In this case, how can the change made to <p id="Test"></p> remain permanent as it returns to its default value after page reload. Many Thanks !

Answer 1

This process containing two steps to perform.

1. You have performed ,collected user input from client.
2. You will have to send this data to Your server and server will than saved this data on your database , then your html page get updated data from server and user will see that modified content.

For Sending data to server you have to use ajax post request to send data to server like that

request = $.ajax({
    url: "Your server url",
    type: "post",
    data: data
});

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
    // Log a message to the console
    console.log("Hooray, it worked!");
});

then server will received it and data saved to database.