www.webdeveloper.com
Results 1 to 10 of 10

Thread: Form Help If and or ELSE

  1. #1
    Join Date
    Sep 2005
    Posts
    5

    Form Help If and or ELSE

    Wondering if anyone knows a way to make and argument
    like IF and or else from excel work utilising HTml?
    or if someoen can help me using JAVA.

    this has all come about due to the request to turn a current Excel form into a more widely useable format!

    I hope you all understand what im asking
    Best regards
    Technane

  2. #2
    Join Date
    Sep 2005
    Posts
    5
    Should of posted this before,
    a sample of the form code this question relates to.

    What I want to do is if the user select's "other" first then the subsequent text box will display "please state stencil thickness" id also like to make it so in all other conditions this box is disabled

    Code:
    <form name="thick" >
          <select name="stencthick" size="1">
            <option>0.100MM (0.004&quot;)</option>
            <option>0.125MM (0.005&quot;)</option>
            <option>0.150MM (0.006&quot;)</option>
            <option>0.200MM (0.008&quot;)</option>
            <option>0.250MM (0.010&quot;)</option>
            <option>other</option>
            <option selected> </option>
            </select>
      if other
      <input name="stencthickother" type="text" value="please state stencil thickness " size="40">  </form>

  3. #3
    Join Date
    Sep 2005
    Posts
    180
    1. it sound like yu want 1 input form & then if yuzer select "other" from it, yu want tu put up a drop box for him tu select thikness.
    2. input forms & drop boxes R part af html. Wot yu du wen yuzer klik or submit is javaskript.
    3. but yu want tu make a drop box at run time based on input from prior form.
    thats "dynamik"...yu gotta get a lot av speerens with javaskripts b4 yu tri that.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Content-Script-Type" content="text/javascript">
    <meta name="Content-Style-Type" content="text/css">
    <title>Conforming HTML 4.01 Template</title>
    <script type="text/javascript">
    function checkpick(sel)
    {
      if (sel.value == "other")
        document.getElementById("stencthickother").style.visibility="visible"
      else
        document.getElementById("stencthickother").style.visibility="hidden"
    }
    </script>
    </head>
    <body>
    <form name="thick" >
      <select name="stencthick" size="1" onchange="checkpick(this)">
        <option selected>Pick one</option>
        <option value="0.100MM">0.100MM (0.004&quot;)</option>
        <option value="0.125MM">0.125MM (0.005&quot;)</option>
        <option value="0.150MM">0.150MM (0.006&quot;)</option>
        <option value="0.200MM">0.200MM (0.008&quot;)</option>
        <option value="0.250MM">0.250MM (0.010&quot;)</option>
        <option value="other">other</option>
      </select>
      <input name="stencthickother" id="stencthickother" style="visibility:hidden" 
             type="text" value="please state stencil thickness" size="40">
    </form>
    </body>
    </html>
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Sep 2005
    Posts
    5
    many thanks for your help ray but still stumbling
    as i forgot to mention i need this to work on more than one form on the page
    see code for how i assumed it would opperate but as you can see no dice
    am i missing this method or should i be using one fucntion and using id's to instigate select values? arggghhh can you tell im new to JAVAscript!
    as to me the code below looks like it should work but i cant ascertain why it doesn't!

    HTML Code:
    <HTML>
    <head>
    <script type="text/javascript">
    function james1(sel)
    {
      if (sel.value == "other")
        document.getElementById("stencthickother").style.visibility="visible"
    	
      else
        document.getElementById("stencthickother").style.visibility="hidden"
    		
    }
    
    function james2(sel)
    {
      if (sel.value == "other")
        document.getElementById("machother").style.visibility="visible"
    	
      else
        document.getElementById("machother").style.visibility="hidden"
    		
    }
    </script>
    </head>
    <form name="thick" >
      <select name="stencthick" size="1" onchange="james1(this)">
        <option selected>Pick one</option>
        <option value="0.100MM">0.100MM (0.004&quot;)</option>
        <option value="0.125MM">0.125MM (0.005&quot;)</option>
        <option value="0.150MM">0.150MM (0.006&quot;)</option>
        <option value="0.200MM">0.200MM (0.008&quot;)</option>
        <option value="0.250MM">0.250MM (0.010&quot;)</option>
        <option value="other">other</option>
      </select>
      <input name="stencthickother" id="stencthickother" style="visibility:hidden" 
             type="text" value="please state stencil thickness" size="40">
    </form>
    <form name="Machine" >
          <select name="Machine" size="1" onchange="james2(this)">
    	  	<option selected>Pick one</option>
            <option>EKRA E1</option>
            <option>EKRA E3</option>
            <option>EKRA E5</option>
            <option>DEK 240</option>
            <option>DEK 245</option>
            <option>DEK 247</option>
            <option>DEK 248</option>
            <option>DEK 249</option>
            <option>DEK 250</option>
            <option>DEK 260</option>
            <option>DEK 265</option>
            <option>MPM AP25</option>
            <option>MPM AP27</option>
            <option>MPM AP29</option>
            <option>MPM 2000</option>
            <option>MPM 3000</option>
            <option>SMTECH 100</option>
            <option>SMTECH 300</option>
            <option>SMTECH 400</option>
            <option>SMTECH 500</option>
            <option>SMTECH 100</option>
            <option>SPEEDPRINT A</option>
            <option>SPEEDPRINT B</option>
            <option>FUJI GSP 1</option>
            <option>FUJI GSP 2</option>
            <option>FUJI 641</option>
            <option>REPRINT A</option>
            <option>REPRINT COMPACT 29</option>
            <option>ESSEMTECH SP002</option>
            <option>ESSEMTECH SP003</option>
            <option>KISTECH </option>
            <option>OTHER</option>
            </select>
          <input name="machother" id="machother" style="visibility:hidden" 
             type="text" value="please state machine type/model" size="40">
        </form>
    
    </html>

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    1. You haven't set values for the options.
    2. The string comparison is case sensitive.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  7. #7
    Join Date
    Sep 2005
    Posts
    5
    thanks again Ray got it cracked now
    even managed to figure out dif options giving dif results into the text box's

    now for my next question
    I want to have the user input into a text field at the top of page and have this written into the Html further down way i thought best to do this was

    in head of page between script
    var name=document.getElementById("name");

    then in the body of page in between script tags again
    document.writeln(name);

    all i get is Null displayed? any ideas?

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Normally you'd either use innerHTML or the DOM (add a node) for that. I'm not sure what your intent is above but I suspect it might really be:

    var name=document.getElementById("name").value
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  9. #9
    Join Date
    Sep 2005
    Posts
    5
    Damn sorry maybe didnt explain well enough
    heres my complete code you can see at the top of the form
    there are three box's callled customer, order number and part number
    and further down under technical specification. these fields need ot be repeated
    this has come about so you can easily split the two parts into our technical section and order section and still keep full traceablity
    instead of asking the user to infill twice id rather anything typed into the top fields auto filled to the lower part. is there a way of doing this without needing a page reload to submit. I have removed some of the larger selects to save on post space

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    function james1(sel)
    {
    if (sel.value == "Other")
    document.getElementById("stencthickother").style.visibility="visible"
    else
    document.getElementById("stencthickother").style.visibility="hidden"
    	
    }
    function repeat(sel)
    {
      if (sel.value == "Yes") 
        document.getElementById("stepyes").style.visibility="visible"
       	
      else
        document.getElementById("stepyes").style.visibility="hidden"
    		
    }
    
    function JAMES3(sel)
    {
      if (sel.value == "OTHER") 
        document.getElementById("imageother").style.visibility="visible"
        
      else
        document.getElementById("imageother").style.visibility="hidden"
      	
    	if (sel.value == "OFFSETT FRONT EDGE")
    document.getElementById("imageoffsett").style.visibility="visible"
    
    else
    document.getElementById("imageoffsett").style.visibility="hidden"
    		
    }
    function MULTI(sel)
    {
    if (sel.value == "Yes")
    document.getElementById("multiyes").style.visibility="visible"
      else
    document.getElementById("multiyes").style.visibility="hidden"
    }
    {
    var cust=document.getElementById("customer").value
    var order=document.getElementById("ordernumber").value
    var part=document.getElementById("partno").value
    }
    </script>
    <style type="text/css">
    <!--
    .style1 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    .style3 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: x-large; }
    .style4 {
    	color: #FF0000;
    	font-weight: bold;
    }
    -->
    </style>
    </head>
    
    <body>
    <table width="734"  border="0">
    </table>
    <table width="735" height="1172" border="0">
      <tr>
        <td height="23" colspan="2" align="center" valign="middle" bgcolor="#999933"><span class="style3">TSL ORDER FORM </span></td>
      </tr>
      <tr>
        <td width="240" align="left" valign="top" class="style1">CUSTOMER</td>
        <td width="485" align="left" valign="top"><form name="customer" >
          <input name="customer" type="text" id="customer" value="Please give your company name " size="40">
        </form></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">ORDER NO. </td>
        <td align="left" valign="top"><input name="ordernumber" type="text" id="ordernumber" value="please state your order number" size="40"></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">PART NO. </td>
        <td align="left" valign="top"><input name="partno" type="text" id="partno" value="please state your part number" size="40"></td>
      </tr>
      <tr>
        <td colspan="2" align="left" valign="top" class="style1">DELIVERY ADDRESS </td>
      </tr>
      <tr>
        <td colspan="2" align="left" valign="top"><form name="form2" method="post" action="">
          <textarea name="textarea" cols="100" rows="5"></textarea>
        </form></td>
      </tr>
      <tr>
        <td colspan="2" align="left" valign="top" class="style1">INVOICE ADDRESS IF DIFFERENT FROM DELIVERY ADDRESS </td>
      </tr>
      <tr>
        <td colspan="2" align="left" valign="top"><textarea name="textarea" cols="100" rows="5"></textarea></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">TEL NO. </td>
        <td align="left" valign="top"><input name="textfield" type="text" size="40"></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">FAX NO </td>
        <td align="left" valign="top"><input name="textfield" type="text" size="40"></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">TECHNICAL CONTACT. </td>
        <td align="left" valign="top" class="style1"><input name="textfield" type="text" size="40"></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">DESPATCH.</td>
        <td align="left" valign="top"><form name="form3" method="post" action="">
          <input name="datefield" type="date" id="datefield">    
                            </form></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">DELIVERY.</td>
        <td align="left" valign="top"><input name="datefield" type="date" id="datefield"></td>
      </tr>
      <tr bgcolor="#3366FF">
        <td colspan="2" align="left" valign="top" class="style3"><div align="center">TECHNICAL DETAILS </div></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">Customer</td>
        <td align="left" valign="top">
    	<script language="JavaScript">
    <!-- hide me
    document.writeln(cust);
    // end hiding -->
    </script></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">Order No. </td>
        <td align="left" valign="top"><script language="JavaScript">
    <!-- hide me
    document.writeln(order);
    // end hiding -->
    </script></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">Part No.</td>
        <td align="left" valign="top">
    	<script language="JavaScript">
    <!-- hide me
    document.writeln(part);
    // end hiding -->
          </script>
        </td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">FILENAME</td>
        <td align="left" valign="top"><form name="form5" method="post" action="">
          <input name="textfield" type="text" value="Please type the name of your file" size="60">
        </form></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">TEXT REQUIRED ON STENCIL </td>
        <td align="left" valign="top"><form name="form5" method="post" action="">
          <input name="textfield" type="text" value="please type any text you require on your stencil" size="60">
        </form></td>
      </tr>
      <tr>
        <td height="26" align="left" valign="top" class="style1">STENCIL TYPE </td>
        <td align="left" valign="top"><form name="stenctype" >
          <select name="stenctype">
    	<option selected>Pick one</option>        
    	<option>PRECISION ETCH S/S</option>
            <option>LASER CUT S/S</option>
            <option>NICKEL ELECTROFORM</option>
            <option>MULTI LEVEL E/F</option>
            <option>LASER CUT NICKEL E/F</option>
                                          </select>
    </form></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">STENCIL THICKNESS </td>
        <td align="left" valign="top">
      <form name="thick" >
      <select name="stencthick" size="1" onchange="james1(this)">
        <option selected>Pick one</option>
        <option value="0.100MM">0.100MM (0.004&quot;)</option>
        <option value="0.125MM">0.125MM (0.005&quot;)</option>
        <option value="0.150MM">0.150MM (0.006&quot;)</option>
        <option value="0.200MM">0.200MM (0.008&quot;)</option>
        <option value="0.250MM">0.250MM (0.010&quot;)</option>
        <option value="Other">Other</option>
      </select>
      <input name="stencthickother" id="stencthickother" style="visibility:hidden" 
             type="text" value="please state stencil thickness" size="40">
    </form>
    	</td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">IMAGE VIEW </td>
        <td align="left" valign="top"><form name="image" >
          <select name="image">
            <option selected>Pick one</option>
    		<option>SQUEEGEE SIDE</option>
            <option>NON SQUEEGEE SIDE</option>
                        </select>
            </form></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">SQUEEGEE DIRECTION </td>
        <td align="left" valign="top"><form name="squeegeedir">
          <select name="squeegeedir">
            <option selected>Pick one</option>
    		<option>LONGEST LENGTH OF IMAGE</option>
            <option>SHORTEST LENGTH OF IMAGE</option>
            <option>45&deg; ROTATION</option>
            </select>    
                </form></td>
      </tr>
      <tr>
        <td align="left" valign="top" class="style1">STEP&amp;REPEAT</td>
        <td align="left" valign="top"><form name="step">
          <select name="step" size="1" onchange="repeat(this)">
            <option selected>Pick one</option>
    		<option>Yes</option>
            <option>No</option>
            </select> 
           <input name="stepyes" type="text" class="style4" id="stepyes" style="visibility:hidden" value= "please supply a panel drawing" size="40" >
        </form></td>
      </tr>
      <tr>
          </tr>
      <tr>
        <td align="left" valign="top" class="style1">FIDUCIALS    </td>
        <td align="left" valign="top"><form name="Fiducials">
          <select name="Fiducials">
            <option selected>Pick one</option>
    		<option>SQUEEGEE SIDE</option>
            <option>NON SQUEEGEE SIDE</option>
            <option>FULLY CUT/ETCHED</option>
            <option>NOT REQUIRED</option>
                                    </select>
            </form></td>
      </tr>
      <tr>
        <td height="26" align="left" valign="top" class="style1">MULTIPLE IMAGES </td>
        <td align="left" valign="top"><form name="multiimage" >
          <select name="multiimage" size="1" onchange="MULTI(this)">
            <option selected>Pick one</option>
    		<OPTION>Yes</OPTION>
            <option>No</option>
                  </select>
          <input name="multiyes" type="text" class="style4" id="multiyes" style="visibility:hidden" value= "PLEASE STATE AMOUNT OF PCB'S REQUIRED" size="50" ></form></td></tr>
    </table>
    </body></html>

  10. #10
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Here's an example sans table.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    
    <style type="text/css">
    label {
      display:block;
      width: 10em;
      text-align:right;
      margin: 0 1em 0 0;
      float:left;
    }
    div input {
      display:block;
      margin:0 0 0 14em;
    }
    </style>
    
    <script type="text/javascript">
    function copyfromto(str, tbid)
    {
      document.getElementById(tbid).value=str
    }
    </script>
    
    </head>
    
    <body>
    <form action="#" method="get">
      <fieldset>
        <legend>Form Inputs</legend>
        <div><label for="customer">CUSTOMER</label>
        <input name="customer" type="text" id="customer" size="40"
               value="Please give your company name " tabindex="1"
               onfocus="this.value=''"
               onblur="copyfromto(this.value, 'cust2')"></div>
        <div><label for="ordernumber">ORDER NO.</label>
        <input name="ordernumber" type="text" id="ordernumber" size="40" 
               value="please state your order number" tabindex="2"
               onfocus="this.value=''" 
               onblur="copyfromto(this.value, 'order2')"></div>
        <div><label for="partno">PART NO. </label>
        <input name="partno" type="text" id="partno" size="40" 
               value="please state your part number" tabindex="3"
               onfocus="this.value=''" 
               onblur="copyfromto(this.value, 'partno2')"></div>
      </fieldset>
      <fieldset>
        <legend>Repeated Values</legend>
        <table>
          <tr><th>Customer</th><td><input type="text" id="cust2" readonly></td></tr>
          <tr><th>Order No.</th><td><input type="text" id="order2" readonly></td></tr>
          <tr><th>Part No.</th><td><input type="text" id="partno2" readonly></td></tr>
        </table>
      </fieldset>
    </form>
    </body>
    </html>
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles