Add input types on random

Question

I have a input type number. Once the user enters the number in that field. I want to generate that many input types under it. How can I do it with javascript or Ajax for that matter.

<table width="100%">
    No of Plans:
    <input type="text" name="numbers" value="" onkeypress="return isNumberKey(event)"/>  //using AUI here to check if numbers only
    //If the number is 5 say. I need to generate 5 input fields under here.

My Javascript which will check that the user enters only numbers is

<script type="text/javascript">
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }
</script>

All this is working for me. I just need the loop which would generate input fields as the value entered in numbers.

jabclab · Accepted Answer · 2011-12-12 12:00:14Z

2

Something like this should help:

function createInputs() {
    var num = 123, // <-- user-defined
        i,
        input,
        body = document.getElementsByTagName("body")[0];

    for (i = 0, i < num; i++) {
        input = document.createElement("input");
        input.type = "text";

        // Add to the DOM
        body.appendChild(input);
    }
}

edited Dec 12, 2011 at 12:00

answered Dec 12, 2011 at 11:16

jabclab

15.1k5 gold badges58 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Some Java Guy Over a year ago

how would I call this function you suggested on submit. This is my submit here <td><input type="submit" value="Create" name="button" style="width: 80px;" class="rightButtons" ></td> `

jabclab Over a year ago

Simply add: onsubmit="createInputs();" to your input element. If you want to add the new inputs at a different point (i.e. not at the end of the body) just change the name and value of the body variable in my example.

Hemant Metalia · Accepted Answer · 2011-12-12 11:31:08Z

1

you can use create element to create input elements dynamically

refer this http://viralpatel.net/blogs/2009/01/dynamic-add-textbox-input-button-radio-element-html-javascript.html

function addElement(eletype){
    var ele = document.createElement("input");
    ele.setAttribute("type", eletype);
    //id is the id1 of the div or any component in which you want to add this element
    var baseele = document.getElementById("id1");
    baseele.appendChild(ele);
}

edited Dec 12, 2011 at 11:31

answered Dec 12, 2011 at 11:14

Hemant Metalia

30.8k18 gold badges77 silver badges93 bronze badges

Comments

Sonal Khunt · Accepted Answer · 2011-12-12 11:15:30Z

0

You find good help here

http://viralpatel.net/blogs/2009/01/dynamic-add-textbox-input-button-radio-element-html-javascript.html

answered Dec 12, 2011 at 11:15

Sonal Khunt

1,89612 silver badges20 bronze badges

Collectives™ on Stack Overflow

Add input types on random

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related