www.webdeveloper.com
Results 1 to 6 of 6

Thread: Textfields and Date help asap

  1. #1
    Join Date
    Jan 2007
    Posts
    39

    Textfields and Date help asap

    I'm creating a form, and need to have a bit on it which has a drop down for "No. of pieces". Each Piece needs a weight and dimension specified, so if 2 pieces are selected, 2 sets of boxes will appear. and so on.

    Could someone point me in the right direction as i'm unsure of what to google for!

    Also,
    I already have one javascript running on my page... will this interfere with it at all?

    I tried popping in a script that allows the current Date to be automatically inputted into the form, but it doesn't seem to work when it's places in my form.

    Any help appreciated. & i finish work at 5:30 so asap if possible

  2. #2
    Join Date
    Nov 2006
    Posts
    526
    And the code you have so far is...?

    For the textboxes you could either include all the possible checkboxed per the max number in the select field and then hide/unhide as appropriate or you could dynamically create the fields. I would go with the former. Then just run a script onchange of the select field. Assuming the value of the select field is the number of sets of text boxes you need the script would go something like this:

    Code:
    function showText(textNum) {
      var i=1;
      while (document.formname["box_a_"+i] && document.formname["box_b_"+i]) {
        if (i<=textNum) { dispVal = "none"; }
        else { dispVal = "inline"; }
        document.formname["box_a_"+i].style.display = dispVal;
        document.formname["box_b_"+i].style.display = dispVal;
        i++;
      }
    
    }

  3. #3
    Join Date
    Jan 2007
    Posts
    39
    Quote Originally Posted by mjdamato
    And the code you have so far is...?
    too long to copy & paste into here
    thanks for the help i'll see what i can come up with

  4. #4
    Join Date
    Nov 2006
    Posts
    526
    Quote Originally Posted by becka
    too long to copy & paste into here
    thanks for the help i'll see what i can come up with
    I meant just the code relating to your problems.

  5. #5
    Join Date
    Jan 2007
    Posts
    39
    How do i go about hiding/showing the weight/dimension boxes then? Based on what number is selected in the Pieces drop down?
    Also i'm presuming i will need another script for this, how do i get it to not clash with the existing one?
    Sorry you'll have to bare with me, i'm pretty new to all this.

    HTML Code:
    <center><table border="0" width="75%" id="table2">
    	<tr>
    		<td><b><font size="2">Origin Airport:</font></b> <font face="Tahoma">
    			<input type="text" name="T2" size="18" style="border: 1px solid #FF9933"></font><br>
    			<b><font size="2">Origin Port:&nbsp;&nbsp;&nbsp;&nbsp; </font></b>&nbsp;<font face="Tahoma"><input type="text" name="T2" size="18" style="border: 1px solid #FF9933"></font></td>
    		<td><b><font size="2">Dest. Country:</font></b> <font face="Tahoma">
    			<input type="text" name="T2" size="18" style="border: 1px solid #FF9933"></font><br>
    			<b><font size="2">Dest. Airport:</font></b>&nbsp;
    		<font face="Tahoma">
    			<input type="text" name="T2" size="18" style="border: 1px solid #FF9933"></font><br>
    			<b><font size="2">Dest. Port:</font></b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<font face="Tahoma">
    			<input type="text" name="T2" size="18" style="border: 1px solid #FF9933"></font></td>
    		<td><b><font face="Verdana" size="2">Pieces:</font></b><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<select size="1" name="D2" style="border: 1px solid #FF9933">
    			<option selected>Select...</option>
    			<option>1</option>
    			<option>2</option>
    			<option>3</option>
    			<option>4</option>
    			<option>5</option>
    		</select></font><br>
    			</td>
    	</tr>
    </table><br>
    <table border="1" width="75%">
    	<tr>
    		<td>			<b><font face="Verdana" size="2">Weight:</font></b><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br>
    			<b><font face="Verdana" size="2">Dimensions:</font></b><font face="Verdana">
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br></td>
    		<td>			<b><font face="Verdana" size="2">Weight:</font></b><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br>
    			<b><font face="Verdana" size="2">Dimensions:</font></b><font face="Verdana">
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br></td>
    		<td>			<b><font face="Verdana" size="2">Weight:</font></b><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br>
    			<b><font face="Verdana" size="2">Dimensions:</font></b><font face="Verdana">
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br></td>
    		<td>			<b><font face="Verdana" size="2">Weight:</font></b><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br>
    			<b><font face="Verdana" size="2">Dimensions:</font></b><font face="Verdana">
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br></td>
    		<td>			<b><font face="Verdana" size="2">Weight:</font></b><font face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br>
    			<b><font face="Verdana" size="2">Dimensions:</font></b><font face="Verdana">
    			<input type="text" name="T2" size="8" style="border: 1px solid #FF9933"></font><br></td>
    	</tr>
    </table>

  6. #6
    Join Date
    Nov 2006
    Posts
    526
    Scripts shouldn't clash unless you make them clash. You *could* have hunders of scripts on the same page if you really wanted to.

    Anyway, to show/hide the dimension fields here is one approach:

    1) Give each TD for the dimension fields an id. Something like: dim-1, dim-2, etc. You can name them anything you want, but there should be an incrementing value. Also, you should give the following style to the TD's: style="display:none;"

    2) For the "pieces" select field, give each option a value parameter with the "Select..." option having a value of 0 and then going from 1 to 5.

    3) In the "pieces" select field, give it an onchange trigger to the function that will be created. Let's say onchange="showDimensions(this.value);"

    4) Create the function:
    Code:
    function showDimensions(dimToShow) {
      for (i=1; i<6; i++) {
        displayVal = (i <= dimToShow) ? "" : "none";
        document.getElementById('dim-'+i).style.display = displayVal;
      }
    }

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