Jump to content

Change Form Fields On Subject Change. Multiple Fields hidden/shown

Recommended Posts

I have been trying to get this code to work for days now and I finally have to throw my hands up and ask for help. What seems like something easy is getting more difficult as I go line by line. Here is the concept, upon clicking to send a contact form - depending on which subject the client chooses, it will correctly show which fields need to be entered based for that specific selection, and upon php submit it will run validation and send by email ALL fields. (will tackle those issues next)The options for the subject bar, numbers 1&2 will never show/hide any specific fields (general entry), but be shown in Selection 3/4/5. selection #3 will show for example fields "a,b,c"; selection #4 will show "A,D,E" and #5 may show "D,F,G". I will post the excerpt of code I have been working with, omitting additional form fields which wont add to help the debug. What I have been running into is when i code the single hide/show for selection # 3, it works perfectly. But when I go to code the combination of selection 3&4, selection#4 show/hide works, but #3 breaks. Furthermore, the code that I am using does not work on radio buttons or checkboxes, which is a necessity for this specific application, so if anyone could assist adding that functionality as well, it would be much appreciative. [it is commented out at this time, feel free to modify] I appreciate any and all assistance with this and will, after it is finished, post the website for where you can find the form. (You can reference to it for a portfolio)P.S. This form is going to need to submit without refresh happening, and I may also add that since I will be using other javascript to perform validation, I am slightly concerned that there may be some conflict between my current script and the jquery.validationEngine.js and jquery.jqtransform.js I will be using moving forward. Thanks for any anticipated assistance!

<script type="text/javascript">onload = function(e) {//hide everythingdocument.forms["contactform"]["commod"].style.display = "none";document.forms["contactform"]["shipweight"].style.display = "none";document.forms["contactform"]["dimensions"].style.display = "none";// document.forms["contactform"]["tarpreq"].style.display = "none";// document.forms["contactform"]["eqrequest"].style.display = "none";document.forms["contactform"]["dateavail"].style.display = "none";document.forms["contactform"]["rate"].style.display = "none";document.forms["contactform"]["mcnum"].style.display = "none";document.forms["contactform"]["proref"].style.display = "none";document.forms["contactform"]["eqavail"].style.display = "none";document.forms["contactform"]["subject"].onchange = function (e) {//show subject#3=sendinfoe.target.form["commod"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";e.target.form["shipweight"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";e.target.form["dimensions"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";// e.target.form["tarpreq"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";// e.target.form["eqrequest"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";e.target.form["dateavail"].style.display = e.target[e.target.selectedIndex].value == "sendinfo" ? "inline" : "none";//show subject#3&4=informe.target.form["commod"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";e.target.form["shipweight"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";e.target.form["dimensions"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";// e.target.form["tarpreq"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";// e.target.form["eqrequest"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";e.target.form["dateavail"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";e.target.form["rate"].style.display = e.target[e.target.selectedIndex].value == "inform" ? "inline" : "none";//show subject#5=availablee.target.form["dateavail"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";e.target.form["mcnum"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";e.target.form["proref"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";// e.target.form["eqavail"].style.display = e.target[e.target.selectedIndex].value == "available" ? "inline" : "none";};document.forms["contactform"]["subject"].selectedIndex = 0;}</script></head><body><form id="contactform" action=""><div><!--GENERAL TOP-Always Show--><label for="name">Name</label><input type="text" name="name" id="name" value="<?=$_SESSION['post']['name']?>" /><br><!--SUBJECT--><select name="subject"><option value="1" selected="selected">General Message / Inquiry</option><option value="2">I Want More Information</option><option value="sendinfo">I Need A Quote</option><option value="inform">I Have A Shipment</option><option value="available">I Have a Truck Available For A Shipment!</option></select><br><!-- CODE FOR sendinfo & inform--><label for="dateavail">Date Shipment Is Available:</label><input type="text" name="dateavail" id="dateavail" value="<?=$_SESSION['post']['dateavail']?>" /><label for="commod">Commodity:</label><input type="text" name="commod" id="commod" value="<?=$_SESSION['post']['commod']?>" /><label for="shipweight">Shipment Weight: </label><input type="text" name="shipweight" id="shipweight" value="<?=$_SESSION['post']['shipweight']?>" /><label for="dimensions">Dimensions:</label><input type="text" name="dimensions" id="dimensions" value="<?=$_SESSION['post']['dimensions']?>" /><!--<label for="tarpreq">Is A Tarp Required?: </label><label><input type="radio" name="tarpreq" value="yes" id="tarpreq_0" />Yes</label><label><input type="radio" name="tarpreq" value="no" id="tarpreq_1" />No</label><label><input type="radio" name="tarpreq" value="NA" id="tarpreq_2" />Unknown</label>--><!--<label for="eqrequest">Equipment To Ship On:</label><label><input type="checkbox" name="eqrequest" value="FB" id="eqrequest_0" />Flatbed</label><label><input type="checkbox" name="eqrequest" value="SD" id="eqrequest_1" />Step-Deck</label><label><input type="checkbox" name="eqrequest" value="V" id="eqrequest_2" />Dry Van</label><label><input type="checkbox" name="eqrequest" value="R" id="eqrequest_3" />Reefer</label><label><input type="checkbox" name="eqrequest" value="O" id="eqrequest_4" />Other/Special</label>--><!--CODE FOR INFORM--><label for="rate">Shipment Rate:</label><input type="text" name="rate" id="rate" value="<?=$_SESSION['post']['rate']?>" /><br><!--Code For available--><label for="mcnum">Motor Carrier (MC)#:</label><input type="text" name="mcnum" id="mcnum" value="<?=$_SESSION['post']['mcnum']?>" /><label for="proref">Reference# / Pro#:</label><input type="text" name="proref" id="proref" value="<?=$_SESSION['post']['proref']?>" /><!--<label for="eqavail">Equipment Available:</label><label><input type="radio" name="eqavail" value="FSD" id="eqavail_0" />Flat/Step</label><label><input type="radio" name="eqavail" value="Van" id="eqavail_1" />Van</label><label><input type="radio" name="eqavail" value="Reefer" id="eqavail_2" />Reefer</label><label><input type="radio" name="eqavail" value="Other" id="eqavail_3" />Other</label>--></form></div></body></html>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...