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

时间:2013-11-26 06:20:05

标签: javascript php jquery

长时间读者,第一次海报。我正在使用一个表单,该表单使用选择框来创建用户需要的文本框数量。 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>

2 个答案:

答案 0 :(得分:0)

确保输入包装在表单标记中并使用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);

答案 1 :(得分:0)

尝试:

<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"]; ?>