CODEWITHSUNDEEP
javascripthtml
KaveElite
KaveElite

Reputation: 94

Javascript created forms not appearing on the page

I've been tweaking my script, and it seems I've went off into the deep end. I'm trying to learn how to generate forms with Javascript, and it seems every time I think I've got it, I get to confident, add a little more, and mess something up. I can't spot the issue within the code. Please, any help would be appreciated.

Javascript: (form.js)

function initFirstLoad(){
    var parentForm = document.getElementsByTagName('form')[0];
    function addForm(){
        var spawnForm = document.createElement("form");
        spawnForm.setAttribute('name',"savefile");
        spawnForm.setAttribute('method',"post");
        spawnForm.setAttribute('action',"");
        document.getElementsByTagName('body')[0].appendChild(spawnForm);
    }
    function addUniqueID(){
        var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
        var stringLength = 10;
        var randomString = '';
        for (var i=0; i<stringLength; i++) {
            var randomNumber = Math.floor(Math.random() * characters.length);
            randomString += characters.substring(randomNumber,randomNumber+1);
        }
        var uniqueID = document.createElement("input");
        uniqueID.setAttribute('type',"text");
        uniqueID.setAttribute('name',"filename");
        uniqueID.setAttribute('readonly',"readonly");
        uniqueID.setAttribute('value',randomString);
        parentForm.appendChild(uniqueID);
    }
    function addWeaponField(){
        var weapsName = document.createElement("input");
        weapsName.setAttribute('type',"text");
        weapsName.setAttribute('name',"textdata[]");

        var weapsNameQt = document.createElement("input");
        weapsNameQt.setAttribute('type',"number");
        weapsNameQt.setAttribute('name',"textdata[]");
        weapsNameQt.setAttribute('value',"0");

        parentForm.appendChild(weapsName);
        parentForm.appendChild(weapsNameQt);
    }
    function addAmmoField(){
        var ammoName = document.createElement("input");
        ammoName.setAttribute('type',"text");
        ammoName.setAttribute('name',"textdata[]");

        var ammoNameQt = document.createElement("input");
        ammoNameQt.setAttribute('type',"number");
        ammoNameQt.setAttribute('name',"textdata[]");
        ammoNameQt.setAttribute('value',"0");

        parentForm.appendChild(ammoName);
        parentForm.appendChild(ammoNameQt);
    }
    function addSubmitButton(){
        var weapsNameSubmit = document.createElement("input");
        weapsNameSubmit.setAttribute('type',"submit");
        weapsNameSubmit.setAttribute('name',"submitsave");
        weapsNameSubmit.setAttribute('value',"Done!");
    }
}
window.addEventListener("load", initFirstLoad);

HTML: (form.htm)

<!DOCTYPE HTML>
<html>
<body style="background-color: rgb(225,225,225)">
    <h3>Javascript Created Form and Fields</h3>
<script type="text/javascript" src="form.js"></script> 
</body>
</html>

Am I doing something wrong? Is my syntax incorrect? Thank you in advance!

EDIT: Corrected addSubmitButton which was initially correct inside my code, but was accidentally removed. Thank you for the help guys, problem solved. I forgot to call functions the functions.

Upvotes: 0

Views: 78

Answers (3)

kasper Taeymans
kasper Taeymans

Reputation: 7026

First of all your code is pretty weird structured (imo). If you are nesting functions to keep everything together then why you don't make a proper prototype-based "class" instead? that way you could make your code reusable. Let that aside you have a syntax error and you forgot to call your functions. Also you created a submit button but didn't add it to the form. In fact you didn't add a form to the dom at all. Here is a working demo with your issues fixed (however this code must be structured in a better way, but that's up to you:-):

working jsfiddle demo 

function initFirstLoad(){
    addForm();
    var parentForm = document.getElementsByTagName('form')[0];
    addUniqueID();
    addWeaponField();
    addAmmoField();
    addSubmitButton();

    function addForm(){
        var spawnForm = document.createElement("form");
        spawnForm.setAttribute('name',"savefile");
        spawnForm.setAttribute('method',"post");
        spawnForm.setAttribute('action',"");
        document.getElementsByTagName('body')[0].appendChild(spawnForm);
    }
    function addUniqueID(){
        var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
        var stringLength = 10;
        var randomString = '';
        for (var i=0; i<stringLength; i++) {
            var randomNumber = Math.floor(Math.random() * characters.length);
            randomString += characters.substring(randomNumber,randomNumber+1);
        }
        var uniqueID = document.createElement("input");
        uniqueID.setAttribute('type',"text");
        uniqueID.setAttribute('name',"filename");
        uniqueID.setAttribute('readonly',"readonly");
        uniqueID.setAttribute('value',randomString);
        parentForm.appendChild(uniqueID);
    }
    function addWeaponField(){
        var weapsName = document.createElement("input");
        weapsName.setAttribute('type',"text");
        weapsName.setAttribute('name',"textdata[]");

        var weapsNameQt = document.createElement("input");
        weapsNameQt.setAttribute('type',"number");
        weapsNameQt.setAttribute('name',"textdata[]");
        weapsNameQt.setAttribute('value',"0");

        parentForm.appendChild(weapsName);
        parentForm.appendChild(weapsNameQt);
    }
    function addAmmoField(){
        var ammoName = document.createElement("input");
        ammoName.setAttribute('type',"text");
        ammoName.setAttribute('name',"textdata[]");

        var ammoNameQt = document.createElement("input");
        ammoNameQt.setAttribute('type',"number");
        ammoNameQt.setAttribute('name',"textdata[]");
        ammoNameQt.setAttribute('value',"0");

        parentForm.appendChild(ammoName);
        parentForm.appendChild(ammoNameQt);
    }
    function addSubmitButton(){
        var weapsNameSubmit = document.createElement("input");
        weapsNameSubmit.setAttribute('type',"submit");
        weapsNameSubmit.setAttribute('name',"submitsave");
        weapsNameSubmit.setAttribute('value',"Done!");
        parentForm.appendChild(weapsNameSubmit);
    }
}
window.addEventListener("load", initFirstLoad());

Upvotes: 2

user2726374
user2726374

Reputation: 46

Your last line is window.addEventListener("load", initFirstLoad);. Change it to window.addEventListener("load", initFirstLoad()); and 'function addSubmitButton{ ' to 'function addSubmitButton(){',perhaps you might need to call you functions after declaring your parent form, if i am not wrong

Upvotes: 0

NewToJS
NewToJS

Reputation: 2772

Not how i would build the form but correcting your method.... 

function initFirstLoad(){
        var spawnForm = document.createElement("form");
        spawnForm.setAttribute('name',"savefile");
        spawnForm.setAttribute('method',"post");
        spawnForm.setAttribute('action',"");
        document.getElementsByTagName('body')[0].appendChild(spawnForm);

        var parentForm = document.getElementsByTagName('form')[0];
        var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
        var stringLength = 10;
        var randomString = '';
        for (var i=0; i<stringLength; i++) {
            var randomNumber = Math.floor(Math.random() * characters.length);
            randomString += characters.substring(randomNumber,randomNumber+1);
        }

        var uniqueID = document.createElement("input");
        uniqueID.setAttribute('type',"text");
        uniqueID.setAttribute('name',"filename");
        uniqueID.setAttribute('readonly',"readonly");
        uniqueID.setAttribute('value',randomString);
        parentForm.appendChild(uniqueID);

        var weapsName = document.createElement("input");
        weapsName.setAttribute('type',"text");
        weapsName.setAttribute('name',"textdata[]");

        var weapsNameQt = document.createElement("input");
        weapsNameQt.setAttribute('type',"number");
        weapsNameQt.setAttribute('name',"textdata[]");
        weapsNameQt.setAttribute('value',"0");

        parentForm.appendChild(weapsName);
        parentForm.appendChild(weapsNameQt);


        var ammoName = document.createElement("input");
        ammoName.setAttribute('type',"text");
        ammoName.setAttribute('name',"textdata[]");

        var ammoNameQt = document.createElement("input");
        ammoNameQt.setAttribute('type',"number");
        ammoNameQt.setAttribute('name',"textdata[]");
        ammoNameQt.setAttribute('value',"0");

        parentForm.appendChild(ammoName);
        parentForm.appendChild(ammoNameQt);

        var weapsNameSubmit = document.createElement("input");
        weapsNameSubmit.setAttribute('type',"submit");
        weapsNameSubmit.setAttribute('name',"submitsave");
        weapsNameSubmit.setAttribute('value',"Done!");

}
window.addEventListener("load", initFirstLoad);

Upvotes: 0

Related Questions