JavaScript错误，窗体不显示

Question

我需要使用java脚本输出一个表单，我必须事先检查输入信息(密码)是否等于"0“，如果是真的--为了输出form.Help me，谢谢！

以下是表单代码：

First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
State: <select id='state'>
        <option>Please Choose</option>
        <option>AL</option>
        <option>CA</option>
        <option>TX</option>
        <option>WI</option>
    </select><br />
    Username(6-8 characters): <input type='text' id='username' /><br />
    Email: <input type='text' id='email' /><br />
    <input type='Submit' value='Check Form' />

以下是整个代码：

HTML:

<h1> Please enter your password</h1>
<input id="password" type="number">
<input type="button" value="Submit" onclick="doStuffe()">

JavaScript:

function doStuffe()
{
    var namepassword = document.getElementById("password");
    var password = parseInt(namepassword.value);
    if (password==0) {
        document.write('testoutput');
        <form >
        First Name: <input type='text' id='firstname' /><br />
        Address: <input type='text' id='addr' /><br />
        Zip Code: <input type='text' id='zip' /><br />
        State: <select id='state'>
                <option>Please Choose</option>
                <option>AL</option>
                <option>CA</option>
                <option>TX</option>
                <option>WI</option>
            </select><br />
            Username(6-8 characters): <input type='text' id='username' /><br />
            Email: <input type='text' id='email' /><br />
            <input type='Submit' value='Check Form' />
            </form> 
    };

}   

Answer 1

您正在尝试将html放入javascript代码中。在这种情况下，您必须使用document.write()而不是纯html。应该是这样的：

if (password==0) {
        document.write('testoutput');
        document.write("<form >");
        document.write("First Name: <input type='text' id='firstname' /><br />");

        //...
        document.write("</form >"); 
};

Answer 2

你可以这样做：

1)创建一个enpty div，一旦用户正确登录，它将保存您的表单：

<div id="form-container"></div>

2)在form-container中添加表单，使用js：

function doStuffe(){

    ...

    //--- Create the form string here
    var formString = "<form>" +
                       "First Name: <input type='text' id='firstname' /><br />" +
                       ...
                       "<input type='Submit' value='Check Form' />" +
                     "</form>";
    //--- Insert in the DOM
    document.getElementById("form-container").innerHTML = formString;

    ...
}

Answer 3

您正在脚本标记中混合JavaScript和HTML语法。

如果要使用JavaScript动态创建表单，请执行以下操作：

var form = document.createElement("form");
form.setAttribute('method',"post");
form.setAttribute('action',"/action.url");

var s = document.createElement("input");
s.setAttribute('type',"text");
s.setAttribute('value',"firstname");

... // more input properties

form.appendChild(s);

document.getElementsByTagName('body')[0].appendChild(form);