locked
javascript code RRS feed

  • Question

  • I have 1 text box name: createcontrolbox:...........................................

                                          2nd text box:    quantity:........................................................

                             one button ::::::.create.....................

    i have to enter  suppose:    text ........

                                            5 then

    click button

    it should show me 5 text box.......should be created. need help

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script language="javascript" type="text/javascript">
            function create() {

                var res1 = document.getElementById("Text1");
                var res = document.createElement("Text1");
                res.tagName = "text";
                var res2 = document.getElementById("Text2");
                res.value = "Text2";
                alert(res);
            }


        </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <label for="ctrlname"> Createcontrol*</label></td>
    <td><input  type="text" id ="Text1" name="Createcontrol" maxlength="50" size="30"/></td>
    </tr>
    <tr>
    <td><label for="quantity"> quantity*</label></td>
    <td><input  type="text" id ="Text2" name="quantity" maxlength="50" size="30"/></td>
    </tr>
    <tr>
    <td><input  type="button" id ="btncr" value= "create" onclick="create()"/></td>

    </tr>





    </table>

    </body>
    </html>

    thanks and regard love4csharp


    Sunday, March 3, 2013 8:27 AM

Answers

  • If the element names aren't going to match up it is probably best to use a switch statement then. Something like this:

    <script language="javascript" type="text/javascript">
        function create() {
                
            var controlType = document.getElementById("Text1").value;
            var noOfControls = document.getElementById("Text2").value;
            var target = document.getElementById("targetDiv");
    
    
            for (var i = 0; i < noOfControls; i++) {
                var newControl;
    
                switch (controlType) {
                    case "textbox":
                        newControl = document.createElement("Input");
                        newControl.type = "text";
                        break;
                    case "button":
                        newControl = document.createElement("Input");
                        newControl.type = "button";
                        break;
    
                }
                    
                target.appendChild(newControl);
            }
        }
    
    </script>

    • Marked as answer by love4csharp Sunday, March 3, 2013 12:24 PM
    Sunday, March 3, 2013 12:20 PM

All replies

  • ..enter either textbox, radio and quantity.....then button should create   eg. 5 textbox


    thanks and regard love4csharp


    Sunday, March 3, 2013 8:32 AM
  • function create() {

                var res1 = document.getElementById("Text1");
                var res = document.createElement("Text1");
                res.tagName = "text";
                var res2 = document.getElementById("Text2");
                res.value = "Text2";
                alert(res);
            }

    I am facing problem in this code. So please see this code. what to do??


    thanks and regard love4csharp


    Sunday, March 3, 2013 8:35 AM
  • plz share your idenad and suggestions

    thanks and regard love4csharp

    Sunday, March 3, 2013 10:37 AM
  • I've got this working. For example if you enter input and 5 you will get 5 inputs added as children of the new div targetDiv below the table.

        <script language="javascript" type="text/javascript">
            function create() {
                
                var controlType = document.getElementById("Text1").value;
                var noOfControls = document.getElementById("Text2").value;
                var target = document.getElementById("targetDiv");
    
    
                for (var i = 0; i < noOfControls; i++) {
                    var newControl = document.createElement(controlType);                         
                    target.appendChild(newControl);
                }
            }
    
    
        </script>
    </head>
    <body>
    <table>
    <tr>
    <td>
    <label for="ctrlname"> Createcontrol*</label></td>
    <td><input  type="text" id ="Text1" name="Createcontrol" maxlength="50" size="30"/></td>
    </tr>
    <tr>
    <td><label for="quantity"> quantity*</label></td>
    <td><input  type="text" id ="Text2" name="quantity" maxlength="50" size="30"/></td>
    </tr>
    <tr>
    <td><input  type="button" id ="btncr" value= "create" onclick="create()"/></td>
    
    </tr>
    </table>
    <div id="targetDiv">
    </div>
    

    Sunday, March 3, 2013 11:47 AM
  • not working

    thanks and regard love4csharp

    Sunday, March 3, 2013 11:59 AM
  • Hi

    Jchase

    you have to enter soppose: textbox , radiobutton....ans the no of quantityi.e 3

    it should diaplay 3 textbox...something like this.


    thanks and regard love4csharp


    Sunday, March 3, 2013 12:01 PM
  • If the element names aren't going to match up it is probably best to use a switch statement then. Something like this:

    <script language="javascript" type="text/javascript">
        function create() {
                
            var controlType = document.getElementById("Text1").value;
            var noOfControls = document.getElementById("Text2").value;
            var target = document.getElementById("targetDiv");
    
    
            for (var i = 0; i < noOfControls; i++) {
                var newControl;
    
                switch (controlType) {
                    case "textbox":
                        newControl = document.createElement("Input");
                        newControl.type = "text";
                        break;
                    case "button":
                        newControl = document.createElement("Input");
                        newControl.type = "button";
                        break;
    
                }
                    
                target.appendChild(newControl);
            }
        }
    
    </script>

    • Marked as answer by love4csharp Sunday, March 3, 2013 12:24 PM
    Sunday, March 3, 2013 12:20 PM
  • thanks

    J chase

    could you please explain

    var target = document.getElementById("targetDiv");

    <div id="targetDiv">


    thanks and regard love4csharp


    Sunday, March 3, 2013 12:24 PM
  • It's just to give the script somewhere to add the new elements. I added a div with the id targetDiv. That way in the script you can get the div using getElementById(). Then add the new elements as children of the div using appendChiild().

    Sunday, March 3, 2013 1:36 PM