将数据从Javascript生成的文本框传递到PHP

Passing Data From Javascript-Generated Textboxes to PHP

本文关键字:PHP 文本 数据 Javascript      更新时间:2023-10-19

长期读者,首次发布。我正在处理一个表单,该表单使用选择框来创建用户需要的文本框数量。Javascript似乎工作得很好,每个都创建了正确数量的文本框。我不知道如何将这些数量不等的文本框中的值返回到PHP中进行进一步处理。如果有任何建议,我将不胜感激。

这是我的JavaScript(存储为一个单独的文件,在页面开始时调用)。

                        function BuildFormFields($amount)
                        {
                    var
                $container = document.getElementById('FormFields'),
                $item, $field, $i;
                        $container.innerHTML = '';
                    for ($i = 0; $i < $amount; $i++) {
                $item = document.createElement('div');
                $item.style.margin = '3px';
                $field = document.createElement('span');
                $field.innerHTML = 'Name of Expert';
                $field.style.marginRight = '10px';
                $item.appendChild($field);
                $field = document.createElement('input');
                $field.name = 'name_expert[' + $i + ']';
                                    $field.type = 'text';
                                $item.appendChild($field);
                $field = document.createElement('span');
                $field.innerHTML = 'Title';
                $field.style.margin = '0px 10px';
                $item.appendChild($field);
                $field = document.createElement('input');
                $field.name = 'expert_title[' + $i + ']';
                $field.type = 'text';
                $item.appendChild($field);
                                    $field = document.createElement('span');
                $field.innerHTML = 'Organization';
                $field.style.margin = '0px 10px';
                $item.appendChild($field);
                $field = document.createElement('input');
                $field.name = 'organization[' + $i + ']';
                $field.type = 'text';
                $item.appendChild($field);
                $container.appendChild($item);
                    }
                        }

        function BuildFormFields2($amount2)
        {
        var
                $container2 = document.getElementById('FormFields2'),
                $item2, $field2, $i2;
            $container2.innerHTML = '';
            for ($i2 = 0; $i2 < $amount2; $i2++) {
                $item2 = document.createElement('div');
                $item2.style.margin = '3px';
                $field2 = document.createElement('span');
                $field2.innerHTML = 'Competency';
                $field2.style.marginRight = '10px';
                $item2.appendChild($field2);
                $field2 = document.createElement('input');
                $field2.name = 'competency[' + $i2 + ']';
                $field2.type = 'text';
                $item2.appendChild($field2);
                $field2 = document.createElement('span');
                $field2.innerHTML = 'Number of Skills';
                $field2.style.margin = '0px 10px';
                $item2.appendChild($field2);
                $field2 = document.createElement('input');
                $field2.name = 'num_skills[' + $i2 + ']';
                $field2.type = 'text';
                $item2.appendChild($field2);
                $container2.appendChild($item2);
                     }
                                     }
                    function BuildFormFields3($amount3)
        {
            var
                $container3 = document.getElementById('FormFields3'),
                $item3, $field3, $i3;
            $container3.innerHTML = '';
            for ($i3 = 0; $i3 < $amount3; $i3++) {
                $item3 = document.createElement('div');
                $item3.style.margin = '3px';
                $field3 = document.createElement('span');
                $field3.innerHTML = 'Position';
                $field3.style.marginRight = '10px';
                $item3.appendChild($field3);
                $field3 = document.createElement('input');
                $field3.name = 'position[' + $i3 + ']';
                $field3.type = 'text';
                $item3.appendChild($field3);

                $container3.appendChild($item3);
            }
                           }

这里有一个我目前用于选择框的"p"块的例子:

    <p><strong>Number of Experts that Participated: </strong><select  name="number_experts" onchange="BuildFormFields(parseInt(this.value, 10));">
    <option value=0>-- Skip for Now --</option>
    <?php 
    for ($range = 1; $range <= 10; $range++) 
    {
    echo '<option value=' . $range . '>' . $range . '</option>'; 
    }
    ?>
    </select>
    <div id="FormFields" style="margin: 20px 0px;"></div>
    </p>

确保您的输入被包装在表单标记中并使用FormData对象可能是最好的方法。

function sendDetails() {
    var fData = new FormData(document.getElementById('MyFormID'));
    $.post('/your/submission/url.php', fData, function (data) {
        // Your success script here
    });
}
$('someButton').bind('click', sendDetails);

尝试:

<p><strong>Number of Experts that Participated: </strong><select  name="number_experts" onchange="BuildFormFields(parseInt(this.value, 10));">
    <option value=0>-- Skip for Now --</option>
    <?php 
    for ($range = 1; $range <= 10; $range++) 
    {
    echo '<option value=' . $range . '>' . $range . '</option>'; 
    }
    ?>
    </select>
    <form action="action.php" method="post">
    <div id="FormFields" style="margin: 20px 0px;"></div>
    <input type="submit"/>
    </form>
    </p>

在action.php中,您可以使用类似的东西

<?php echo $_POST["thefieldnamefromyourhtml"]; ?>