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

Question

I'm working on a WordPress plugin for my own amusement, and I'm currently stuck on one particular piece of functionality. Essentially, I want the user to be able to add fields to a form, and then for those user values to be later handled by my PHP script. Also, if there are pre-existing values for fields saved earlier, I want those to display on the form already filled in. What I have so far is a form that has fields that can be added/removed (via JavaScript), and the necessary markup to define my form in the 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>

The JavaScript basically just adds a new "div class="si-editable-row" along with the child elements classes and so on. How do I pass the information submitted by the user to my PHP?

Answer 1

Add an action attribute to the form element holding the PHP script you want to handle the posted data. You'll need to move the submit button inside the form tags.

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

I've put processFormScript.php as an example PHP script in the action attribute, but you'll need to put the file name of your own created PHP script.