CODEWITHSUNDEEP
javascripthtml
Chris
Chris

Reputation: 944

JavaScript error, form not displaying

I need to output a form, using java Script.I have to check prior if the input information (password) is equal for example with "0" and if true-to output the form.Help me, thank you!

here is the form code:

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' />

here is the entire code:

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

}

Upvotes: 0

Views: 89

Answers (3)

flex36
flex36

Reputation: 146

You are mixing JavaScript and Html syntax within a script-tag.

If you want to create a form dynamically with JavaScript do it like this:

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

Upvotes: 0

BeNdErR
BeNdErR

Reputation: 17927

You can do something like this:

1) create an enpty div that will hold your form, once the user logs in correctly:

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

2) append to form-container the form, using 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;

    ...
}

Upvotes: 0

dstronczak
dstronczak

Reputation: 2454

You are trying to put html in you javascript code. In this case you have to use document.write() instead of pure html. It should be like this:

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

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

Upvotes: 1

Related Questions