internet explorer - IE6 displays JavaScript error for below given function and error is also mentioned below -
i have function
function setbid(catid) { if(catid == 30) { document.getelementbyid('bannerid').value = 1; } else if(catid == 31){ document.getelementbyid('bannerid').value = 2; } else if(catid == 32){ document.getelementbyid('bannerid').value = 6; } } this function being called onchange event of select box.
now when value of select box changed ie throws me error saying
"document.getelementid(....)" null or not object..
now can infer this?
please help..
update
as per david's reply how can check existance before assignment of value field,? other browsers not display error, have bannerid field hidden field in document... should done?
below screen shot of error displayed onchange of select box 
update 2 update per answer of @haylem
<script> function setbid(catid) { var lookup = { '30' : 1, '31' : 2, '32' : 6 }; if (lookup.hasownproperty(catid)) { var el = document.getelementbyid('bannerid'); if (el) { el.value = lookup[catid]; } } /*if(catid == 30) { if(typeof(document.getelementbyid('bannerid')) == null ){ document.getelementbyid('bannerid').value = 1; } } else if(catid == 31){ document.getelementbyid('bannerid').value = 2; } else if(catid == 32){ document.getelementbyid('bannerid').value = 6; }*/ } </script> <div style="margin:0px auto"> <div class="instantprice-popup-bg"> <form name="instantpop" id="instantpop" action="" method="post" style="margin:0px; padding:0px" onsubmit=""> <input type="hidden" name="sessid" id="sessid" value="<?php echo $_get['oscsid'];?>"> <div class="instantprice"> <ul> <li class="text12pt" style="color:#ff0000; display:none;" id="appsize">for special low price on sizes on 30ft. wide , 10ft. height contact on sales@bannerbuzz.com.</li> <li class="text12pt" style="color:#ff0000; display:none;" id="vinylsize">please enter width upto 30 ft & height upto 5 ft vinyl signs/decals(posters).</li> <li class="col1">select product</li> <li class="col2"> <input type="hidden" name="price" id="price" value="<?php echo "15"; ?>" /> <input type="hidden" name="bannerid" id="bannerid" value="" /> <select name="product" class="dropdownfield" id="product" style="width: 180px;" onchange="javascript:setbid(document.getelementbyid('product').value);"> <option value="">select product</option> <?php while($result=mysql_fetch_object($sql_query)) { ?><option value="<?php echo $result->categories_id;?>" <?php if($_post['product'] == $result->categories_id) {?> selected="selected" <?php } ?>><?php echo $result->categories_name;?></option><?php } ?> </select> </li> <li class="col1">select size (in ft.)</li> <li class="col2"> <div class="sizebox" style="width:250px;"> <div class="sizebox col1"><input name="size_w" id="size_w" type="text" class="sizetextfield1" value="<?php if(isset($_request['size_w'])){ echo $_request['size_w']; } else { echo "2"; } ?>" ></div> <div class="sizebox col2"><img src="images/homepage/up-arrow.jpg" width="12" height="9" border="0" align="top" onclick="increasecounter('size_w')" /><img src="images/homepage/down-arrow.jpg" width="12" height="9" border="0" onclick="decreasecounter('size_w');" /></div> <div class="sizebox col3" style="width:35px;">width</div> <div class="sizebox col1"><input name="size_h" id="size_h" type="text" class="sizetextfield1" value="<?php if(isset($_request['size_h'])){ echo $_request['size_h']; } else { echo "2"; } ?>" style="margin-left:8px" ></div> <div class="sizebox col2"><img src="images/homepage/up-arrow.jpg" width="12" height="9" border="0" align="top" onclick="increasecounter('size_h');" /><img src="images/homepage/down-arrow.jpg" width="12" height="9" border="0" onclick="decreasecounter('size_h');" /></div> <div class="sizebox col3" style="width:35px;"> height</div> <input name="size" id="size" type="hidden" value="<?php echo $_request['size_h'].'x'.$_request['size_w']; ?>"> </div> </li> <li class="col1">select quantity</li> <li class="col2"> <select id="qty" name="qty" > <?php for($i=1;$i<=100;$i++) { ?> <option value="<?php echo $i;?>" <?php if($_post['qty'] == $i) {?> selected="selected" <?php } ?>><?php echo $i;?></option> <?php } ?> </select> </li> <li class="col1">select shipping</li> <li class="col2"> <select id="shipping_method" name="shipping_method" class="dropdownfield" > <option value="">select shipping</option> <option value="standard" <?php if($_post['shipping_method'] == 'standard') {?> selected="selected" <?php } ?>>standard (7 - 12 days proof)</option> <option value="expedited"<?php if($_post['shipping_method'] == 'expedited') {?> selected="selected" <?php } ?>>expedited (5 work days proof)</option> </select> </li> <li class="col1" id="sidehead">two side banner</li> <li class="col2" id="sideval"> <input type="checkbox" id="side" name="side" value="1" /> </li> <li class="col1">product price</li> <li class="col2"><span class="text15pt" id="total_display">$0</span> <input type="hidden" id="total" name="total" class="textfield" value="15" readonly="readonly" style="width:60px;"/> </li> <li class="col1">shipping cost</li> <li class="col2"><span class="text15pt" id="shipping_display">$0</span> <input type="hidden" id="shipping" name="shipping" class="textfield" value="" readonly="readonly" style="width:60px;" /> </li> <li class="bannerprice" id="grand_total_display">total price : $0 </li><input type="hidden" id="grand_total" name="grand_total" value="" readonly="readonly" style="width:60px;" /> <li style="float:none; text-align:center"> <input type="submit" class="getprice-btn" name="getprice" value="" /> </li> <li class="text12pt">final price, no hidden charges</li> </ul> <input type="hidden" name="getpriceclick" value="1" /> </div> </form> </div> </div>
rewrite as:
function setbid(catid) { var lookup = { '30' : 1, '31' : 2, '32' : 6 }; if (lookup.hasownproperty(catid)) { var el = document.getelementbyid('bannerid'); if (el) { el.value = lookup[catid]; } } } and make sure there element id attribute exactly written bannerid.
the function give different yours:
- using lookup table values instead of if chains (especially if add values later)
- doing element lookup in 1 part of code instead of duplicating it
- checking element's existence
edit update2:
note directly relevant problem, but:
- you should rather script tag in
<head>section - you should rather use progressive enhancement react events instead of mangling html , javascript code. use event hooks instead.
also check rendered page's source code see if elements not eaten renderer because of a malformation, or php code.
edit:
if test following, works fine:
<script> function setbid(catid) { var lookup = { '30' : 1, '31' : 2, '32' : 6 }; if (lookup.hasownproperty(catid)) { var el = document.getelementbyid('bannerid'); if (el) { el.value = lookup[catid]; alert('done [' + el.value + ']'); } } } </script> <div style="margin:0px auto"> <div class="instantprice-popup-bg"> <form name="instantpop" id="instantpop" action="" method="post" style="margin:0px; padding:0px" onsubmit=""> <input type="hidden" name="sessid" id="sessid" value="<?php echo $_get['oscsid'];?>"> <div class="instantprice"> <ul> <li class="text12pt" style="color:#ff0000; display:none;" id="appsize">for special low price on sizes on 30ft. wide , 10ft. height contact on sales@bannerbuzz.com.</li> <li class="text12pt" style="color:#ff0000; display:none;" id="vinylsize">please enter width upto 30 ft & height upto 5 ft vinyl signs/decals(posters).</li> <li class="col1">select product</li> <li class="col2"> <input type="hidden" name="price" id="price" value="15" /> <input type="hidden" name="bannerid" id="bannerid" value="" /> <select name="product" class="dropdownfield" id="product" style="width: 180px;" onchange="javascript:setbid(document.getelementbyid('product').value);"> <option value="">select product</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="30">30</option> <option value="31">31</option> <option value="32">32</option> </select></li> </ul> <input type="hidden" name="getpriceclick" value="1" /> </div> </form> </div> </div> so have screwing elements. i'd suspect going wrong in php code , producing malformed output.
Comments
Post a Comment