Jump to content

Chained Select Option to number of select boxes

jmr3460

By jmr3460
in Javascript Help

 Share

Recommended Posts

jmr3460 Regular Member

jmr3460

Posted
Posted

I have been reading through some of the postings from this site and some others. I have never really written any Javascript or AJAX but I know that I will need to learn. I am a little rushed for time or I would blindly search for solutions today, but I really need to get a simple solution (if there is one) and implement it today.

 

I have a form that is for t-shirts selecting 1 - 10. What ever number they select I want that number of select option boxes to appear below the number of t-shirt box with the sizes in them. I just want the same select option boxes with different values though. If there is a place where I can find this information please link me to it. Simply putting the question, if they pick 6 for number of t-shirts then 6 select option boxes will appear.

 

The main problem that is happening is at this time I have select option box with 6 in it and 6 select boxes below that one but people will fill out 3 t-shirts then will fill in more or less that the number that they selected and it is throwing off my database totals.

 

Thanks for any help that anyone can provide.

Mark

jmr3460 Regular Member

jmr3460

Posted
  • Author
Posted

OK this is what I have found so far.I need to find out how to convert javascript var to php $var

 

<html>
<form id="aform">
<select id="num_tshirts" size="1">
<option value="nothing" selected="selected">Number of T-shirts</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>

<script type="text/javascript">

var selectmenu=document.getElementById("num_tshirts")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing"){
  //window.open(chosenoption.value, "", "") //open target site (based on option's value attr) in new window


//This is where I think I need some help
//I need to convert javascript ( var chosenoption=this.options[this.selectedIndex] ) into a php variable $var
// I may have to look at my for(code)again



  <?php
  for(n=1;n<$var;n++){
  	echo "<select name=\"size".$var."\">
  				<option value=\"small\">small</option>
  				<option value=\"medium\">medium</option>
  				<option value=\"large\">large</option>
  				<option value=\"Xlarge\">Xlarge</option>
  				</select>";
}
}

</script>
</html>

jmr3460 Regular Member

jmr3460

Posted
  • Author
Posted

After doing more research I see that it would be harder to convert javascript to php. So now I am looking to (document.write) a select option box the number of times chosen with values rainging from 1 to the number selected from the first selected value.

jmr3460 Regular Member

jmr3460

Posted
  • Author
Posted

OK I have gotten this far. I can get this to print hello world how every many times I select in my select menu.

It will not give me the number of select menus I am going for and the original select option box disappears as well.

<html>
<form id="aform">
<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>

<script type="text/javascript">

var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing"){
	for(i=0;i<chosenoption.value;i++){
var myString;
myString = "<select name=\"t".i."_size\"> " +
"<option value=\"small\">Small</option>" +
"<option value=\"medium\">Medium</option>" +
"<option value=\"large\">Large</option>" +
"<option value=\"Xlarge\">Xlarge</option>" +
"</select>";
	document.write(myString);
}
}
}

</script>
</html>

Is there anyone that can help me.

jmr3460 Regular Member

jmr3460

Posted
  • Author
Posted

OK again, I have gotten this far now.

<html>
<form id="aform">
<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>

<script type="text/javascript">

var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
if (chosenoption.value!="nothing"){
document.write("you have chosen ");
document.write(chosenoption.value);
document.write("<br />");
	for(i=0;i<chosenoption.value;i++){
		document.write("<select name=\"t");
		document.write(i+1);
		document.write("_size\">");
		document.write("<option value=\"S\">Small</option>\n");
		document.write("<option value=\"M\">Medium</option>\n");
		document.write("<option value=\"L\">Large</option>\n");
		document.write("<option value=\"XL\">X Large</option>\n");
		document.write("<option value=\"XXL\">XX Large</option>\n");
		document.write("<option value=\"XXXL\">XXX Large</option>\n");
		document.write("</select>");
		document.write("<br /><br />");
}
}
}
</script>
</html>

Everything works except my original select list disappears and my browser seems to be looking for something else. I really don't want my original select list to disappear. Browser only stops running when I click my stop or big X button. Is that normal?

Psycho Prolific Member

Psycho

Posted
Posted

Just create all 10 select list and hide/show the appropriate number based upon user's selection.

 

<html>
<head>
<script type="text/javascript">

function showSizeOptions()
{
    var qty = document.getElementById('quantity').value;
    var shirtIdx = 1;

    while(document.getElementById('shirt_'+shirtIdx))
    {
        var divObj = document.getElementById('shirt_'+shirtIdx);
        var selObj = document.getElementById('aform').elements['size[]'][shirtIdx-1];

        divObj.style.visibility = (shirtIdx<=qty) ? 'visible' : 'hidden';
        if (shirtIdx>qty)
        {
            selObj.selectedIndex = 0;
        }
        shirtIdx++;
    }

    return;
}

</script>
</head>
<body>

<form id="aform">

Select a number:
<select name="quantity" id="quantity" onchange="showSizeOptions();">
<option value="nothing" selected="selected">Select a site</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>

<div id="shirt_1" style="visibility:hidden";>
T-Shirt 1:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_2" style="visibility:hidden";>
T-Shirt 2:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_3" style="visibility:hidden";>
T-Shirt 3:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_4" style="visibility:hidden";>
T-Shirt 4:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_5" style="visibility:hidden";>
T-Shirt 5:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_6" style="visibility:hidden";>
T-Shirt 6:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_7" style="visibility:hidden";>
T-Shirt 7:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_8" style="visibility:hidden";>
T-Shirt 8:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>
<div id="shirt_9" style="visibility:hidden";>
T-Shirt 9:
<select name="size[]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
<option value="XL">X Large</option>
<option value="XXL">XX Large</option>
<option value="XXXL">XXX Large</option>
</select>
</div>

</form>
</html>

Ang3l0fDeath Newbie

Ang3l0fDeath

Posted
Posted

OMG its you again with the name.

 

your really not a javascript person.  Anyways im sure this post is old, idk if you still want help or not.  But my question to you is.

How many shirt Options you got? 1-10?

How many shirt Sizes you got? 1-6? Does all your shirts come in all sizes or do some shirts only come in large while others come in all sizes?

How many other options of shirt selection are there?

 

Cause really you can make a nice javascript to handle all your data, and your selections.  Plus if you got pictures of your shirts, you could also add that into a javascript to display the different shirts each time you change the shirt selection and size as well.  Cause simply you and increase an image size or decrease it.

 

Also why are you having problems with the database / page?  what is cause the problems?  Is it like people selecting multi-checkboxs and you only want them to select one?  huh?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.