Update value of textarea content after entered new text inside

Question

I want to add a textarea to page where I could add new text by typing inside that textarea and save it on server (not only cookies). Page will be replicate multiply times with different context distincted by e.g. name and other content. I want to change textarea separately on every page and do not overwrite it on every page.

My textarea code so far:

    <div id="descriptionDiv" style="float:right;">
       <form id="addDescription-form">
         <fieldset>
            <input type="textarea" id="descriptionTextboxID" name="descriptionTextbox" style="width:400px;height:75px" class="text ui-widget-content ui-corner-right" placeholder="Short description" ></input></p>
            <button type="submit" value="Submit" onClick="addText()">Save</button>
       </fieldset>
   </form>
</div>

And draft of addText() function looks like that so far:

function addText() {
     var descriptionContent = $("#descriptionTextboxID").val();
     $("#addDescription-form #descriptionTextboxID").val(descriptionContent); }

On every page will be unique name. Could I use it to distinct textarea context? So far I have problem to save my new value on server too, when I refresh page I see a placeholder again instead of a new value.

Answer 1

If you spend the two hours it takes to run through this (free) video series, you'll be a pro.

https://phpacademy.org/videos/php-and-mysql-with-mysqli

For reading from textarea:

var ta_content = $('#myTA').val();

For updating server:

$.ajax({
    type: 'post',
     url: 'your_php_processor_file.php',
    data: 'ta=' + ta_content,
    success: function(d){
        //anything the server echoes back will be in var " d ". So, for e.g.:
        if (d.length) alert(d);
    }
});

your_php_processor_file.php:

<?php
    $tarea = $_POST['ta'];

    //do your mysqli_ input here, using $tarea variable

    echo 'This goes back to the AJAX block';

---

Here are some good posts for getting the basics of AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

---

Note that, for AJAX, you don't need to use the <form> architecture - but if you do, you'll have to suppress the default action of the submit button (because it will navigate to a different page, which is what AJAX is all about preventing). Thus:

$('#addDescription-form').submit(function(e){
    var ta_content = $('#myTA').val();

    $.ajax({
        type: 'post',
         url: 'your_php_processor_file.php',
        data: 'ta=' + ta_content,
        success: function(d){
            //anything the server echoes back will be in var " d ". So, for e.g.:
            if (d.length) alert(d);
        }
    });

    //THIS PART:
    e.preventDefault();
});