Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make hidden form visible onclick

    Hello

    I am trying to create a webpage that initially displays one form with the option of adding 5 more forms when the user clicks a button. I tried adapting the code from this post, but I was unable to get the hidden forms to display.

    You can view a mockup of the site here.

    Any help will be greatly appreciated!

    Code:
    <html>
     <script type = "text/javascript">
    
    function viewform(){
    var numdivs = 5;
    var num = document.getElementById("Add_Form").value;
    for (var i=1; i<=numdivs; i++) {
    var which = "FieldSet" + 1;
    document.getElementById(which).style.display = num>=1? "block" : "none"; 
    	}
    }
    
    </script>
      <body>
        <form>
          <div id="placeholder">
            <!-- template -->
            <div id="template">
              <!-- event fieldset -->
              <fieldset>
                <label class="field-first">Event: *
                  <input type="text" name="event_name" value="">
                </label>
                <label class="field-first">Date: *
                  <input type="date" id="datepicker" name="event_date">
                </label>
                <label class="field-first">Net Request Amount: *
                  <input type="text" name="amount_request" value="">
                </label>
            </div>
            <textarea name="describe" cols="60" rows="10"></textarea>
            </fieldset>
            <div id="FieldSet1" style="display: none">
              <label class="field-first">Event: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet2" style="display: none">
              <label class="field-first">Event: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet3" style="display: none">
              <label class="field-first">Event: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet4" style="display: none">
              <label class="field-first">Event: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet5" style="display: none">
              <label class="field-first">Event: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <!-- end event fieldset -->
          </div>
          <!-- end template -->
          </div>
          <!-- end placeholder -->
          <!-- buttons -->
          <button class="right-button" type="submit" name="submit" value="Submit"
          id="Add_Form" onclick="viewform ()">Submit</button>
          <button class="left-button" type="button" name="Submit"
          onclick="Add();">Add New Event</button>
          <!-- end buttons -->
        </form>
        <!-- end budget form -->​</body>
    
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,205
    Thanks
    23
    Thanked 605 Times in 604 Posts
    Your making your changes with the Submit button not the Add new Event button which calls and undefined function Add().

    Your not calling an additional form but trying to change a div in the only form. - I don't know how your going to get your information that way cause you never save (submit) it.

    You use a loop to call the <div id="FieldSet?" .. It runs through them all and lands on FieldSet5, but that does not display either.
    Code:
    var which = "FieldSet" + 1;
    The 1 S/B i for the loop to work.

    If I remove the
    Code:
    style="display: none"
    I see what you want (maybe)

    Changed the onclick="viewform ()" to the Add new Event button and changed the javascript. Also changed the Events to different words to see if the new stuff is coming up.

    Final coding is left up to you.

    Code:
    <html>
     <script type = "text/javascript">
    var div_num = 0;
    function viewform(){
    div_num++;
    var which = "FieldSet" + div_num;
    document.getElementById(which).style.display = "block";
    
    }
    
    </script>
    
    
      <body>
        <form>
          <div id="placeholder">
            <!-- template -->
            <div id="template">
              <!-- event fieldset -->
              <fieldset>
                <label class="field-first">Event: *
                  <input type="text" name="event_name" value="">
                </label>
                <label class="field-first">Date: *
                  <input type="date" id="datepicker" name="event_date">
                </label>
                <label class="field-first">Net Request Amount: *
                  <input type="text" name="amount_request" value="">
                </label>
    
            <textarea name="describe" cols="60" rows="10"></textarea>
            </fieldset>
            </div>
            <div id="FieldSet1" style="display: none">
              <label class="field-first">just: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet2" style="display: none">
              <label class="field-first">the: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet3" style="display: none">
              <label class="field-first">third: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet4" style="display: none">
              <label class="field-first">dataset: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <div id="FieldSet5" style="display: none">
              <label class="field-first">placed here: *
                <input type="text" name="event_name" value="">
              </label>
              <label class="field-first">Date: *
                <input type="date" id="datepicker" name="event_date">
              </label>
              <label class="field-first">Net Request Amount: *
                <input type="text" name="amount_request" value="">
              </label>
              <div class="description">
                <p>Please type a <strong><em>DETAILED</em></strong> description of the item/event/activity:
                  <br>
                </p>
              </div>
              <textarea name="describe" cols="60" rows="10"></textarea>
            </div>
            <!-- end event fieldset -->
          </div>
          <!-- end template -->
    <!--      </div>-->
          <!-- end placeholder -->
          <!-- buttons -->
          <button class="right-button" type="submit" name="submit" value="Submit"
          id="Add_Form" >Submit</button>
    
          <button class="left-button" type="button" name="Submit"
          onclick="viewform ()">Add New Event</button>
          <!-- end buttons -->
        </form>
        <!-- end budget form --></body>
    
    </html>

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank you!

    Thank you very much! Everything is working great now!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •