div里面的形式没被“看见”

时间:2013-10-10 15:34:27

标签: javascript html forms

我的表单中有一个div,它基于上面的选择框的值填充了一个字段。这个字段在提交时总是以“null”的形式返回,我在表单的其他部分放置一个div来测试它是否实际上是div本身,并且每个字段周围的div都会以“null”的形式返回。

<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>

<!--This div below is called every time I want to add a new 'instance' of this form
this div works fine, its when i add a div inside that one I get 'null'-->

<div id="readnode" style="display: none">
    <select name="rank">
        <option disabled="disabled" selected="selected">Rating</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0">0</option>
    </select>   
    <select name="time">
        <option disabled="disabled" selected="selected">Time</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0">0</option>
    </select>
    <input type="button" value="X"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>

所以上面的代码很好用,当我在里面添加一个div时,我得到'null',如下所示;

<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>

<!--This div below is called every time I want to add a new 'instance' of this form
this div works fine, its when i add a div inside that one I get 'null'-->

<div id="readnode" style="display: none">
    <select name="rank">
        <option disabled="disabled" selected="selected">Rating</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0">0</option>
    </select>   
<div id='testdiv'>
    <select name="time">
        <option disabled="disabled" selected="selected">Time</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
        <option value="0">0</option>
    </select>
</div>
    <input type="button" value="X"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>

我最好的办法是什么?我将如何去做呢?

编辑:调用Div'readnode'并在需要时放入表单内,替换上面表格中看到的div'writeenode'。这个div非常好用。当我在'readnode'中添加另一个div(testdiv)时,在使用$ _get时,放置在新div(testdiv)中的任何字段总是返回null。

EDIT2:

将readnode放在writenode位置的函数,

<script type="text/javascript">
/*  Set the counter that will increase every time
    the user adds a new language*/
var counter = 0;
function addlanguage()
{
    // Ask the user for input
    var language = prompt("Language Name","");
    if (language == "" || language == null)
    {
        alert("Please enter a language.");
    }
    else
    {
        counter++;
        // Find the element to be copied
        var newNode = document.getElementById('readnode').cloneNode(true);
        newNode.id = '';
        newNode.style.display = 'block';
        var newField = newNode.childNodes;
        // Give all fields a unique value
        for (var i=0;i<newField.length;i++)
        {
            var theName = newField[i].name;
            var theId = newField[i].id;
            if (theName)
            {
                newField[i].name = theName + counter;
            }
            if (theId == "languagename")
            {
                // Change the field to the user input
                newField[i].innerHTML = language;
            }
            if (theName == "lang")
            {
                // Replace the hidden field with the correct language
                newField[i].value = language;
            }
        }
        // Insert the elements
        var insertHere = document.getElementById('writenode');
        insertHere.parentNode.insertBefore(newNode,insertHere);
    }
}
</script>

这是php;

<?php
if ($_GET["time1"] == null)
{ ?>
    <form>
    <span id="writenode"></span>
    <input type="button" value="Add language" onClick="addlanguage()" >
    <input type="submit" value="Submit" >
    </form>
<?php
}
else
{
    $final = 0;
    $i = 1;
    while($final == 0)
    {
        $gettime = "time" . $i;
        $getRank = "rank" . $i;
        $time = $_GET[$gettime];
        $rank = $_GET[$getRank];

        if ($language == "")
        {
            $final = 1;
        }

        if ($final == 0)
        {
            // Show the user the input
            echo("<p>Your <strong>$time</strong> is <strong>$rank</strong>.</p>");
        }
        $i++;
    }
} ?>

1 个答案:

答案 0 :(得分:0)

当你把它放在div中时,它不再是newNode.childNodes的一部分,所以你永远不能正确设置名称。你必须检查孩子的孩子或使用jQuery简化事情。

for (var i=0;i<newField.length;i++)
        {
    var subField = newField.childNodes;


    for (var i=0;i<subField.length;i++) {
            var theName = subField[i].name;
            var theId = subField[i].id;

        // ...
    }
}