如何将 javascript 变量传递给 PHP

Question

我正在创建一个动态表单，其中包含一个名为“添加更多行”的按钮，当单击此按钮时，一个 JavaScript 函数会创建一个具有适当 ID 的新文本框行。

问题是，我如何将一个计数器变量从我的 JavaScript 函数传递到我的下一个 php 页面，以便它现在知道要接收多少行文本框 $_POST。

我有我的 JavaScript 函数，但是我从它自己创建的行中丢失了数据。

有什么想法吗？

谢谢

这是我的js函数

window.onload=function()
{

inp=document.getElementsByTagName('input');
for(c=0;c<inp.length;c++) 
    {
        if(inp[c].value=='add') 
        {
           inp[c].onclick=function() 
            {
                n=15;

               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='time'+n;
               document.getElementById('txtara').appendChild(x)
               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='event'+n;
               document.getElementById('txtara').appendChild(x)
               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='supplies'+n;
               document.getElementById('txtara').appendChild(x)

            var sel = document.createElement('select');



        y = document.createElement('option');
        y.value = 'Yes';
        y.name = 'success' + n;
        y.innerHTML = y.value;

        x = document.createElement('option');
        x.value = 'No';
        x.name = 'success' + n;
        x.innerHTML = x.value;


        sel.appendChild(y);
        sel.appendChild(x);


        document.getElementById('txtara').appendChild(sel);
        document.getElementById('txtara').appendChild(sel);
        document.getElementById('txtara').appendChild(sel);


               x=document.createElement('input');
               x.setAttribute('rows',1);
               x.setAttribute('cols',20);
               x.name='comment'+n;
               document.getElementById('txtara').appendChild(x)

               document.getElementById ('txtara').innerHTML += '<br>';


        n++;

           }
         }

    }
    //-->
}

Answer 1

您可以为表单元素添加 name 属性。由于您的表单包含多个元素（并且您不知道有多少元素），因此此 name 属性必须采用“my_name[]”形式。 [] 字符表示元素的集合。因此，您的 HTML 代码可能如下所示：

<form method="POST" action="mypage.php">
    <input type="text" name="whatever[]" value="first" />
    <input type="text" name="whatever[]" value="second" />
    <input type="text" name="whatever[]" value="third" />
    <input type="submit" />
</form>

然后，当提交表单时，您可以使用 PHP 变量 $_POST['whatever'] 获取值。这个变量是一个数组，包含所有“whatever”输入的值，如下所示：

$myValues = $_POST['whatever'];
// $myValues = array( 0 => "first", 1 => "second", 2 => "third" );

然后，如果您想对每一行执行一些操作，请执行一个 for each 循环。如果你想知道提交了多少行，你可以简单地计算一下。

Answer 2

你不需要。 POST 将毫无问题地为您携带行数。只需执行count($_POST) 即可获取发布的值的数量。或者，如果您使用下面我建议的版本，请使用 count($_POST['time']) 获取时间值的数量。

var types = ['time', 'event', 'supplies'];
function createInput( i, n )
{
    var base = isNaN( i )? i: types[ i ];
    x=document.createElement('input');
    x.setAttribute('rows',1);
    x.setAttribute('cols',20);
    x.name= base + "[" + n + "]"; // this will make $_POST[<base>] an array with n as the index.
    document.getElementById('txtara').appendChild(x)
}
window.onload=function()
{
    inp=document.getElementsByTagName('input');
    for(c=0;c<inp.length;c++) 
    {
        if(inp[c].value=='add') 
        {
            var n = 15; // move n out here. Otherwise n will always = 15.
            inp[c].onclick=function() 
            {

                for( var i = 0; i < types.length; i++ )
                {
                    // passing both variables in will avoid any possible collisions.
                    createInput( i, n ); 
                }

                var sel = document.createElement('select');
                sel.name = 'success[' + n + ']';
                y = document.createElement('option');
                // option has no name attribute (http://www.w3schools.com/tags/tag_option.asp)
                y.value = 'Yes';
                y.innerHTML = y.value;

                x = document.createElement('option');
                x.value = 'No';
                x.innerHTML = x.value;

                sel.appendChild(y);
                sel.appendChild(x);

                // you had this three times... why?
                document.getElementById('txtara').appendChild(sel);

                createInput( 'comment', n );

                document.getElementById ('txtara').innerHTML += '<br>';
                n++;

           }
         }

    }
}

Answer 3

假设您想要数字来简化您在服务器端获取数据的方式。

有一种非常简单的方法。

假设您要处理许多相同逻辑数据类型的输入，例如： <input type="text" name="names" value=""> 你可以动态创建更多。

当然，您希望他们以单独的名字来获取数据，所以您喜欢： <input type="text" name="names[]" value=""> 或者，如果您对一个实体有更多输入，请使其保持一致：<input type="text" name="names[1]" value=""><input type="text" name="eye_colours[1]" value="">，因此您可以在括号中添加一个数字。

你在 PHP 端做什么？

if( isset($_POST['names']))
    foreach($_POST['names'] as $key => $val){ ... }

PHP 将其解析为数组，万岁！ :)

Answer 4

您可以使用 PHP 来输出 javascript 代码。如果你有一个值，你可以直接在 javascript 中输出，或者如果你有一个更复杂的值，你可以使用 json_encode 对其进行编码。

Answer 5

由于 javascript 是一种客户端语言，这是不可能的 :( 但是，您可以使用 AJAX 通过 GET 或 POST 将本地 javascript var 发送到服务器

Answer 6

您应该在表单中添加<input type="hidden" name="num_rows" value="0">，并在提交表单时将其值更新为行数。