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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...