Make hidden form visible onclick

KingHippo · 01-12-2013, 03:58 AM

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>

sunfighter · 01-12-2013, 04:04 PM

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>

KingHippo · 01-12-2013, 07:47 PM

Thank you very much! Everything is working great now!