如何在div中显示文本框

时间:2011-06-13 10:48:35

标签: javascript

这是我的index.php页面。此表单也在我的弹出框中以获取说明。

<form action="" method="post" onsubmit="store(this); return false">
<p>
    <input type="button" name="prev" onclick="goto(this.form, -1)" value="Previous" />
    <input type="button" name="next" onclick="goto(this.form, +1)" value="Next" />
</p>

<div>
    <noscript>Please enable JavaScript to see this form correctly</noscript>
</div>

<p>
    <input type="submit" name="submit" value="Store in database" />
</p>

这是我的Javascript文件upload.js

用户选择的文件在那里.--&gt;

var files = new Array();           功能插入(fileslist)              {                 文件[files.length] = fileslist;

            var filenames=(files.valueOf());

var max = files.length; var current = 0; 函数goto(form,pos)     {

current += pos;
form.prev.disabled = current <= 0;
form.next.disabled = current >= max - 1;
var fields = form.getElementsByTagName('fieldset');
for (var i = 0; i < fields.length; i++) fields[i].style.display = 'none';

fields[current].style.display = 'block';
form['name' + current].focus();
}

功能商店(表格)     {

var input = form.getElementsByTagName('input');
var data = ''; 
for (var i = 0; i < input.length; i++) {
    if (input[i].getAttribute('type') == 'text')
        data += '&' + input[i].getAttribute('name') + '=' + input[i].value;
}
data = encodeURI('n=' + max + data);
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('POST', 'datainsert.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-length', data.length);
xhr.setRequestHeader('Connection', 'close');
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        if (this.responseText != '')
             alert(this.responseText); 
     else {

            form.submit.value = 'Saved!';
            setTimeout(function() { form.submit.value = 'Save to database' }, 500);
        }

    }
}
xhr.send(data);

}






window.onload = function() 
{
    var form = document.forms[0];
    var container = form.getElementsByTagName('div')[0];
    container.innerHTML = '';
    for (var i = 0; i < max; i++)
        container.innerHTML += '<fieldset style="width: 250px; height: 80px;"><legend>Files of ' +(i + 1) + ' / ' + max + '</legend><input type="text" name="name' + i + '" /><br /><br /><input type="text" name="topic' + i + '" /></fieldset>';
    goto(form, 0);

}

<div>…</div>未显示文本框。为什么呢?

3 个答案:

答案 0 :(得分:1)

我的直觉告诉我你错误地传递max,所以它是未定义的或0所以循环永远不会运行,或者你的选择器是错误的 - 为你的元素添加ID并按照这样做:

<form id="myForm" action="" method="post" onsubmit="store(this); return false">
<p>
    <input type="button" name="prev" onclick="goto(this.form, -1)" value="Previous" />
    <input type="button" name="next" onclick="goto(this.form, +1)" value="Next" />
</p>

<div id="container">
    <noscript>Please enable JavaScript to see this form correctly</noscript>
</div>

<p>
    <input type="submit" name="submit" value="Store in database" />
</p>

window.onload = function() 
{
    var form = document.getElementById('myForm');
    var container = document.getElementById('container');
    container.innerHTML = '';
    var html = '';
    for (var i = 0; i < max; i++)
    {
        var ofValue = (i + 1) + ' / ' + max;
        html += '<fieldset style="width: 250px; height: 80px;">';
        html += '<legend>Files of ' + ofValue + '</legend>';
        html += '<input type="text" name="name' + i + '" /><br /><br />';
        html += '<input type="text" name="topic' + i + '" /></fieldset>';
    }
    container.innerHTML = html;

    goto(form, 0); //I am assuming this is a valid, defined method
                   //because it is also called from onclicks of Next/Prev buttons
}

答案 1 :(得分:0)

id="div1"放入div标签, 这将作为整个页面中JavaScript的标识符

<div id="dvi1">
    <noscript>Please enable JavaScript to see this form correctly</noscript>
</div>

答案 2 :(得分:-1)

<form action="" method="post" onsubmit="store(this); return false">
    <p>
        <input type="button" name="prev" onclick="goto(this.form, -1)" value="Previous" />
        <input type="button" name="next" onclick="goto(this.form, +1)" value="Next" />
    </p>

    <div  id="div1">
        <noscript>Please enable JavaScript to see this form correctly</noscript>
    </div>


    <p>
        <input type="submit" name="submit" value="Store in database" />
    </p>
</form>



window.onload = function() 
{

    var container = documentgetElementByid("div1");
    container.innerHTML = '';
    for (var i = 0; i < max; i++)
        container.innerHTML += '<fieldset style="width: 250px; height: 80px;"><legend>Files of ' +(i + 1) + ' / ' + max + '</legend><input type="text" name="name' + i + '" /><br /><br /><input type="text" name="topic' + i + '" /></fieldset>';
    goto(form, 0);

}