Form Wizard. Change height and custom navigation

**igor123** · 03-26-2012, 07:55 AM

jQuery Form to Form Wizard
http://www.dynamicdrive.com/dynamici...formwizard.htm

Problems:
1) I use your wonderful script and very happy with it. But I have expanded area inside my form, and when it expands, height is changed and content becomes partially hidden under previous/next buttons area. How can I call some function or what piece of code I need to write to resize page in manner as formwizard animates it?

2) I would like to use own next/previous buttons inside each page. How can I do it?

3) When form page content longer than screen size and user scrolled down it will be better by clicking to the next button next page scrolled to top of form. Have you any suggestion how to do this?

Thanks in advance!

**ddadmin** · 03-27-2012, 07:20 AM

Hmm lets tackle things one issue at a time.

For 1), what you could do is "reload" the current panel when content inside the panel is expanded that in turn changes its height, revealing the additional content as well. In order to enable this, first, inside the .js file, find the below line, and remove the code in red:

Code:

		if (this.currentsection!=i && i<this.sections.count && doload){ //if next section to show isn't the same as the current section shown

With this change you can now call:

Code:

formwizardinstance.loadsection(panelnumber)

to "reload" a panel so it's shown/animated into view again, where panelnumber is the panel to reload (0=1st panel, 1=2nd panel etc). The below is a compete example where clicking on a link adds new content to the first panel, plus reload the panel to show the newly added content:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="formwizard.css" />

<script src="formwizard.js" type="text/javascript">

/***********************************************
* jQuery Form to Form Wizard- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script type="text/javascript">

var myform=new formtowizard({
	formid: 'feedbackform',
	persistsection: true,
	revealfx: ['slide', 500]
})

</script>

<body>

<form id="feedbackform">

<fieldset class="sectionwrap" id="d">
<legend>Basic Information</legend>
Name:<br /> <input id="username" type="text" size="35" /><br />
Age:<br /> <input id="age" type="text" size="6" /><br />
Sex: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female 
</fieldset>

<fieldset class="sectionwrap">
<legend>Shipping Address</legend>
Country:<br /> <input id="country" type="text" size="35" /><br />
State/Province:<br /> <input id="state" type="text" size="35" /><br />
Address #1:<br /> <input id="addr1" type="text" size="35" /><br />
Address #2:<br /> <input id="addr2" type="text" size="35" /><br />
</fieldset>

<fieldset class="sectionwrap">
<legend>Comments</legend>
Any additional instructions:<br /> <textarea id="feedback" style="width:350px;height:150px"></textarea><br />
<input type="submit" />
</fieldset>

</form>

<a href="#" onClick="jQuery('#d').append('<p>This is new content added.</p>'); myform.loadsection(0); return false">Add Content to 1st Panel</a>

Thread: Form Wizard. Change height and custom navigation

Thread Tools

Search Thread

Form Wizard. Change height and custom navigation

Bookmarks

Bookmarks

Posting Permissions