Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    Good Morning. 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!

    Code:
    <script type="text/javascript">
    onload = function(e) {
    //hide everything	
      	document.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"]["subject"].onchange = function (e) {
    //show subject#3=sendinfo	
    	e.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=inform
    	e.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=available	
    	e.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>

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I apologize but I missed the final line of hide javascript code. Here is the correctly reflected code. (to hide the checkbox for the final subject also)

    Code:
    <script type="text/javascript">
    onload = function(e) {
    //hide everything	
      	document.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=sendinfo	
    	e.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=inform
    	e.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=available	
    	e.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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •