php and ajax dynamically created select box onchange event

11 New Member

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|t ext|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 Reply

29817

dmjpro

2,476

Top Contributor

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

Kind regards,
Dmjpro.

Sep 5 '07 #2

acoder

16,027

Recognized Expert Moderator MVP

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

Recognized Expert Moderator MVP

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

Sep 5 '07 #4

Leena P

New Member

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

Recognized Expert Moderator MVP

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

New Member

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

Recognized Expert Moderator MVP

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

New Member

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

Recognized Expert Moderator MVP

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

Similar topics

6136

IE6 problem with onchange handler on dynamically created <select>

by: Bart van Deenen | last post by:

Hi all I have a script where I dynamically create multiple inputs and selects from a script. The inputs and selects must have an associated onchange handler. I have the script working fine on Firefox, Safari and Konqueror, but the onchange event just doesn't fire on IE6. Firefox's javascript console shows no errors, and the IE script debugger shows nothing. onchange is not triggered.

Javascript

1906

Help needed!

by: Stone Chen | last post by:

Hello, I have form that uses javascript createElement to add additional input fields to it. However, my validating script will not process new input fields because it can only find the named input boxes already on the page. Anyone has any thoughts on how to solve this, your advice is much appreciated. Thanks

Javascript

4669

dynamically creating rows + submit fails

by: somaskarthic | last post by:

Hi In my php code , i dynamically created table rows on button click event. Each row contain 3 selectboxes, 7 checkboxes . On each click of these elements i need to submit the form and save the data to database. After each submit , i need to display the previous added details (with some checkboxes checked and some others unchecked ..) and one new row for next updation. Here i need to collect all values submitted in the php page. There i...

PHP

2469

Accessing Form Elements through User Controls using AJAX

by: AndiSmith | last post by:

Hi guys, I wondered if anyone could help me with this problem, or even shed some light on the direction I need to take to resolve it? I'm using .NET 2.0 (C# flavor) to build a large user-based website. I've created an AJAX based user control, which is dynamically placed on a page (once, or multiple times) if the user has the correct permissions to receive it. It contains two drop down lists - employee value and partner value; and a...

.NET Framework

4322

Dropdownlist connect using Ajax when postback reset to first list

by: nuchphasu | last post by:

Hi I have a problem on Dropdownlist that connect database and retrieve data by Ajax.I write javascript like this ------------------------------------------------------------------------- function ManageYear_onchange(machinetype) { var iManageYear=document.forms.ddlManageYear.selectedIndex; var vManageYear=document.forms.ddlManageYear.value;

Javascript

4501

innerHTML, AJAX and Firefox

by: coby | last post by:

I have an application with a form that has two parts : A & B. A should be a static form while B shoudl be dynamically loaded via AJAX/PHP. Using a select box on part A, the onchange event calls an AJAX PHP script that generates PART B (in HTML) On positive AJAX reply, Part B's HTML is replaced by the returned HTML (using innerHTML) Works perfect on IE, but not on FF. On FF, the new form is properly displayed, but when trying to submit...

Javascript

2881

Problem assigning onchange event handler to dynamically created select control in IE

by: bambr | last post by:

I'm using following code: function cloneRow(tBodyId, sourceRowId) { var obj = document.getElementById(tBodyId); if(obj.tagName != 'TBODY') { for(var i = 0; i < obj.childNodes.length; i++) { if(obj.childNodes.tagName == 'TBODY')

Javascript

3172

problem in using ajax function

by: shivendravikramsingh | last post by:

hi friends, i m using a ajax function for retrieving some values from a database table,and display the values in required field,my prob is that the ajax function i m using is working f9 once,but if i change something in php file using in ajax function.it not refreshed,means its shows the previous result it not get updated.i can't understand whats the prob.this is the code i m using: <? include("config.inc.php"); //error_reporting(0); ...

Javascript

1484

Question with AJAX

by: sheldonlg | last post by:

I am still improving my AJAX and I ran into something that I'm not sure how to do. I will have a page called where I will have a dropdown list at the top and a large display at the bottom. The display depends upon what is currently selected in the dropdown. This is readily done via AJAX which is activated with an onchange in the dropdown list. The contents of the bottom half of the page are created in the php script which is sent back...

PHP

8969

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9335

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9263

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

8210

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6751

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6053

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4825

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3279

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2745

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP