...
PDA

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 (http://www.codingforums.com/showthread.php?t=283284&highlight=hidden+form), but I was unable to get the hidden forms to display.

You can view a mockup of the site here (http://jsfiddle.net/cnE3d/1/).

Any help will be greatly appreciated!


<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. var which = "FieldSet" + 1; The 1 S/B i for the loop to work.

If I remove the 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.


<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!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum