www.webdeveloper.com
Results 1 to 10 of 10

Thread: Js OnChange not works in IE also Firefox

  1. #1
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    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 Code:
    <?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');
    ?>
    Last edited by lord_aragon; 02-02-2009 at 06:12 AM.

  2. #2
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    continued...

    PHP Code:
    <?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>

  3. #3
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    continued....

    PHP Code:
    <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_date04);
    $date_input_month substr($default_date52);
    $date_input_day substr($default_date82);
    ?>
        
        <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>

  4. #4
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    continued....

    PHP Code:
    <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>

  5. #5
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    continued....


    PHP Code:
    <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..

  6. #6
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    this the correct demo in Firefox

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

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Change this:
    Code:
    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:
    Code:
    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
    Last edited by Fang; 02-02-2009 at 07:23 AM.

  8. #8
    Join Date
    Jan 2009
    Posts
    21

    Js OnChange not works in IE also Firefox

    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

    HTML Code:
    <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

    HTML Code:
    <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;
    ">
    Last edited by lord_aragon; 02-02-2009 at 10:07 PM.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The value of dir is invalid.
    If you use invalid attributes or invalid attribute values use:
    Code:
    this.options[this.selectedIndex].getAttribute('dir')
    The id and lang values are invalid in your example!

  10. #10
    Join Date
    Jan 2009
    Posts
    21

    Thumbs up Js OnChange not works in IE also Firefox

    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
    Last edited by lord_aragon; 02-03-2009 at 10:04 PM.

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