php and ajax dynamically created select box onchange event

i want to basically take some information for the product and let the user
enter the the material required to make this product

1.first page test.php
which takes product code and displays prodcut anme have used
ajax to avoid refreshing of page this works fine
2.now i have created one row with
checkbox|select box|text|text|text|text|
where in the select box values are fetched from table here also i have used ajax for getting the m_name automatically withput refreshi works fine (onchange event)
3.after that i have given a add rows button on which rows are added dynamically
with the same like static row i have added
now i wantto use the same function i have used for static select box for avoiding refreshing here how do i pass the onchange event here
and after pressing submit button the dynamic rows created disappears
can anybody help me wot is wrong with this

how do i pass dynamic elements values from the rows to the php along with the static row values
my code is as follows

Expand|Select|Wrap|Line Numbers

 test.php
 
<?
 
include("../include/connection.php");

if($_GET)

{

$p_cde=$_GET['p_cde'];
 
$cnt = count($_GET['m_cde'])+1;

      for ($idx=0;$idx<=$cnt;$idx++) {

          $m_cde= $_GET['m_cde'][$idx] ;

          $m_name=$_GET['m_name'][$idx]; 

          $um=$_GET['um'][$idx]; 

          $qty=$_GET['qty'][$idx]; 

          $overages=$_GET['overages'][$idx]; 

     }

}

?>

<html>

<head>

<script src="test.js" ></script>

</head>

<body><form name="material" method="GET"> 

<table id="tbl" border="1">

<tr><td>

<select name="p_cde" id="p_cde" onChange="showCode(this.value);">

   <? 

   $sqlpr = "select * from fgmaster order by p_cde ";

    $db_query=$DB_site->query($sqlpr);

    while($rspr=$DB_site->fetch_array($db_query)){

               $combopr=$combopr."<option value='".$rspr['p_cde']."'";

            if ($rspr['p_cde']==strtoupper($p_cde)){

                $combopr=$combopr."selected";

                }

            $combopr=$combopr.">".$rspr['p_cde']."-".$rspr['p_name']."</option>\n";

       }

       echo $combopr;   
 
       ?> 

</select>

</td>
 
<td><input type="text" name="p_name" id="p_name" value=""></td>

<td><input type="text" name="p_pckunit" id="p_pckunit" value=""></td></tr>

<?

    $sqlmaterial="select * from materialmaster order by m_cde";

    $db_query_material=$DB_site->query($sqlmaterial);

    while($rsmaterial=$DB_site->fetch_array($db_query_material)){

                $option_vals[]=$rsmaterial['m_cde']."-".$rsmaterial['m_name'];

}

    ?>

<script>

select_opt = new Array();

<?

for($i=0;$i<count($option_vals);$i++){

    ?>

        select_opt[<?= $i ?>] = '<?= $option_vals[$i] ?>';

    <?

}

?>

</SCRIPT>
 
<tr bgcolor="#CCCCCC" bordercolor="#FFCCFF"> 

      <th>&nbsp;&nbsp; </th>
 
      <th >Code</th>
 
      <th>Material description</th>
 
      <th>um</th>
 
      <th>qty</th>
 
      <th>overages</th>
 
    </tr>
 
     <tr> 

     <td><input type="checkbox" name="chk" id="chk"></td>

        <td><select name='m_cde' id='m_cde' onChange='showmcode(this.value);'>

           <? 

           $sqlmr = "select * from materialmaster order by m_cde ";

        $db_query_mr=$DB_site->query($sqlmr);

        while($rsmr=$DB_site->fetch_array($db_query_mr)){

               $combomr=$combomr."<option value='".$rsmr['m_cde']."'";

            if ($rsmr['m_cde']==strtoupper($m_cde)){

                $combomr=$combomr."selected";

                }

        $combomr=$combomr.">".$rsmr['m_cde']."-".$rsmr['m_name']."</option>\n";

           }

           echo $combomr;   

        ?> 

    </select></td>

    </td><td><input type="text" name='m_name' id='m_name' value=""></td>

    <td><input type="text" name='um' id='um' value=""></td>

    <td><input type="text" name='qty' id='qty' value=""></td>

    <td><input type="text" name='overages' id='overages' value=""></td>

    </tr> 
 
    <tbody>

</tbody>

</table>

<DIV>

<input type ="button" value="Add Row" onclick="add_rows(document.getElementById('tbl'));">

</div>

<DIV><input type ="submit" value="Submit" name="myfields"></DIV>

</form>

</body>

</html>

Expand|Select|Wrap|Line Numbers

 test.js

------------

// JavaScript Document

var xmlHttp;

function showCode(str)

{ 

xmlHttp=GetXmlHttpObject();   //Calls on the GetXmlHttpObject function to create an XMLHTTP object 

if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request");

 return;

 }

var url="testget.php"; //Defines the url (filename) to send to the server 

url=url+"?p_cde="+str;  //Adds a parameter (q) to the url with the content of the dropdown box 

url=url+"&sid="+Math.random(); //Adds a random number to prevent the server from using a cached file 

xmlHttp.onreadystatechange=stateChanged ; //Call stateChanged when a change is triggered 

xmlHttp.open("GET",url,true);  //Opens the XMLHTTP object with the given url. 

xmlHttp.send(null);                //Sends an HTTP request to the server 

alert(url);

}

function showmcode(str)

{ 

xmlHttp=GetXmlHttpObject();   //Calls on the GetXmlHttpObject function to create an XMLHTTP object 

alert(str);

if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request");

 return;

 }

var url="testget.php"; //Defines the url (filename) to send to the server 

url=url+"?m_cde="+str;  //Adds a parameter (q) to the url with the content of the dropdown box 

url=url+"&sid="+Math.random(); //Adds a random number to prevent the server from using a cached file 

xmlHttp.onreadystatechange=stateChanged1 ; //Call stateChanged when a change is triggered 

xmlHttp.open("GET",url,true);  //Opens the XMLHTTP object with the given url. 

xmlHttp.send(null);                //Sends an HTTP request to the server 

alert(url);

}

function stateChanged() 

{ 

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 
 
   var ar=xmlHttp.responseText.split("|");
 
   document.getElementById("p_name").value=ar[0] ;

   document.getElementById("p_pckunit").value=ar[1] ;
 
 } 

}
 
function stateChanged1() 

{ 

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 

   var ar=xmlHttp.responseText.split("|");

   document.getElementById("m_name").value=ar[0] ;

   document.getElementById("um").value=ar[1] ;

  } 

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 //Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}
 
//FUNCTION FOR DYNAMIC ROW
 
j=0;

function add_rows(obj){
 
    //tabObj = document.createElement("table");

    //tbodyObj = document.createElement("tbody");
 
    tabCols = new init_table();

    trObj = document.createElement("tr")

    col_names = new Array("chk","m_cde","m_name","um","qty","overages"); 

    for(i=0;i<tabCols.length;i++){

        tdObj = document.createElement("td");

        /*

         if(create_object(tabCols[i])=="select")

         {

         mselect=create_object(tabCols[i],col_names[i]+'['+j+']')

         mselect.onChange=showmcode(col_names[i]+'['+j+']');

         tdObj.appendChild(mselect));

         }*/
 
        tdObj.appendChild(create_object(tabCols[i],col_names[i]+'['+j+']'));
 
        //added on 04/09/2007 for onchage event on select box

/*        if(tabCols[i]=="select"){

        alert("hi");

            col_names[i]+'['+j+']'="fieldevent('"+fieldname+"')";

            var showmcode=new Function(col_names[i]+'['+j+']'.onchange);

            if(col_names[i]+'['+j+']'.addEventListener){

            col_names[i]+'['+j+']'.addEventListener('change',showmcode,false);

            else if(col_names[i]+'['+j+']'.attachEvent){

            col_names[i]+'['+j+']'.attachEvent('onchange',showmcode);}

            }

        /* this is a sample

        sfield.onchange = "fieldevent('" + fieldname + "')"; 

            var onChangeHandler = new Function(sfield.onchange); 

            if (sfield.addEventListener) { 

            sfield.addEventListener('change', onChangeHandler, false ); 

            } else if (sfield.attachEvent) { 

            sfield.attachEvent('onchange', onChangeHandler); 

            } 

            */

            trObj.appendChild(tdObj);
 
    }

    obj.firstChild.appendChild(trObj);
 
j++;
 
}
 
function fieldevent(fname){ 
 
alert (fname); 

} 
 
function init_table(){

    tableProp = new Array();
 
    tableProp[0] = "checkbox";

    tableProp[1] = "select"; //m_cde

    tableProp[2] = "text"; //m_name

    tableProp[3] = "text"; //um

    tableProp[4] = "text"; //qty

    tableProp[5] = "text"; //overages    

    //tableProp[6] = "checkbox";
 
    return tableProp;

}
 
function create_object(objType,nm){

    if(objType == 'select'){

        return getSelectBoxDOM(select_opt,nm);

    }    
 
    obj = document.createElement("input");

    obj.setAttribute("type",objType);

    obj.setAttribute("name",nm);
 
    return obj; 

}
 
function getSelectBoxDOM(options,nm) {

            selectBox =document.createElement('select');

           for (x=0; x < options.length; x++) {

                optionItem =document.createElement('option');

                   optionItem.appendChild(document.createTextNode(options[x]));

                selectBox.appendChild(optionItem);
 
            }

            selectBox.setAttribute("name",nm);
 
           return selectBox;
 
}

Expand|Select|Wrap|Line Numbers

 testget.php

----------------
 
<?php

if($_GET)

{
 
$p_cde=$_GET['p_cde']; 
 
$con = mysql_connect('localhost', 'localhost', '');  //PHP opens a connection to a MySQL server 
 
if (!$con)

 {

 die('Could not connect: ' . mysql_error());

 }

mysql_select_db("erpmfg", $con);

$sql="select * from fgmaster where p_cde = '".$p_cde."'";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result)){

$p_name=$row['p_name'];

$p_pckunit=$row['p_pckunit'];

echo $p_name."|".$p_pckunit;

}

}
 
if ($_GET)

{
 
$m_cde=$_GET['m_cde'];
 
$sqlmr="select * from materialmaster where m_cde = '".$m_cde."'";

$result1 = mysql_query($sqlmr);
 
while($row = mysql_fetch_array($result1)){

$m_name=$row['m_name'];

$um=$row['um'];
 
echo $m_name."|".$um;

}

} 
 
mysql_close($con);

?>

Sep 5 '07 #1

Subscribe Post Reply

29645

dmjpro

2,476

2GB

Please use Code tags then it will be easy to Solve your Problem.

Kind regards,
Dmjpro.

Sep 5 '07 #2

acoder

16,027

Expert Mod 8TB

Leena, welcome to TSDN!

Did you know that you can specify languages in the code tags, e.g. [code=javascript]...[/code.] (remove the dot).

Sep 5 '07 #3

acoder

16,027

Expert Mod 8TB

Give your dynamically created elements ids. For your select, add the onchange when you create the element.

Sep 5 '07 #4

Leena P

Expand|Select|Wrap|Line Numbers

 j=1;

function add_rows(obj){
 
     tabCols = new init_table();

     trObj = document.createElement("tr")

     col_names = new Array("chk","m_cde","m_name","um","qty","overages"); 

     for(i=0;i<tabCols.length;i++){

        tdObj = document.createElement("td");

        /*         if(create_object(tabCols[i])=="select")

         {

         mselect=create_object(tabCols[i],col_names[i]+'['+j+']')

         mselect.onChange=showmcode(col_names[i]+'['+j+']');

         tdObj.appendChild(mselect));

         }*/
 
        tdObj.appendChild(create_object(tabCols[i],col_names[i]+'['+j+']'));

i was trying the above commented line in add_rows function while creating a select box using createElement function for onchange where am i going wrong

Sep 5 '07 #5

acoder

16,027

Expert Mod 8TB

i was trying the above commented line in add_rows function while creating a select box using createElement function for onchange where am i going wrong

Use onchange (lower case "c").

Sep 5 '07 #6

Leena P

i tried that but then my add rows button does not create new row some error
but if comment that part then it works
how to give onchage event when the select box is created

Expand|Select|Wrap|Line Numbers

 function getSelectBoxDOM(options,nm) {

            selectBox =document.createElement('select');

           for (x=0; x < options.length; x++) {

                optionItem =document.createElement('option');

                   optionItem.appendChild(document.createTextNode(options[x]));

                selectBox.appendChild(optionItem);
 
            }

            selectBox.setAttribute("name",nm);

            selectBox.setAttribute("id",nm);

//after this say selectBox.onchange=showmcode(nm.value)........ ??????

where nm is the name of the selectbox

           return selectBox;

}

i tried this bt giving error property not supported

thanks.

Sep 5 '07 #7

acoder

16,027

Expert Mod 8TB

Please use code tags when posting code. Thanks!

You need to assign a function object to the onchange, not the result of the function. See this article.

Try:

Expand|Select|Wrap|Line Numbers

 selectBox.onchange = function() {

 showmcode(selectBox.value);

}

Sep 5 '07 #8

Leena P

i tried that but then my add rows button does not create new row some error
but if comment that part then it works
how to give onchage event when the select box is created

Expand|Select|Wrap|Line Numbers

 function getSelectBoxDOM(options,nm) {

            selectBox =document.createElement('select');

           for (x=0; x < options.length; x++) {

                optionItem =document.createElement('option');

                   optionItem.appendChild(document.createTextNode(options[x]));

                selectBox.appendChild(optionItem);
 
            }

            selectBox.setAttribute("name",nm);

            selectBox.setAttribute("id",nm);

//after this say selectBox.onchange=showmcode(nm.value)........ ??????

where nm is the name of the selectbox

           return selectBox;

}

i tried this bt giving error property not supported

thanks.

Sep 5 '07 #9

acoder

16,027

Expert Mod 8TB

Make sure you use code tags. This is the final friendly request. The last post seems like a repeat of your previous comment.

Sep 5 '07 #10

Leena P

Expand|Select|Wrap|Line Numbers

 selectBox.onchange = function() {

 showmcode(selectBox.value);

}

i did this but now it add a record but once i select value from dynamically added select box the value of m_name is not shown in corresponding text box there and my static rows um and m_name disappears which i had selected and where onchange event it had executed ajax script to display m_name and um

thanks

Sep 5 '07 #11

acoder

16,027

Expert Mod 8TB

Try

Expand|Select|Wrap|Line Numbers

 selectBox.onchange = function() {

 showmcode(this.value);

}

Don't forget to set the values of the option elements.

Sep 5 '07 #12

Leena P

same problem i changes it to this.value

i'm setting the options in the getselectbox function
and then actual database values are passed in test.php program

can't understand what is wrong with my code

thanks

Sep 6 '07 #13

markrawlingson

346

Expert 100+

Try..

Expand|Select|Wrap|Line Numbers

 
selectBox.onchange = function() {

 showmcode(this.options[this.selectedIndex].value);

}

Sep 6 '07 #14

acoder

16,027

Expert Mod 8TB

same problem i changes it to this.value

i'm setting the options in the getselectbox function
and then actual database values are passed in test.php program

can't understand what is wrong with my code

You're not setting the value of the options. Set the value by using .value or setAttribute, e.g.

Expand|Select|Wrap|Line Numbers

optionItem.value = 'someval';

Sep 6 '07 #15

Leena P

i writing a code to create select box

Expand|Select|Wrap|Line Numbers

 function getSelectBoxDOM(options,nm) {

            selectBox =document.createElement('select');

           for (x=0; x < options.length; x++) {

                optionItem =document.createElement('option');

                   optionItem.appendChild(document.createTextNode(options[x]));

                selectBox.appendChild(optionItem);

           }

            selectBox.setAttribute("name",nm);

            selectBox.setAttribute("id",nm);

            s=new function(){}

            selectBox.onchange =new function() {

                showmcode(this.options[this.selectedIndex].value);

            }

           return selectBox;

}

which is called here

Expand|Select|Wrap|Line Numbers

  function create_object(objType,nm){

    if(objType == 'select'){

        return getSelectBoxDOM(select_opt,nm);

        //select_opt.onchange = function() {

            //    showmcode(this.options[this.selectedIndex].value);

        //    }

    }    
 
    obj = document.createElement("input");

    obj.setAttribute("type",objType);

    obj.setAttribute("name",nm);

    obj.setAttribute("id",nm);
 
    return obj; 

}

and when i'm adding rows the function create_object is called

Expand|Select|Wrap|Line Numbers

 function add_rows(obj){
 
    //tabObj = document.createElement("table");

    //tbodyObj = document.createElement("tbody");
 
    tabCols = new init_table();

    trObj = document.createElement("tr")

    col_names = new Array("chk","m_cde","m_name","um","qty","overages"); 

    for(i=0;i<tabCols.length;i++){

        tdObj = document.createElement("td");

        tdObj.appendChild(create_object(tabCols[i],col_names[i]+'['+j+']'));\

        tdObj.appendChild(op.value);

        trObj.appendChild(tdObj);

    }

    obj.firstChild.appendChild(trObj);

j++;

}

and in test.php i'm assigning values to options
so when the form is loaded select options are filled with database values

[PHP]<?
$sqlmaterial="select * from materialmaster order by m_cde";
$db_query_material=$DB_site->query($sqlmaterial);
while($rsmaterial=$DB_site->fetch_array($db_query_material)){
$option_vals[]=$rsmaterial['m_cde']."-".$rsmaterial['m_name'];
}
?>
<script>
select_opt = new Array();
<?
for($i=0;$i<count($option_vals);$i++){
?>
select_opt[<?= $i ?>] = '<?= $option_vals[$i] ?>';
<?
}
?>[/PHP]

now how and where to writea code to give onchange event to the select box
i tried create_object function where objtype="select" and where getselectbox function is called but same error.
i also tried in addrow function just after creating object ..
i'm new to ajax and dom
so please tell me how do do this
i have a static row where the same m_cde select box is there where this function is working prooerly
but when i do it for dynamic rows if i alert then it shows [object]
and with static rows it shows the allthe object created with id and all
also how do i pass the m_cde as arry to the url inthe showmcode function for rows .

thanks

Sep 6 '07 #16

Leena P

but i'm assigning values to select box in the main program test.php from the database to the javascript array variable
and creating the select boxes in the test.js
so is it because of that it is creating problem?

Sep 6 '07 #17

acoder

16,027

Expert Mod 8TB

Change line 5 in getSelectBoxDOM to:

Expand|Select|Wrap|Line Numbers

 optionItem.text = options[x];

optionItem.value = options[x];

You could use setAttribute if you want instead, e.g.

Expand|Select|Wrap|Line Numbers

optionItem.setAttribute("value",options[x]);

Sep 7 '07 #18

Leena P

Thanks
my onchange event function works in select option
but then it gives me error in mozilla

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"

this is in the add_rows function
when i try to append

Expand|Select|Wrap|Line Numbers

 
tdObj.appendChild(create_object(tabCols[i],col_names[i]+'['+j+']'));

trObj.appendChild(tdObj); }

obj.firstChild.appendChild(trObj); //this line the above error occurs

am i not setting the attributes in order the way it should for the objects created
and no rows are added dynamically
but in IE 6 it works and even the new rows are inserted
but the value of m_name is not assigned to the corresponding text box in then newly created row like it is shown in static row
how do i pass it in the test1.js in the statechaged1 corresponding to that row cell created

Sep 9 '07 #19

gits

5,390

Expert Mod 4TB

hi ...

please have a look at the correct usage of the code-tags:

[CODE=javascript] code goes here [/code]

kind regards

Sep 9 '07 #20

Leena P

[quote=Leena P]i want to basically take some information for the product and let the user
enter the the material required to make this product

Oct 9 '07 #21

acoder

16,027

Expert Mod 8TB

Thanks
my onchange event function works in select option
but then it gives me error in mozilla

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"

this is in the add_rows function
when i try to append

Expand|Select|Wrap|Line Numbers

tdObj.appendChild(create_object(tabCols[i],col_names[i]+'['+j+']'));

trObj.appendChild(tdObj); }

obj.firstChild.appendChild(trObj); //this line the above error occurs

You're trying to append to a whitespace node. Don't use firstChild. Use a tbody and append to that instead.

Oct 9 '07 #22

php and ajax dynamically created select box onchange event

Similar topics