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

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

Answer 2

假设您希望使用该数字来简化在服务器端获取数据的方式。

有一种非常简单的方法可以做到这一点。

假设您有许多想要处理的逻辑数据类型的输入，例如： <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 3

您可以在表单元素中添加名称属性。由于表单包含多个元素（并且您不知道有多少元素），因此 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']获取值。这个变量是一个数组，包含“any”输入的所有值，如下所示：

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

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

Answer 4

由于javascript是客户端语言，这是不可能的:( 但是，您可以使用AJAX通过GET或POST

将本地javascript var发送到服务器

Answer 5

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

Answer 6

你不需要。 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++;

           }
         }

    }
}

如何将javascript变量传递给PHP

6 个答案: