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
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++;
}
}
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.
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;
}
}
Reply With Quote
Originally Posted by mjdamato
Bookmarks