javascript - 使用 PHP 和 JavaScript 创建包含用户定义字段的表单

Question

我正在开发一个 WordPress 插件来供自己娱乐，但目前我只专注于一项特定的功能。本质上，我希望用户能够向表单添加字段，然后让我的 PHP 脚本稍后处理这些用户值。另外，如果之前保存的字段有预先存在的值，我希望这些值显示在已填写的表单上。到目前为止，我拥有的是一个具有可以添加/删除字段(通过 JavaScript)的表单，并且在 HTML 中定义表单所需的标记:

<div class="si-form-container">
    <form method="POST" id="si-form">

        <div class="si-editable-row">

            <div class="si-field">
                <label for="label_1">Info label (eg. Department Name)</label>
                <input type="text" name="label_1">
            </div>

            <div class="si-field">
                <label for="value_1">Info value (eg. Music)</label>
                <input type="text" name="value_1">
            </div>
        </div>
    </form>

    <button id="si-add-field">Add Field</button>
    <input type="submit" value="Save" id="si-save-fields"></input>
</div>

JavaScript 基本上只是添加一个新的“div class="si-editable-row”以及子元素类等。如何将用户提交的信息传递给我的 PHP？

Answer 1

向包含要处理发布数据的 PHP 脚本的表单元素添加一个 action 属性。您需要将submit按钮移动到表单标记内。

<div class="si-form-container">
<form method="POST" action='processFormScript.php' id="si-form">

    <div class="si-editable-row">

        <div class="si-field">
            <label for="label_1">Info label (eg. Department Name)</label>
            <input type="text" name="label_1">
        </div>

        <div class="si-field">
            <label for="value_1">Info value (eg. Music)</label>
            <input type="text" name="value_1">
        </div>
    </div>

   <input type="submit" value="Save" id="si-save-fields"></input>
</form>

<button id="si-add-field">Add Field</button>

</div>

我已将 processFormScript.php 作为示例 PHP 脚本放入 action 属性中，但您需要输入您自己创建的 PHP 脚本的文件名.