jQuery Form to Form Wizard (v1.1) issues

**Gonzo714** · 04-20-2012, 09:18 PM

Link to script in question >>>> http://www.dynamicdrive.com/dynamici...formwizard.htm

Hello folks.
New member here.
Self taught PCs and HTML / CSS.
Not very geeky- but know enough to get myself in trouble.
(took me 5 minutes to figure out how to post, lol)

Im a service technician by trade - but I designed my own web site for my business. (combination hobby & reducing overhead)
I have learned ALOT from Dynamic Drive - I thank you guys.
I found the above Forms script the other night, and I really dug it.
Created the page for said script, everything worked fantastic.
But when I added it to my CSS / HTML / cut-copy-paste kinda page, the form itself would not appear. The upper and lower section would, but not the actual form-fill-ins.
I did my usual trial & error trouble shooting without success.
I even tried various browsers with same results.
My educated guess is - that said script will not work within CSS (???)

A copy of the page's <head> can be supplied if needed.

Thanks for the help, and this website can really kill a 14 hr day incredibly fast!

Gonzo714

**ajfmrf** · 04-21-2012, 01:07 AM

Hi Gonzo,welcome aboard.

You need to post the url of the problem page so people can see what you have done so far.

**Gonzo714** · 04-21-2012, 08:22 PM

That would help, huh?

some FYI's...

I am using TAB CONTENT for my selector tabs.
(im pretty sure I got that script from DD also)

I have double checked all script / html / CSS coding for said jQuery Form.

Lets start with what the form looks like when working properly...

...aint that purrty !
The form itself appears proper (Step 1, Step 2,,,,etc) and all the fill-in areas are present.

...And here is said HTML code being used >>>>
I have removed anything / everything that doesnt have to be, for troubleshooting purposes.

You'll see the notes I use to keep things in order.

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

<html>
<head>

<title> TROUBLESHOOTING</title>



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

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

</script>





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

<div class="tabcontentstyle">

</div>



</head>

<body bgcolor=#FFFFFF>







<center>

<img src=home/hti-banner.gif>



<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1"><img src="icons/home.gif" border=0></a></li>
<li><a href="#" rel="tcontent2"><img src="icons/services.gif" border=0></a></li>

<li><a href="#" rel="tcontent3">Open Ticket</a></li>

</ul>





<div id="tcontent1" class="tabcontent" >

<img src="home/home.gif">

<P><P>

<font size="2">Copyright © 2007- 2012 Hicks Telecommunication, Inc - All Rights Reserved</font>

</div>



<div id="tcontent2" class="tabcontent">

<img src="services/services.gif">

</div>



<div id="tcontent3" class="tabcontent">

<img src=serviceticket/serviceticket.gif>
<P>

<P><P>
<hr color="blue" width=50%>
<P><P>



<form id="feedbackform">

<fieldset class="sectionwrap">
<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>



</div>



<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>



</center>

</body>
</html>

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

The interesting thing I discovered while troubleshooting - is within the TAB CONTENT Part 2... you have the option of which tab is default by adding class-"selected" to your <li>
When I choose my MAIN as default, I get this for my Form...
but the results vary from my PC to the Internet (???)

On my PC...
the form appears fine - but will not give areas to fill in your info.

On the Internet...
It gives you the input sections, but the form does not appear properly.

But when I choose my OPENTICKET as default, I get this...

On my PC...
The form is fine! AOK!

On the Internet...
Same issues as before . (???)

I do not wish to use OPEN TICKET as my default.

My educated guess this time around is.. either a java script conflict.... or simply the TAB CONTENT and the jQuery Form dont like each other.

I did notice that both java scripts (tab content & jQuery) are using "<script type="text/javascript">" - could that be an issue?

Also - How the heck do you tell the form to send it your email account?
When hitting SUBMIT - it simply refreshes the form.

Thanks for your time and effort.
Gonzo714

**Gonzo714** · 04-23-2012, 03:19 AM

Evening folks
I reckon you can laugh at the newbie for a minute if ya wish.....
I discovered some sort of .class file within my main folder causing the issues with your FORMS script.
Once the file was removed - everything started working fine.

I even found out how to send the FORM to my email account with the cgi-bin feature.

However... only the "input="radio" " section of the FORM is being sent to my email.
All other info is not being sent???? non of the other fill-in areas.

thanks
Gonzo714

Thread: jQuery Form to Form Wizard (v1.1) issues

Thread Tools

Search Thread

jQuery Form to Form Wizard (v1.1) issues

Bookmarks

Bookmarks

Posting Permissions