www.webdeveloper.com
Results 1 to 3 of 3

Thread: Multi dropdown not working in IE

  1. #1
    Join Date
    Nov 2011
    Posts
    16

    Multi dropdown not working in IE

    Hello,

    I have a dependent drop down system. You select from the first drop down which then displays options from the second which displays options from the third etc and finally you click the button and it displays a price.

    It works fine in Firefox and Chrome etc but not in IE.

    Code:
    <html>
    <head>
    <script>
    function texter()
    {
    var textField;
    textField = combo_4.value;
    textFieldLength = combo_4.value.length;
    
    if (textFieldLength==0)
    {
    combo_4.value=prompt("Please enter something","");
    }
    else
    { 
    result.innerHTML = textField;
    }
    
    }
    
    	data_1 = new Option("Blue", "");
    	data_1_1 = new Option("Small", "");
    	data_1_1_1 = new Option("600", "");
    	data_1_1_1_1 = new Option("1 sided","")
    		data_1_1_1_1_1 = new Option("New Customer","The total cost to you is &pound;187.");
    
        displaywhenempty=""
        valuewhenempty="<strong>Please choose an option from every dropdown</strong>"
    
        displaywhennotempty=""
        valuewhennotempty="<strong>Please choose an option from every dropdown</strong>"
    
    
    function change(currentbox) {
    	numb = currentbox.id.split("_");
    	currentbox = numb[1];
    
        i=parseInt(currentbox)+1
    
    while (document.getElementById("combo_"+i)) {
    son = document.getElementById("combo_"+i);
    
    for (m=son.options.length-1; m>0; m--) son.options[m]=null;
    
    son.options[0]=new Option(displaywhenempty,valuewhenempty);
    i++;
    }
    
    stringa='data';
    i=0;
    while (document.getElementById("combo_"+i)) {
    stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
    if (i==currentbox) break;
    i++;
    }
    
    
    
        following=parseInt(currentbox)+1
    
      if (document.getElementById("combo_"+following)) {
    son = document.getElementById("combo_"+following);
    stringa=stringa+"_";
    i=0;
    while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
    
    if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
    if (eval("typeof("+stringa+"1)=='undefined'"))
    son.options[0]=new Option(displaywhenempty,valuewhenempty);
    else
    son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
    else
    son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
    i++;
    }
    
    i=1;
    combostatus='';
    cstatus=stringa.split("_");
    while (cstatus[i]) {
    combostatus=combostatus+cstatus[i];
    i++;
    }
    return combostatus;
    }
    }
    
    
    function go(elementName){
    var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
    if(newUrl.indexOf("www")>=0){
    location.href=newUrl;
    }
    }
    
    </script>
    </head>
    <body>
    
    
    <form>
    
    <table align="center" width="500" cellspacing="6" cellpadding="6">
    <tr><td class="steps2"><select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
    <option selected="selected" value="value1"></option>
    <option value="value2">Blue</option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
    	<option value="value1">  </option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    	<option value="value1">  </option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
    <option value="value1">  </option></select></td></tr
    <tr><td class="steps2"><select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
    <option value="value1">  </option></select></td></tr>
    
    <tr><td><input type= "button" value = "Get your quote now" onclick = "texter()"></td></tr>
    
    <tr><td><div class="result" id="result"></div></td></tr>
    
    
    </table>
    
    </form>
    
    </body>
    </html>
    Any help would be appreciated.

    Thanks

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    Code:
    <html>
    <head>
    <script>
    function texter(frm){
     var textField;
     textField = frm['combo_4'].value;
     textFieldLength = frm['combo_4'].value.length;
     if (textFieldLength==0){
      frm['combo_4'].value=prompt("Please enter something","");
     }
     else {
      result.innerHTML = textField;
     }
    
    }
    
    	data_1 = new Option("Blue", "");
    	data_1_1 = new Option("Small", "");
    	data_1_1_1 = new Option("600", "");
    	data_1_1_1_1 = new Option("1 sided","")
    		data_1_1_1_1_1 = new Option("New Customer","The total cost to you is &pound;187.");
    
        displaywhenempty=""
        valuewhenempty="<strong>Please choose an option from every dropdown</strong>"
    
        displaywhennotempty=""
        valuewhennotempty="<strong>Please choose an option from every dropdown</strong>"
    
    
    function change(currentbox) {
    	numb = currentbox.id.split("_");
    	currentbox = numb[1];
    
        i=parseInt(currentbox)+1
    
    while (document.getElementById("combo_"+i)) {
    son = document.getElementById("combo_"+i);
    
    for (m=son.options.length-1; m>0; m--) son.options[m]=null;
    
    son.options[0]=new Option(displaywhenempty,valuewhenempty);
    i++;
    }
    
    stringa='data';
    i=0;
    while (document.getElementById("combo_"+i)) {
    stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
    if (i==currentbox) break;
    i++;
    }
    
    
    
        following=parseInt(currentbox)+1
    
      if (document.getElementById("combo_"+following)) {
    son = document.getElementById("combo_"+following);
    stringa=stringa+"_";
    i=0;
    while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
    
    if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
    if (eval("typeof("+stringa+"1)=='undefined'"))
    son.options[0]=new Option(displaywhenempty,valuewhenempty);
    else
    son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
    else
    son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
    i++;
    }
    
    i=1;
    combostatus='';
    cstatus=stringa.split("_");
    while (cstatus[i]) {
    combostatus=combostatus+cstatus[i];
    i++;
    }
    return combostatus;
    }
    }
    
    
    function go(elementName){
    var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
    if(newUrl.indexOf("www")>=0){
    location.href=newUrl;
    }
    }
    
    </script>
    </head>
    <body>
    
    
    <form>
    
    <table align="center" width="500" cellspacing="6" cellpadding="6">
    <tr><td class="steps2"><select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
    <option selected="selected" value="value1"></option>
    <option value="value2">Blue</option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
    	<option value="value1">  </option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    	<option value="value1">  </option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
    <option value="value1">  </option></select></td></tr
    <tr><td class="steps2"><select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
    <option value="value1">  </option></select></td></tr>
    
    <tr><td><input type= "button" value = "Get your quote now" onclick = "texter(this.form)"></td></tr>
    
    <tr><td><div class="result" id="result"></div></td></tr>
    
    
    </table>
    
    </form>
    
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2011
    Posts
    16
    Quote Originally Posted by vwphillips View Post
    Code:
    <html>
    <head>
    <script>
    function texter(frm){
     var textField;
     textField = frm['combo_4'].value;
     textFieldLength = frm['combo_4'].value.length;
     if (textFieldLength==0){
      frm['combo_4'].value=prompt("Please enter something","");
     }
     else {
      result.innerHTML = textField;
     }
    
    }
    
    	data_1 = new Option("Blue", "");
    	data_1_1 = new Option("Small", "");
    	data_1_1_1 = new Option("600", "");
    	data_1_1_1_1 = new Option("1 sided","")
    		data_1_1_1_1_1 = new Option("New Customer","The total cost to you is &pound;187.");
    
        displaywhenempty=""
        valuewhenempty="<strong>Please choose an option from every dropdown</strong>"
    
        displaywhennotempty=""
        valuewhennotempty="<strong>Please choose an option from every dropdown</strong>"
    
    
    function change(currentbox) {
    	numb = currentbox.id.split("_");
    	currentbox = numb[1];
    
        i=parseInt(currentbox)+1
    
    while (document.getElementById("combo_"+i)) {
    son = document.getElementById("combo_"+i);
    
    for (m=son.options.length-1; m>0; m--) son.options[m]=null;
    
    son.options[0]=new Option(displaywhenempty,valuewhenempty);
    i++;
    }
    
    stringa='data';
    i=0;
    while (document.getElementById("combo_"+i)) {
    stringa=stringa+'_'+document.getElementById("combo_"+i).selectedIndex;
    if (i==currentbox) break;
    i++;
    }
    
    
    
        following=parseInt(currentbox)+1
    
      if (document.getElementById("combo_"+following)) {
    son = document.getElementById("combo_"+following);
    stringa=stringa+"_";
    i=0;
    while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
    
    if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
    if (eval("typeof("+stringa+"1)=='undefined'"))
    son.options[0]=new Option(displaywhenempty,valuewhenempty);
    else
    son.options[0]=new Option(displaywhennotempty,valuewhennotempty);
    else
    son.options[i]=new Option(eval(stringa+i+".text"),eval(stringa+i+".value"));
    i++;
    }
    
    i=1;
    combostatus='';
    cstatus=stringa.split("_");
    while (cstatus[i]) {
    combostatus=combostatus+cstatus[i];
    i++;
    }
    return combostatus;
    }
    }
    
    
    function go(elementName){
    var newUrl=document.forms[0].elements[elementName].options[document.forms[0].elements[elementName].selectedIndex].value;
    if(newUrl.indexOf("www")>=0){
    location.href=newUrl;
    }
    }
    
    </script>
    </head>
    <body>
    
    
    <form>
    
    <table align="center" width="500" cellspacing="6" cellpadding="6">
    <tr><td class="steps2"><select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
    <option selected="selected" value="value1"></option>
    <option value="value2">Blue</option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
    	<option value="value1">  </option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    	<option value="value1">  </option>
    </select></td></tr>
    <tr><td class="steps2"><select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
    <option value="value1">  </option></select></td></tr
    <tr><td class="steps2"><select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
    <option value="value1">  </option></select></td></tr>
    
    <tr><td><input type= "button" value = "Get your quote now" onclick = "texter(this.form)"></td></tr>
    
    <tr><td><div class="result" id="result"></div></td></tr>
    
    
    </table>
    
    </form>
    
    </body>
    </html>
    Yes, that works. Well done.

    Thanks.

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