Js OnChange not works in IE also Firefox

[lord_aragon]

please watch the demo of my web application troubles

Working fine on Opera
http://www.4shared.com/file/83681460...emo_Opera.html

Some event not working in Firefox
http://www.4shared.com/file/83681410...9/demo_ff.html

IE is the worst browser i tested with javascript
http://www.4shared.com/file/83681435...4/demo_ie.html

i've the code below

<?php
session_start();
include('config.php');

if( isset($_SESSION['is_user']) && isset($_SESSION['is_pass']) && isset($_SESSION['is_group'])){
    $q_session = mysql_query("SELECT * FROM si_user u, si_group g, si_location l 
    WHERE u.group_id=g.group_id AND 
    u.location_id=l.location_id AND 
    active='y' AND 
    username='".$_SESSION['is_user']."' AND 
    password='".$_SESSION['is_pass']."' ");
    
    $r_session = mysql_fetch_array($q_session);
}

$php_self = $_SERVER['PHP_SELF'];

include('header.php');
?>

[lord_aragon]

continued...

<?php
$arr_part_hp = array();
$arr_part_idx = array();
$arr_part_desc = array();

$q_part_hp = mysql_query("SELECT p.*, v.vendor_name FROM si_part p 
LEFT JOIN si_vendor v ON p.vendor_id = v.vendor_id
ORDER BY vendor_name, hp_part_no, vendor_part_no ");
while($r_part_hp = mysql_fetch_array($q_part_hp)){
    $arr_v_name[] = $r_part_hp[vendor_name];
    $arr_part_v[] = $r_part_hp[vendor_part_no];
    $arr_part_hp[] = $r_part_hp[hp_part_no];
    $arr_part_idx[] = $r_part_hp[part_id];
    $arr_part_desc[] = $r_part_hp[part_desc];
    
    $q_get_stock = mysql_query("SELECT * FROM si_part_summary 
    WHERE location_id='$r_session[location_id]' AND 
    vendor_part_no='$r_part_hp[vendor_part_no]' AND 
    hp_part_no='$r_part_hp[hp_part_no]' 
    ");
    
    if(mysql_num_rows($q_get_stock) > 0){
        $r_get_stock = mysql_fetch_array($q_get_stock);
        $arr_balance[] = $r_get_stock[total_receive] - $r_get_stock[total_on_hand_ce];
        $arr_onhandce[] = $r_get_stock[total_on_hand_ce];
    }
    else{
        $arr_balance[] = 0;
        $arr_onhandce[] = 0;
    }
}

?>


<script type="text/javascript">
function cek_case()
{

    var dobelCase = '<?=$dobel_case?>';

    if(dobelCase == 'yes'){
        if (confirm('Case ID is already in database. Are you sure you want to use this case ID again?'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    else{
        return true;
    }
}
//-->
</SCRIPT>

<script type="text/javascript">
var StartIteration = 2;

function addRowToTable()
{
    
    var LastIteration = this.StartIteration++;
    var tbl           = document.getElementById('table1');
    var RowsLength    = tbl.rows.length;
    var row           = tbl.insertRow(RowsLength);
    row.setAttribute('id' ,'tr' + LastIteration);
    row.setAttribute('bgColor' ,'#F0F6FB');
    row.setAttribute('valign' ,'top');
    
    
    var cellRight1 = row.insertCell(0);
    var divTag = document.createElement("div");
    divTag.id = "v_name" + LastIteration;
    cellRight1.appendChild(divTag);
    
    
    var cellRight2 = row.insertCell(1);
    cellRight2.setAttribute('align','center');
    var sel1 = document.createElement('select');
    
    sel1.options[0] = new Option('', '');
    
    <? foreach($arr_part_v as $key => $value){ ?>
           sel1.options[<?=$key+1?>] = new Option("<?=$value?>", "");        
    <? } ?>
    
    <? foreach($arr_part_idx as $key => $value){ ?>
        sel1.options[<?=$key+1?>].setAttribute('value', '<?=$value;?>');
    <? } ?>
    
    <? foreach($arr_part_desc as $key => $value){ ?>
        sel1.options[<?=$key+1?>].setAttribute('title', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    <? foreach($arr_v_name as $key => $value){ ?>
        sel1.options[<?=$key+1?>].setAttribute('dir', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    <? foreach($arr_balance as $key => $value){ ?>
        sel1.options[<?=$key+1?>].setAttribute('id', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    <? foreach($arr_onhandce as $key => $value){ ?>
        sel1.options[<?=$key+1?>].setAttribute('lang', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    sel1.setAttribute('onChange', "document.getElementById('v_name"+LastIteration+"').innerHTML=this.options[this.selectedIndex].dir;hp_part_no"+LastIteration+".value=this.options[this.selectedIndex].value;document.getElementById('part_desc"+LastIteration+"').innerHTML=this.options[this.selectedIndex].title;document.getElementById('balance"+LastIteration+"').innerHTML=this.options[this.selectedIndex].id;document.getElementById('onhandce"+LastIteration+"').innerHTML=this.options[this.selectedIndex].lang;");
    
    sel1.name = 'part_id' + LastIteration;
    sel1.id = 'v_part_no' + LastIteration;
    <!--document.getElementById('VendorPartNo' + iteration).value = datajson[0].VendorPartNo;-->
    cellRight2.appendChild(sel1);
    document.getElementById(sel1.id).focus();
    <!--new Spry.Widget.ValidationSelect(sel.id);-->
    
    
    var cellRight3 = row.insertCell(2);
    cellRight3.setAttribute('align','center');
    var sel2 = document.createElement('select');
    
    sel2.options[0] = new Option('', '');
    
    <? foreach($arr_part_hp as $key => $value){ ?>
           sel2.options[<?=$key+1?>] = new Option("<?=$value?>", "");        
    <? } ?>
    
    <? foreach($arr_part_idx as $key => $value){ ?>
        sel2.options[<?=$key+1?>].setAttribute('value', '<?=$value;?>');
    <? } ?>
    
    <? foreach($arr_part_desc as $key => $value){ ?>
        sel2.options[<?=$key+1?>].setAttribute('title', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    <? foreach($arr_v_name as $key => $value){ ?>
        sel2.options[<?=$key+1?>].setAttribute('dir', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    <? foreach($arr_balance as $key => $value){ ?>
        sel2.options[<?=$key+1?>].setAttribute('id', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    <? foreach($arr_onhandce as $key => $value){ ?>
        sel2.options[<?=$key+1?>].setAttribute('lang', '<?=htmlspecialchars($value);?>');
    <? } ?>
    
    sel2.setAttribute('onChange', "document.getElementById('v_name"+LastIteration+"').innerHTML=this.options[this.selectedIndex].dir;document.getElementById('balance"+LastIteration+"').innerHTML=this.options[this.selectedIndex].id;document.getElementById('onhandce"+LastIteration+"').innerHTML=this.options[this.selectedIndex].lang;document.getElementById('part_desc"+LastIteration+"').innerHTML=this.options[this.selectedIndex].title;v_part_no"+LastIteration+".value=this.options[this.selectedIndex].value; ");
    
    sel2.name = 'part_id' + LastIteration;
    sel2.id = 'hp_part_no' + LastIteration;
    <!--document.getElementById('VendorPartNo' + iteration).value = datajson[0].VendorPartNo;-->
    cellRight3.appendChild(sel2);
    <!--new Spry.Widget.ValidationSelect(sel2.id);-->
    
    
    var cellRight4 = row.insertCell(3);
    var divTag2 = document.createElement("div");
    divTag2.id = "part_desc" + LastIteration;
    cellRight4.appendChild(divTag2);
    
    
    var cellRight5 = row.insertCell(4);
    cellRight5.setAttribute('align','right');
    var divTag2 = document.createElement("div");
    divTag2.id = "balance" + LastIteration;
    cellRight5.appendChild(divTag2);
    
    
    var cellRight6 = row.insertCell(5);
    cellRight6.setAttribute('align','right');
    var divTag3 = document.createElement("div");
    divTag3.id = "onhandce" + LastIteration;
    cellRight6.appendChild(divTag3);

    
    var cellRight7 = row.insertCell(6);
    cellRight7.setAttribute('align','center');
    var inputQTY = document.createElement('input');
    inputQTY.type = 'text';
    inputQTY.name = 'quantity' + LastIteration;
    inputQTY.id = 'qty' + LastIteration;
    <!--inputQTY.className = "InputAlignRight";-->
    inputQTY.size = 5;
    cellRight7.appendChild(inputQTY);
    <!--new Spry.Widget.ValidationTextField(el1.id, "real", {minValue:0, validateOn:["blur"], useCharacterMasking:true});-->
    
    var cellRight8 = row.insertCell(7);
    cellRight8.setAttribute('align','center');
    var imgAdd = document.createElement('img');
    imgAdd.src = "images/add.jpg";
    imgAdd.onclick = function(){addRowToTable()};
    cellRight8.appendChild(imgAdd);
    
    var cellRight9 = row.insertCell(8);
    cellRight9.setAttribute('align','center');
    var imgDel = document.createElement('img');
    imgDel.src = "images/del.png";
    imgDel.onclick = function(){removeRowFromTable('tr' + LastIteration, LastIteration)};
    cellRight9.appendChild(imgDel);
    
    document.getElementById('total_part_x').value = (tbl.rows.length)-1;
    
    document.getElementById('max_r').value = LastIteration;
}

function removeRowFromTable(rw, n)
{
  var row     = document.getElementById(rw).rowIndex;
  var tbl     = document.getElementById('table1');
  var lastRow = tbl.rows.length;
  
  if (lastRow > 2) 
  {
      Spry.Widget.Utils.destroyWidgets('part_id' + n);
      Spry.Widget.Utils.destroyWidgets('vendor_part_no' + n);
      Spry.Widget.Utils.destroyWidgets('quantity' + n);
      tbl.deleteRow(row);
  }
  
  document.getElementById('total_part_x').value = (tbl.rows.length)-1;
  
  <!--DuplicateCheck();-->
}
</script>

[lord_aragon]

continued....

<div style="padding:4px;">

<form id="form_part" method="post" action="">
<table border="0" cellpadding="4" cellspacing="1" width="350">
  <tr align="center" bgcolor="#DFE2E6">
    <td colspan="2">Request Parts</td>
  </tr>
  <tr bgcolor="#F0F6FB">
    <td width="125">Status</td>
    <td width="206">NEW</td>

  </tr>
  <tr bgcolor="#F0F6FB">
    <td>Request Date</td>
    <td><?php
$default_date = date('Y-m-d');
$date_input_year = substr($default_date, 0, 4);
$date_input_month = substr($default_date, 5, 2);
$date_input_day = substr($default_date, 8, 2);
?>
    
    <select name="date_input_month">
    <? show_bulan($date_input_month); ?>
    </select>
    
    <select name="date_input_day">
    <? show_date($date_input_day); ?>
    </select>
    
    <select name="date_input_year">
    <? show_year($date_input_year); ?>
    </select>
    </td>
  </tr>
  <tr bgcolor="#F0F6FB">
    <td>Case ID</td>
    <td><input type="text" name="case_id" size="10" /> Sequence : 1</td>
  </tr>
  <tr bgcolor="#F0F6FB">
    <td>Warranty Status</td>
    <td>
    <select name="warranty_status">
    <option></option>
    <option value="iw">In Warranty</option>
    <option value="ow">Out Warranty</option>
    </select>
    </td>
  </tr>
</table>

[lord_aragon]

continued....

<br />

<table id="table1" border="0" cellpadding="4" cellspacing="1" width="750">
  <tr align="center" bgcolor="#DFE2E6">
    <td width="100">Vendor</td>
    <td width="110">Vendor Part No.</td>
    <td width="100">HP Part No.</td>
    <td width="147">Part Name</td>
    <td width="48">Balance</td>
    <td width="80">On Hand CE</td>
    <td width="49">Request</td>
    <td colspan="2">Action</td>
  </tr>
<?php
$next_part = 1;
for($i = 1; $i <= $next_part; $i++){
/*
hp_part_no<?=$i;?>.value=this.options[this.selectedIndex].value;
*/

?>
  <tr id="tr1" bgcolor="#F0F6FB" valign="top">
    <td><div id="v_name<?=$i;?>"></div></td>
    <td align="center"><select id="v_part_no<?=$i;?>" name="part_id<?=$i;?>" onchange="
    document.getElementById('v_name<?=$i;?>').innerHTML=this.options[this.selectedIndex].dir;
    document.getElementById('part_desc<?=$i;?>').innerHTML=this.options[this.selectedIndex].title;
    document.getElementById('balance<?=$i;?>').innerHTML=this.options[this.selectedIndex].id;
    document.getElementById('onhandce<?=$i;?>').innerHTML=this.options[this.selectedIndex].lang;
    document.getElementById('hp_part_no<?=$i;?>').value=this.options[this.selectedIndex].value;
    ">
      <option></option>
      <?php
    $q_hp_part_no = mysql_query("SELECT p.*, v.vendor_name FROM si_part p 
    LEFT JOIN si_vendor v ON p.vendor_id = v.vendor_id
    ORDER BY vendor_name, hp_part_no, vendor_part_no ");
    
    while( $r_hp_part_no = mysql_fetch_array($q_hp_part_no) ){
        $q_cek_stock = mysql_query("SELECT * FROM si_part_summary 
        WHERE location_id='$r_session[location_id]' AND 
        vendor_part_no='$r_hp_part_no[vendor_part_no]' AND 
        hp_part_no='$r_hp_part_no[hp_part_no]' 
        ");
        
        $cek_balance = 0;
        $cek_onhandce = 0;
        if(mysql_num_rows($q_cek_stock) > 0){
            $r_cek_stock = mysql_fetch_array($q_cek_stock);
            $cek_balance = $r_cek_stock[total_receive] - $r_cek_stock[total_on_hand_ce];
            $cek_onhandce = $r_cek_stock[total_on_hand_ce];
        }
?>
      <option value="<?=$r_hp_part_no[part_id]; ?>" dir="<?=$r_hp_part_no[vendor_name]; ?>" id="<?=htmlspecialchars($cek_balance)?>" lang="<?=htmlspecialchars($cek_onhandce)?>" title="<?=htmlspecialchars($r_hp_part_no[part_desc]); ?>">
      <?=$r_hp_part_no[vendor_part_no];?>
      </option>
      <?
    }
?>
    </select></td>
    
    <td align="center">
    <select id="hp_part_no<?=$i;?>" name="part_id<?=$i;?>" onchange="
    document.getElementById('v_name<?=$i;?>').innerHTML = this.options[this.selectedIndex].dir;
    document.getElementById('part_desc<?=$i;?>').innerHTML = this.options[this.selectedIndex].title;
    document.getElementById('balance<?=$i;?>').innerHTML = this.options[this.selectedIndex].id;
    document.getElementById('onhandce<?=$i;?>').innerHTML = this.options[this.selectedIndex].lang;
    document.getElementById('v_part_no<?=$i;?>').value = this.options[this.selectedIndex].value;    
    ">
    <option></option>
<?php
    $q_hp_part_no = mysql_query("SELECT p.*, v.vendor_name FROM si_part p 
    LEFT JOIN si_vendor v ON p.vendor_id = v.vendor_id
    ORDER BY vendor_name, hp_part_no, vendor_part_no ");
    
    while( $r_hp_part_no = mysql_fetch_array($q_hp_part_no) ){
        $q_cek_stock = mysql_query("SELECT * FROM si_part_summary 
        WHERE location_id='$r_session[location_id]' AND 
        vendor_part_no='$r_hp_part_no[vendor_part_no]' AND 
        hp_part_no='$r_hp_part_no[hp_part_no]' 
        ");
        
        $cek_balance = 0;
        $cek_onhandce = 0;
        if(mysql_num_rows($q_cek_stock) > 0){
            $r_cek_stock = mysql_fetch_array($q_cek_stock);
            $cek_balance = $r_cek_stock[total_receive] - $r_cek_stock[total_on_hand_ce];
            $cek_onhandce = $r_cek_stock[total_on_hand_ce];
        }
?>
    <option value="<?=$r_hp_part_no[part_id]; ?>" dir="<?=$r_hp_part_no[vendor_name]; ?>" id="<?=htmlspecialchars($cek_balance)?>" lang="<?=htmlspecialchars($cek_onhandce)?>" title="<?=htmlspecialchars($r_hp_part_no[part_desc]); ?>">
    <?=$r_hp_part_no[hp_part_no];?>
    </option>
<?
    }
?>
    </select>    </td>
    <td><div id="part_desc<?=$i;?>"></div></td>
    <td align="right"><div id="balance<?=$i;?>"></div></td>
    <td align="right"><div id="onhandce<?=$i;?>"></div></td>
    <td align="center"><input type="text" name="quantity<?=$i;?>" size="5" /></td>
    <td width="17">
<?php
/*
<a href="<?=$php_self;?>?do=add&next_part=<?=($next_part + 1); ?>">add</a>
*/
?>
    <img src="images/add.jpg" width="16" height="16" border="0" onClick="addRowToTable();">    </td>
    <td width="17">
<?php
/*
    <a href="<?=$php_self;?>?do=delete&next_part=<?=($next_part - 1); ?>">delete</a>
*/
?>
    <img src="images/del.png" width="16" height="16" border="0" onClick="removeRowFromTable('tr1', 1);">    </td>
  </tr>
<?php
}
?>
</table>

[lord_aragon]

continued....

<table border="0" cellpadding="4" cellspacing="1" width="750">
  <tr align="center" bgcolor="#F0F6FB">
    <td>
    <input id="total_part_x" name="total_part" value="<?=$next_part; ?>" type="hidden" />
    <input id="max_r" name="max_row" value="1" type="hidden" />
    <input type="submit" value="Save" onClick = "return cek_case()" />
    <input type="reset" value="Reset" />
    <input value="Back" type="button" onclick="javascript:window.history.back();" />
    </td>
  </tr>
</table>

</form>

there is some event <select> onchange on default row (row 1) and it works on all browser Opera, IE, Firefox, and then i've been made an javascript to make another without reloading the page and it should have the same parameter as row one, anything is ok except event onChange that created dynamicly by javascript not works on IE also Firefox

please help me,,,i'm still newbie in javascript/ajax...give me the best solution..

thank you..

[lord_aragon]

this the correct demo in Firefox

http://www.4shared.com/file/83686108/7fac9658/demo_ff.html

[Fang]

Change this:

sel1.setAttribute('onChange', "document.getElementById('v_name"+LastIteration+"').innerHTML=this.options[this.selectedIndex].dir;hp_part_no"+LastIteration+".value=this.options[this.selectedIndex].value;document.getElementById('part_desc"+LastIteration+"').innerHTML=this.options[this.selectedIndex].title;document.getElementById('balance"+LastIteration+"').innerHTML=this.options[this.selectedIndex].id;document.getElementById('onhandce"+LastIteration+"').innerHTML=this.options[this.selectedIndex].lang;");

to this:

sel2.onchange=function(LastIteration) {
    return function (e) {
        document.getElementById('v_name'+LastIteration).innerHTML=this.options[this.selectedIndex].dir;
        document.getElementById('balance'+LastIteration).innerHTML=this.options[this.selectedIndex].id;
        document.getElementById('onhandce'+LastIteration).innerHTML=this.options[this.selectedIndex].lang;
        document.getElementById('part_desc'+LastIteration).innerHTML=this.options[this.selectedIndex].title;
        document.forms[0].elements['v_part_no'+LastIteration].value=this.options[this.selectedIndex].value; // uncertain if this is correct
        };
    }(LastIteration);

Large scripts can be zipped and posted

[lord_aragon]

thank you very much @Fang, it works on Firefox and IE (for now ),

this is the latest file: http://www.4shared.com/file/83835571...quest_add.html

but i 'm still miss one thing, when using firefox and IE, in the Vendor name column created by javascript, there is not displayed the vendor name that represented from event <select> onchange that call "dir" parameter on the <option> element

there is any suggestion for displaying an a text that calls from <option> parameter

<option value="6" dir="AOC" id="30" lang="0" title="hp34 desk">

value => will set another <select> to the same value
dir => will set <div> inner HTML on the Vendor name column
id => will set <div> inner HTML on the Balance column
lang => will set <div> inner HTML on the On Hand CE column
title => will set <div> inner HTML on the Part Name column

this the select element that have event onChange

<select id="v_part_no1" name="part_id1" onchange="
document.getElementById('v_name1').innerHTML=this.options[this.selectedIndex].dir;
document.getElementById('part_desc1').innerHTML=this.options[this.selectedIndex].title;
document.getElementById('balance1').innerHTML=this.options[this.selectedIndex].id;
document.getElementById('onhandce1').innerHTML=this.options[this.selectedIndex].lang;
document.getElementById('hp_part_no1').value=this.options[this.selectedIndex].value;
">

[Fang]

The value of dir is invalid.
If you use invalid attributes or invalid attribute values use:

this.options[this.selectedIndex].getAttribute('dir')

The id and lang values are invalid in your example!

[lord_aragon]

thanks again @Fang, this javasript almost makes me crazy,, cause this application should running well in popular browser like Opera, Firefox and IE. and fortunately i found this forums that discuss all about web developing, and i want to learnmore about javascipt from this site. .my method that i'm used for the <option> attribute is the way that i know, and i don't have any idea again.

but i think like this, all text that i want to show to <div> element of Vendor name, part name, balance and On Hand CE column is joined in one <option> attributes like title and separated by special characters like ' ; ' or others, and the Javasript will read the title attribute and split text by ' ; ' and the result will set the values of the <div> element before. How to make action like this?

is there any better method to make event onchange like this? i'll be appreciated if you can give another method