PDA

View Full Version : jQuery Form to Form Wizard (v1.1) issues



Gonzo714
04-20-2012, 09:18 PM
Link to script in question >>>> http://www.dynamicdrive.com/dynamicindex16/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...
http://www.hickstele.com/2012/troubleshooting/jquery.gif
...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>


<!-- ################# Begin Tab Content Part 1 ################## -->


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


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


</script>


<!-- ################## Stop Tab Content Part 1 ################# -->


<!-- ########### Java for service Ticket Forms ################ -->



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


<!-- ################ Stop Java for service Ticket Forms ################## -->


</head>


<body bgcolor=#FFFFFF>


<!---- #################### Start Image Mapping ###################### ---->

<!--- REMOVED FOR TROUBLESHOOTING -->

<!---################## Stop Image Mapping #################### --->


<center>

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


<!--- ############## Start TAB Content Part 2 ####################### -->

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

<!--- ####### STOP TAB Content Part 2 -- *** Part 3 is located at BOTTOM of page *** ######## -->

<!-----Home TAB #1 (MainTab 0) ------>


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


<!-----SERVICES TAB #2 (MainTab 1) ------>

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

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


</div>


<!----- OPEN SERVICE TICKET TAB #3 (MainTab 2) ------>

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

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


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


<!-- ###### Input for FORMS ##-->


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


<!-- ###### STOP Input for FORMS ##-->


</div>


<!----########### START TAB Content Part 3 #########----->


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


<!----########### STOP TAB Content Part 3 #########----->

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

http://www.hickstele.com/2012/Troubleshooting/MyPC - Main-selected.gif





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


http://www.hickstele.com/2012/Troubleshooting/Internet - either-selected.gif







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

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

http://www.hickstele.com/2012/Troubleshooting/MyPC - Ticket-selected.gif






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

http://www.hickstele.com/2012/Troubleshooting/Internet - either-selected.gif



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