JavaScript错误，表单未显示

JavaScript error, form not displaying

本文关键字：显示 表单 错误 JavaScript      更新时间：2023-10-07

我需要使用java脚本输出一个表单。我必须先检查输入信息（密码）是否等于（例如"0"），如果为true才能输出表单。帮我，谢谢！

这是表单代码：

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> 
    };
}

您正试图在javascript代码中放入html。在这种情况下，您必须使用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 >"); 
};

您可以这样做：

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

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

2） 使用js:将表单附加到form-container

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;
    ...
}

您在脚本标记中混合了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);
相关文章：