Revised: A form -to- dynamic form -to- dynamic checkboxes

Discussion in 'Javascript' started by pizzy, Mar 18, 2005.

  1. pizzy

    pizzy Guest

    PROBLEM: I CAN'T GET THE LAST RESUTS TO WORK CORRECTLY. I WOULD
    PROVIDE THE CODE (AND WILL IF REQUESTED).
    BUT IN MY OWN WORDS I AM TRYING TO HAVE THE FIRST FORM
    DYNAMICALLY CREATE INPUT BOXES BASED ON THE NUMBER
    ENTERED. THEN ON THE SECOND FORM (WHICH IS CREATED BY
    THE FIRST FORM CALLING A FUNCTION) I WANT THE USER TO BE
    ABLE TO CLICK ON ONE OF THE CHECKBOXES AND SEE MORE
    INPUT BOXES APPEAR. HAS ANYONE DONE SOMETHING LIKE THIS?
    IF SO, WHAT IS THE BEST APPROACH FOR ME TO GET THIS DONE?


    ________
    enter # of input0A |_______| [submit] [reset]


    ------------------------------­-------------------------
    READ: THE FORM BELOW IS AFTER 2 IS ENTERED INTO THE input ABOVE


    ________
    input1A |_______| [] check here to add input2A and input3A
    ________
    input1B |_______| [] check here to add input2B and input3B


    [submit] [reset]


    ------------------------------­-------------------------
    READ: THE FORM BELOW IS THE RESULTS OF CLICKING THE FIRST
    CHECKBOX ABOVE
    ________ ________ ________
    input1A |_______| [] input2A |_______| input3A |_______|
    ________
    input1B |_______| [] check here to add input2B and input3B


    [submit] [reset]
    pizzy, Mar 18, 2005
    #1
    1. Advertising

  2. pizzy

    Guest

    pizzy wrote:
    > PROBLEM: I CAN'T GET THE LAST RESUTS TO WORK CORRECTLY. I WOULD
    > PROVIDE THE CODE (AND WILL IF REQUESTED).
    > BUT IN MY OWN WORDS I AM TRYING TO HAVE THE FIRST FORM
    > DYNAMICALLY CREATE INPUT BOXES BASED ON THE NUMBER
    > ENTERED. THEN ON THE SECOND FORM (WHICH IS CREATED BY
    > THE FIRST FORM CALLING A FUNCTION) I WANT THE USER TO BE
    > ABLE TO CLICK ON ONE OF THE CHECKBOXES AND SEE MORE
    > INPUT BOXES APPEAR. HAS ANYONE DONE SOMETHING LIKE THIS?
    > IF SO, WHAT IS THE BEST APPROACH FOR ME TO GET THIS DONE?
    >
    >
    > ________
    > enter # of input0A |_______| [submit] [reset]
    >
    >
    > ------------------------------­-------------------------
    > READ: THE FORM BELOW IS AFTER 2 IS ENTERED INTO THE input ABOVE
    >
    >
    > ________
    > input1A |_______| [] check here to add input2A and input3A
    > ________
    > input1B |_______| [] check here to add input2B and input3B
    >
    >
    > [submit] [reset]
    >
    >
    > ------------------------------­-------------------------
    > READ: THE FORM BELOW IS THE RESULTS OF CLICKING THE FIRST
    > CHECKBOX ABOVE
    > ________ ________ ________
    > input1A |_______| [] input2A |_______| input3A |_______|
    > ________
    > input1B |_______| [] check here to add input2B and input3B
    >
    >
    > [submit] [reset]
    , Mar 18, 2005
    #2
    1. Advertising

  3. pizzy

    guilllet Guest

    pizzy wrote:
    > PROBLEM: I CAN'T GET THE LAST RESUTS TO WORK CORRECTLY. I WOULD
    > PROVIDE THE CODE (AND WILL IF REQUESTED).
    > BUT IN MY OWN WORDS I AM TRYING TO HAVE THE FIRST FORM
    > DYNAMICALLY CREATE INPUT BOXES BASED ON THE NUMBER
    > ENTERED. THEN ON THE SECOND FORM (WHICH IS CREATED BY
    > THE FIRST FORM CALLING A FUNCTION) I WANT THE USER TO BE
    > ABLE TO CLICK ON ONE OF THE CHECKBOXES AND SEE MORE
    > INPUT BOXES APPEAR. HAS ANYONE DONE SOMETHING LIKE THIS?
    > IF SO, WHAT IS THE BEST APPROACH FOR ME TO GET THIS DONE?
    >
    >
    > ________
    > enter # of input0A |_______| [submit] [reset]
    >
    >
    > ------------------------------­-------------------------
    > READ: THE FORM BELOW IS AFTER 2 IS ENTERED INTO THE input ABOVE
    >
    >
    > ________
    > input1A |_______| [] check here to add input2A and input3A
    > ________
    > input1B |_______| [] check here to add input2B and input3B
    >
    >
    > [submit] [reset]
    >
    >
    > ------------------------------­-------------------------
    > READ: THE FORM BELOW IS THE RESULTS OF CLICKING THE FIRST
    > CHECKBOX ABOVE
    > ________ ________ ________
    > input1A |_______| [] input2A |_______| input3A |_______|
    > ________
    > input1B |_______| [] check here to add input2B and input3B
    >
    >
    > [submit] [reset]



    If you don't have many inbox to display try using div's labels and
    changing their style.display property. It doesn't create the fields but
    it hide/display them, so the feeling is the same. That's the only
    solution i know with client side code. With server side code it would
    be easier.

    Example:

    <html>
    <head>
    <title>Generating Fields</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    </head>

    <body>
    <script language="JavaScript" type="text/JavaScript">

    var maxFields=4;

    function showInputs() {

    n=document.getElementById("number_of_fields").value;
    for (i=1;i<=n&&i<maxFields;i++) {
    field=eval("document.getElementById('field"+i+"')");
    field.style.display="block";
    }
    }
    </script>


    <form name="form1" method="post" action="">
    <p>number of fields:
    <input type="text" name="number_of_fields" id="number_of_fields">
    </p>

    <p>
    <input type="button" name="Submit" value="show fields"
    onClick="showInputs()">
    </p> </form>
    <form name="form1">
    <div id="field1" style="display:none">
    <p>field1:
    <input type="text" name="textfield">
    </p>
    </div>
    <div id="field2" style="display:none"><p> field2:
    <input type="text" name="textfield2">
    </p>
    </div>
    <div id="field3" style="display:none"><p>field3:
    <input type="text" name="textfield3">
    </p>
    </div>
    </form>
    <p>&nbsp;</p>
    <p>&nbsp; </p>
    </body>
    </html>
    guilllet, Mar 19, 2005
    #3
  4. pizzy

    pizzy Guest

    /*
    guilllet,

    Dude thanks for the code but I already know how to do that... Look at
    the second form I drew. It has check boxes there that will allow the
    user to add additional fields. These check boxes should view an
    additional two fields. Check out my showInputs().
    */

    function showInputs() {
    var howMany = document.form1.number_of_fields.value;
    inter = "'";
    data = "";

    if (howMany < 16 && howMany > -1) {


    for (i=1; i <= howMany; i++) {
    data = data + " <input type='text' size=10 name=" + inter +
    "inputMe[]" + i + inter + "'>" + " <input type='checkbox'
    onClick='showInputs2();' id='tag_1' name='checkMe'" + i + "'><br>";
    }

    field1.innerHTML = data;

    }else {
    window.alert("Please select up to 15 entries.");
    }
    }

    #This all goes into a div tag. check it out...
    <form>
    <div id="field1" style="possitive:absolute"></div>
    </form>
    #Your help will not go unnoticed. Thanks!
    pizzy, Mar 19, 2005
    #4
  5. pizzy

    pizzy Guest

    This is racking my brain!!!!
    pizzy, Mar 21, 2005
    #5
  6. pizzy

    guilllet Guest

    ok, i see.
    so your problem is the last part, that's it?
    tomorrow i'll try to find out how to make it work.
    what kind of error do you get?
    guilllet, Mar 23, 2005
    #6
  7. pizzy

    RobG Guest

    pizzy wrote:
    > /*
    > guilllet,
    >
    > Dude thanks for the code but I already know how to do that... Look at
    > the second form I drew. It has check boxes there that will allow the
    > user to add additional fields. These check boxes should view an
    > additional two fields. Check out my showInputs().
    > */


    Please quote what you are replying to and trim any excess to
    reduce message length.

    Please wrap code manually at about 65 characters to ensure a
    couple of posts and replys without wrapping. This makes it much
    easier for others to fix your code.

    Indent code using 2 or 4 spaces (2 preferred) to stop wrapping
    and keep lines to a reasonable length.

    All the above is on the group FAQ:

    <URL:http://www.jibbering.com/faq/>


    > function showInputs() {

    [...]
    > for (i=1; i <= howMany; i++) {
    > data = data + " <input type='text' size=10 name=" + inter +
    > "inputMe[]" + i + inter + "'>" + " <input type='checkbox'
    > onClick='showInputs2();' id='tag_1' name='checkMe'" + i + "'><br>";
    > }
    >


    This will create inputs with identical ids and likely some with
    identical names, thereby creating invalid HTML.

    > field1.innerHTML = data;
    >
    > }else {
    > window.alert("Please select up to 15 entries.");
    >


    Below is a better way of doing what you are attempting. It uses
    DOM methods to add the extra elements and a selector to ensure
    correct input. The checkboxes are added to the form, but you
    could put them into a separate div if you want.

    I've used document.write to create the options for brevity.

    I've also added a dummy showInputs2() function.


    <script type="text/javascript">
    function showInputs(f,v) {
    var i = 0,
    oInp, oLabel;
    while (i++ < v){
    oLabel = document.createElement('label');
    oInp = document.createElement('input');
    oInp.type = 'checkbox';
    oInp.onclick = function() {showInputs2(this)};
    oInp.id = 'tag_' + i;
    oInp.name = 'checkMe' + i;
    oLabel.appendChild(oInp);
    oLabel.appendChild(document.createTextNode(i));
    oLabel.appendChild(document.createElement('br'));
    f.appendChild(oLabel);
    }
    }
    function showInputs2(x) {
    alert(
    'function showInputs2()'
    + '\ncalled from ' + x.nodeName
    + ' ' + x.type
    + '\nid: ' + x.id
    + ' name: ' + x.name
    );
    }

    </script>

    # This all gets added to the form. Check it out...
    <form>
    <select onchange="
    showInputs(this.form,
    this[this.selectedIndex].value);
    ">
    <option selected>Select how many checkboxes to add</option>
    <br>
    <script type="text/javascript">
    for (var i=1; i<17; i++) {
    document.write('<option value="' + i
    + '">' + i + '<\/option>');
    }
    </script>
    </select><br>
    <input type="reset" onclick="
    var labels = this.form.getElementsByTagName('label');
    var i = labels.length;
    while (i--){
    labels.parentNode.removeChild(labels);
    }
    "><br>
    </form>








    --
    Rob
    RobG, Mar 23, 2005
    #7
  8. pizzy

    pizzy Guest

    I see that you have the oInp.onclick sending to showInputs2. How am I
    able to create a unique input box in the showInputs2 function?

    <script type="text/javascript">
    function showInputs(f,v) {
    var i = 0,
    oInp, oLabel;
    while (i++ < v){

    oLabel = document.createElement('label');
    oLabel2 = document.createElement('label');
    oInp = document.createElement('input');
    oDiv = document.createElement('div');

    oInp.type = 'checkbox';
    oInp.onclick = function() { showInputs2(this)};
    oInp.id = 'tag_' + i;
    oInp.name = 'checkMe' + i;

    oDiv.type = 'div';
    oDiv.id = 'showTag' + i;
    oDiv.style.position = 'relative';

    oLabel.appendChild(document.createTextNode(i));
    oLabel.appendChild(oInp);
    oLabel.appendChild(document.createElement('br'));

    oLabel2.appendChild(document.createTextNode("The text box should
    display here after I click the check box"));
    oLabel2.appendChild(oDiv);

    field1.appendChild(oLabel);
    field1.appendChild(oLabel2);
    }
    }

    function showInputs2(x) {
    alert( 'function showInputs2()' + '\ncalled from ' + x.nodeName + ' '
    + x.type + '\nid: ' + x.id + ' name: ' + x.name );

    }
    </script>

    <form>
    <select
    onchange="showInputs(this.form,this[this.selectedIndex].value);">
    <option selected>Select how many checkboxes to add</option>
    <br>
    <script type="text/javascript">
    for (var i=1; i<17; i++) {
    document.write('<option value="' + i
    + '">' + i + '<\/option>');
    }
    </script>
    </select><br>
    <input type="reset" onclick="
    var labels = this.form.getElementsByTagName('label');
    var i = labels.length;
    while (i){
    labels.parentNode.removeChild(labels);
    }
    "><br>
    </form>
    <form name="myForm"><div id="field1" style="position:relative;">
    </div></form>
    pizzy, Mar 23, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1.  opalinski from opalpaweb

    pair.class revised

    opalinski from opalpaweb, Mar 15, 2006, in forum: Java
    Replies:
    2
    Views:
    3,133
    Oliver Wong
    Mar 16, 2006
  2. Replies:
    1
    Views:
    582
    Webcastmaker
    Jul 19, 2004
  3. Spartanicus
    Replies:
    0
    Views:
    390
    Spartanicus
    Sep 16, 2004
  4. Scott Robert Ladd
    Replies:
    31
    Views:
    6,324
    Carsten Hansen
    Jan 7, 2004
  5. JRough

    can't submit a form [revised]

    JRough, Oct 24, 2009, in forum: Javascript
    Replies:
    9
    Views:
    78
    JRough
    Oct 26, 2009
Loading...

Share This Page