#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Unhappy Cannot create new input with value and checkbox


    my question is that I cannot create a new input with value and checkbox, otherwise, the new checkboxs donesn't contain any value. Could anyone give me any hint? Thanks in advance.

    a.parsons.edu/~liw067/time_saver/
    _______
    HTML
    <div id="try_it">
    <input type='button' onclick='manycb()' value='Submit2'/>
    <input type='text' id='white' />
    <div id="test_test1" type="checkbox"></div>
    </div>
    _______
    Javascript
    <script>
    function manycb()
    {
    var myTextField = document.getElementById('white');
    var newInput=document.createElement("INPUT");
    var textnode=document.createTextNode("Water");
    newInput.appendChild(textnode);
    var value=myTextField.value;


    document.getElementById("test_test1").appendChild(newInput)+"\n";//here
    newInput.type="checkbox";
    newInput.id="mycheckboxid";
    newInput.name="mycheckboxname";


    if(myTextField.value != ""){

    document.getElementById("test_test1").innerHTML=myTextField.value;
    //document.getElementById("test_test1").appendChild(newInput);}
    }


    }

    </script>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Ok..., I am just kind of taking a guess here; from your description of what your trying to do, but is this what your looking for?
    Code:
    <div id="try_it">
    <input type='button' onclick='manycb()' value='Submit2'/>
    <input type='text' id='white' />
    <div id="test_test1" type="checkbox"></div>
    </div>
    
    <script>
    function manycb()
    {
    var myTextField = document.getElementById('white');
    var newInput=document.createElement("input");
    var textnode=document.createTextNode("Water");
    var value=myTextField.value;
    
    newInput.type="checkbox";
    newInput.id="mycheckboxid";
    newInput.name="mycheckboxname";
    newInput.value = value;
    
    
    if(myTextField.value != ""){
    document.getElementById("test_test1").appendChild(newInput);
    document.getElementById("test_test1").appendChild(textnode);
    var lb = document.createElement("br");
    document.getElementById("test_test1").appendChild(lb);
    }
    
    
    }
    
    </script>
    Last edited by web_loone08; August 11th, 2013 at 10:04 PM. Reason: Added the line-break creation/addition to DOM, that I left out earlier.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Almost there


    Almost! Almost!!

    But I want to create a new input, not just "checkbox+water." Is that possible? I'm beginner in Javascript, thus I don't know how to create different values depending on user. For example, now I have several submit buttons, however, they only allow me to create one customized "checkbox+value." Any thought? Big thanks!
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by wenchingli
    Almost! Almost!!

    But I want to create a new input, not just "checkbox+water." Is that possible? I'm beginner in Javascript, thus I don't know how to create different values depending on user. For example, now I have several submit buttons, however, they only allow me to create one customized "checkbox+value." Any thought? Big thanks!
    Do you mean... like this?
    Code:
    <div id="try_it">
    <input type='button' onclick='manycb()' value='Submit2'/>
    <input type='text' id='white' />
    <div id="test_test1" type="checkbox"></div>
    </div>
    
    <script>
    
    var textBoxNameIDNum = -1;
    
    function manycb()
    {
    var myTextField = document.getElementById('white');
    var newInput=document.createElement("input");
    var textnode=document.createTextNode("Water");
    var value=myTextField.value;
    
    newInput.type = "checkbox";
    newInput.id = "mycheckboxid" + textBoxNameIDNum;
    newInput.name = "mycheckboxname" + textBoxNameIDNum;
    newInput.value = value;
    
    // new text input field
    textBoxNameIDNum++;
    var textBox = document.createElement("input");
    textBox.type = "text";
    textBox.id = "tb" + textBoxNameIDNum;
    textBox.name = "textbox" + textBoxNameIDNum;
    
    
    if(myTextField.value != ""){
    document.getElementById("test_test1").appendChild(textBox);
    document.getElementById("test_test1").appendChild(newInput);
    document.getElementById("test_test1").appendChild(textnode);
    var lb = document.createElement("br");
    document.getElementById("test_test1").appendChild(lb);
    }
    
    
    }
    
    </script>
    And..., as far as using multiple buttons; it should work fine..., that should work fine. Because you would be assigning each button's onclick event with the same function and the function will just keep adding new content to the "test_test1" div. Oh, by the way; I also updated your id and name attributes for your input field, so now..., they will be unique and that's a good thing.

IMN logo majestic logo threadwatch logo seochat tools logo