Home/ Questions/Q 8266143
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T05:03:05+00:00

I tried writting a function which receives an input from the user as to

  • 0

I tried writting a function which receives an input from the user as to how many field to create in a form. Then the function creates a Form which contains number(equivalent to user input) of textboxes and one submit button. I wrote the function but it doesnt seem to be working where have i gone wrong. I would be grateful if any one can help me.
My code: 

function createTextBox()
    {   
        var box=document.getElementById('pop');                             //getting the ID of the containner
        var val=document.getElementById('uValue').value;                    //getting the Input value from the user

        var candidateForm=document.createElement('form');                   //Creating a form and giving the attributes
        candidateForm.name="candidateForm";
        candidateForm.method="post";
        candidateFomr.action="process.php";

        for(var i=0; i<val;i++)
        {
            var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
            newTextbox.type="textbox";
            newTextbox.name="candidate[]";
            newTextbox.id="candidateId";

            candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form

        }

        var saveButton=document.createElement('input');                     //creating the submit button which when clicked will save the value written in the textboxes
        saveButton.type="submit";
        saveButton.name="submitButton";
        saveButton.value="Enter";
        candidateForm.appendChild(saveButton);                              //putting the submit button in the form

        box.appendChild(candiateForm);                                      //And putting the form in the containner.

        //alert (val);
    }

here is the HTML part

<body>
<input type="textbox" name="value_box" id="uValue" ></input>
<input type="button" onclick="javascript:createTextBox()" value="Click"></input>
<div id="pop"></div>
</body>

Thanks in Advance 😀

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To begin with input types are standalone tag.

    Change your HTML to

    <input type="textbox" name="value_box" id="uValue" />
<input type="button" onclick="javascript:createTextBox()" value="Click"/>
<div id="pop"></div>

    Also made changes to the js

    function createTextBox()
    {   
        var box=document.getElementById('pop');                             //getting the ID of the containner
        var val=document.getElementById('uValue').value;                    //getting the Input value from the user

        var candidateForm=document.createElement('form');                   //Creating a form and giving the attributes
        candidateForm.name="candidateForm";
        candidateForm.method="post";
        candidateFomr.action="process.php";

        for(var i=0; i<val;i++)
        {
            var newTextbox = document.createElement('input');               //creating the textboxes according to the users input
            newTextbox.type="textbox";
            newTextbox.name="candidate[]";
            newTextbox.id="candidateId";

            candidateForm.appendChild(newTextbox);                          //putting the created textboxes in the form

        }

        var saveButton=document.createElement('input');                     //creating the submit button which when clicked will save the value written in the textboxes
        saveButton.type="submit";
        saveButton.name="submitButton";
        saveButton.value="Enter";
        candidateForm.appendChild(saveButton);                              //putting the submit button in the form

        box.appendChild(candiateForm);                                      //And putting the form in the containner.

        //alert (val);
    }
    • 0