在里面输入新文本后更新文本区域内容的值

Question

我想向页面添加一个文本区域，我可以通过在该文本区域中键入来添加新文本并将其保存在服务器上（不仅仅是 cookie）。 页面将被复制多次，具有不同的上下文，例如名称和其他内容。我想在每一页上分别更改 textarea 并且不要在每一页上覆盖它。

到目前为止我的文本区域代码：

    <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>

到目前为止，addText() 函数的草稿看起来像这样：

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

每个页面上都有唯一的名称。我可以用它来区分 textarea 上下文吗？到目前为止，我也无法在服务器上保存我的新值，当我刷新页面时，我再次看到一个占位符而不是一个新值。

Answer 1

如果您花两个小时看完这个（免费）视频系列，您将成为专业人士。

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

用于从 textarea 读取：

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);
    }
});

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';

---

这里有一些关于 AJAX 基础知识的好文章：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

---

请注意，对于 AJAX，您不需要使用 <form> 架构 - 但如果这样做，您必须取消 submit 按钮的默认操作 (因为它将导航到不同的页面，这就是 AJAX 所要防止的）。因此：

$('#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();
});