javascript works perfectly in IE and firefox but fails in Chrome and Safari

[ozalkl]

hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone.

i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on.

below is the Java-script code along with my form code too

javascript:

<script type="text/javascript">
 
function nextSelect(o) {
 
    if (o.value == '0') {
        var next = o.nextSibling;
        while (next && next.nodeName != 'SELECT') {
            next = next.nextSibling;
        }
        next.length = 0;
 
        return;
    }
    var d = document;
 
    var useSelect = d.getElementById(o.name + '_' + o.value);
 
    if (!useSelect) {
        alert('Unknown id: ' + o.name + '_' + o.value);
        return;
    }
 
    var copy = useSelect.cloneNode(true);
    copy.style.display = 'inline';
 
    var next = o.nextSibling;
    while (next && next.nodeName != 'SELECT') {
        next = next.nextSibling;
    }
    next.parentNode.insertBefore(copy, next);
    next.parentNode.removeChild(next);
}
</script>

my form:

<div style="display: none;">
 
<!-- ##### First Selection ####### --> 
 
<select name="second" id="first_dp" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38">2 3/8'</option>
<option value="dp_4">4'</option>
</select>
 
<select name="second" id="first_hw" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="hw_3_12">3 1/2'</option>
<option value="hw_4">4'</option>
</select>
 
<!-- ####### 2nd Selection ####### --> 
 
<select name="third" id="second_dp_2_38" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38_4.85">4.85 lbs/ft</option>
<option value="dp_2_38_6.65">6.65 lbs/ft</option>
</select>
<select name="third" id="second_dp_2_78" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_78_6.85">6.85 lbs/ft</option>
<option value="dp_2_78_10.4">10.4 lbs/ft</option>
</select>
 
>>>>>>and so on till 3rd selection<<<<<<<<<
 
</div>
 
<form action="pdfHandle.php" method="post" id="pdfsearch">
<fieldset>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="142" height="146">
                <p>
            Type:<br />
            Size:<br />
            Weight:<br />
        </td>
        <td width="266"><select name="first" onclick="nextSelect(this);">
          <option value="0">Choose</option>
          <option value="dp">Drill Pipe</option>
          <option value="hw">Heavy Weight</option>
          </select><br/>
          <select name="select">
          </select>
          <br/>
          <select name="select">
          </select>
          <br/>
          <select name="select">
          </select>
 
       </td>
    </tr>
  </table>
    <p>
      <input type="submit" name="submit" id="submit" value="Create PDF" />
     <input type="reset" value="Reset Selection" /> 
    </p>
</fieldset>
</form>

i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps

i thank you for viewing this post.

[rahuljaiswal1987]

@ozalkl
I don't know whether you have enabled java script or not. Because in my machine it is working fine in chrome. But one thing is weird that 1st time wen m selecting in 1st selection box the 2nd one remain unchanged i.e. without any entry. And 2nd time when i am selecting again in 1st selection box then only 2nd one is being activated.

Regards,
Rahul

[ozalkl]

hi Rahul, yes i have the jscript enabled in chrome, the concept of this form selection is as follow:

once you select the 1st selection option then only the 2nd level selection will appair with a depending option based on the 1st selection. that 2nd selection is set in the Div container, while the jscript is calling the right selection to match the above option which we selected earlier.

is there anything i need to change in my javascript coding or i need to add additional codes in order to make my script friendly with Chrome n Safari...