Select на основе другого select используя PHP не работает только при добавлении новой строки.
Для демонстрации здесь (см. Шаги для демонстрации)
То, что я пробовал:
<?php require_once '../home.php' ?> <?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $action && $id && !is_nan( $id ) ){ $stmt=$user_home->runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); $stmt->bindParam(':irn',$id); $stmt->execute(); $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); $stmtin->bindParam(':irn',$id); $stmtin->execute(); $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); if( $stmt->rowCount() > 0 ){ echo "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; } } } exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem=document.querySelector('select[name="item1"]'); var oSelService=document.querySelector('select[name="service1"]'); oSelItem.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> </head> <body> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php //$sql='select * from `item` order by `Sr` asc;'; $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cont = 3 var qty = "qty" var item = "item" var what = "service" $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); }); </script> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem2=document.querySelector('select[name="item2"]'); var oSelService2=document.querySelector('select[name="service2"]'); oSelItem2.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService2 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem2 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem3=document.querySelector('select[name="item3"]'); var oSelService3=document.querySelector('select[name="service3"]'); oSelItem3.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService3 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem3 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> </body> </html>-<?php require_once '../home.php' ?> <?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $action && $id && !is_nan( $id ) ){ $stmt=$user_home->runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); $stmt->bindParam(':irn',$id); $stmt->execute(); $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); $stmtin->bindParam(':irn',$id); $stmtin->execute(); $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); if( $stmt->rowCount() > 0 ){ echo "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; } } } exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem=document.querySelector('select[name="item1"]'); var oSelService=document.querySelector('select[name="service1"]'); oSelItem.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> </head> <body> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php //$sql='select * from `item` order by `Sr` asc;'; $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cont = 3 var qty = "qty" var item = "item" var what = "service" $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); }); </script> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem2=document.querySelector('select[name="item2"]'); var oSelService2=document.querySelector('select[name="service2"]'); oSelItem2.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService2 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem2 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem3=document.querySelector('select[name="item3"]'); var oSelService3=document.querySelector('select[name="service3"]'); oSelItem3.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService3 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem3 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> </body> </html>всего<?php require_once '../home.php' ?> <?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $action && $id && !is_nan( $id ) ){ $stmt=$user_home->runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); $stmt->bindParam(':irn',$id); $stmt->execute(); $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); $stmtin->bindParam(':irn',$id); $stmtin->execute(); $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); if( $stmt->rowCount() > 0 ){ echo "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; } } } exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem=document.querySelector('select[name="item1"]'); var oSelService=document.querySelector('select[name="service1"]'); oSelItem.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> </head> <body> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php //$sql='select * from `item` order by `Sr` asc;'; $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cont = 3 var qty = "qty" var item = "item" var what = "service" $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); }); </script> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem2=document.querySelector('select[name="item2"]'); var oSelService2=document.querySelector('select[name="service2"]'); oSelItem2.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService2 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem2 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> <script type='text/javascript' charset='utf-8'> function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem3=document.querySelector('select[name="item3"]'); var oSelService3=document.querySelector('select[name="service3"]'); oSelItem3.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService3 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem3 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); </script> </body> </html>
В вашем коде выше вы используете тот же запрос дважды, который, как я полагаю, является ошибкой копирования / вставки?
Далее следует предыдущий вопрос и уже предложенная помощь.
mysql> describe irn_item; +-------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+------------------+------+-----+---------+----------------+ | irn | int(10) unsigned | NO | PRI | NULL | auto_increment | | name | varchar(50) | YES | | NULL | | +-------+------------------+------+-----+---------+----------------+ mysql> select * from irn_item; +-----+------------+ | irn | name | +-----+------------+ | 1 | Shirt | | 2 | Trousers | | 3 | Jacket | | 4 | Socks | | 5 | Underpants | | 6 | Hat | +-----+------------+ mysql> describe irn_service; +-------------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+------------------+------+-----+---------+----------------+ | srn | int(10) unsigned | NO | PRI | NULL | auto_increment | | irn | int(10) unsigned | NO | MUL | 1 | | | instruction | varchar(50) | NO | | 1 | | +-------------+------------------+------+-----+---------+----------------+ mysql> select * from irn_service; +-----+-----+-----------------------+ | srn | irn | instruction | +-----+-----+-----------------------+ | 1 | 2 | Iron | | 2 | 1 | Dry Clean Only | | 3 | 3 | Hi-Pressure dry clean | | 4 | 4 | Steam Clean | | 5 | 5 | Decontaminate | | 6 | 6 | Waterproof | +-----+-----+-----------------------+
Не зная схемы базы данных, я составил быструю базу данных примеров, основанную на некоторых столбцах, представленных в sql в исходном коде. В приведенном ниже коде используется mysqli а не PDO, потому что для моего тестирования гораздо быстрее писать, поэтому, пожалуйста, игнорируйте тот факт, что он точно не соответствует. Я считаю, что важным аспектом, с которым вы столкнулись, является то, что недавно добавленные строки не копируют обработчик событий, который запускает запрос ajax. Вчера я упомянул, что при клонировании узлов любые обработчики событий, назначенные с помощью addEventListener , НЕ будут скопированы / клонированы – поэтому, чтобы гарантировать, что обработчики событий скопированы / клонированы, вам нужно использовать inline event handlers . <select onchange='evtselect(event)'>...</select> : <select onchange='evtselect(event)'>...</select>
<?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpwd = 'xxx'; $dbname = 'xxx'; $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname ); if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); try{ $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $id && !empty( $id ) ){ $html=array(); $sql='select `srn`,`instruction` from `irn_service` where `irn` = ? order by `srn` asc'; $stmt=$db->prepare( $sql ); if( $stmt ){ $stmt->bind_param( 's', $id ); $stmt->execute(); $stmt->store_result(); $stmt->bind_result( $srn, $instruction ); while( $stmt->fetch() ){ $html[]="<option value='{$srn}'>{$instruction}"; } $stmt->close(); } header('Content-Type: text/html'); echo implode( PHP_EOL, $html ); } }catch( Exception $e ){ echo $e->getMessage(); } exit(); } ?> <!doctype html> <html> <head> <title>Dependent / Chained SELECT menus</title> <script> /* AJAX FUNCTION */ function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } /* AJAX CALLBACK */ function createmenu(r,o,h){ o.menu.innerHTML=r; } /* UTILITY TO FIND NEXT SIBLING ELEMENT NODE */ function get_nextsibling(n){ x=n.nextSibling; while ( x.nodeType!==1 ) x=x.nextSibling; return x; } /* INLINE EVENT HANDLER */ function evtselect(e){ try{ var el=e.target; if( el.value=='null' || el.value==null )return false; var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':el.value }; var td=get_nextsibling( el.parentNode ); var oSelect=td.querySelector('select'); var opts={ menu:oSelect }; ajax.call( this, method, url, params, createmenu, opts ); }catch( err ){ console.log( err ); } } function bindEvents(){ var bttn=document.querySelector('input[name="add"]'); var tbl=document.querySelector('form#item_sel > table'); if( bttn && tbl ){ bttn.addEventListener('click',function(e){ /* get a reference to the first & last row, of class "item", in table */ var tr=tbl.querySelectorAll( 'tr.items' )[0]; var ref=tbl.querySelector( 'tr.save' ); /* Create a clone of the entire row - which includes the inline event handlers */ var clone=tr.cloneNode( true ); /* Insert the new row after the last row */ tr.parentNode.insertBefore( clone, ref ); /* Ensure that newly added "service" select menu is empty */ clone.querySelector('select[name="item[]"]').value='null'; clone.querySelector('select[name="service[]"]').innerHTML=''; clone.querySelector('input[name="qty[]"]').value=''; },{ capture:false, passive:true, once:false } ); } } document.addEventListener( 'DOMContentLoaded', bindEvents, false ); </script> <style type='text/css' charset='utf-8'> select {padding:1rem;width:300px;} </style> </head> <body> <h1>Chained select menus using basic ajax</h1> <form method='post' id='item_sel'> <table> <tr class='headers'> <th scope='col'>Item</th> <th scope='col'>Service</th> <th scope='col'>Qty</th> </tr> <tr class='items'> <td> <select name='item' class='country' onchange='evtselect(event)'> <option value=null>Please Select <?php $sql='select * from `irn_item` order by `irn`;'; $result=$db->query( $sql ); $html=array(); if( $result ){ while( $rs=$result->fetch_object() ){ $html[]="<option value='{$rs->irn}'>{$rs->name}"; } echo implode( PHP_EOL, $html ); } ?> </select> </td> <td><select name='service' class='country'></select></td> <td><input type='number' name='qty' min=0 max=1000 /></td> </tr> <tr class='save'> <td colspan='3'> <button type='submit' name='btnsave' class='btn btn-default'> <span class='glyphicon glyphicon-save'></span> Save </button> </td> </tr> </table> <input name='add' type='button' class='add-row' value='Add Row' /> </form> </body> </html>-<?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpwd = 'xxx'; $dbname = 'xxx'; $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname ); if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); try{ $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $id && !empty( $id ) ){ $html=array(); $sql='select `srn`,`instruction` from `irn_service` where `irn` = ? order by `srn` asc'; $stmt=$db->prepare( $sql ); if( $stmt ){ $stmt->bind_param( 's', $id ); $stmt->execute(); $stmt->store_result(); $stmt->bind_result( $srn, $instruction ); while( $stmt->fetch() ){ $html[]="<option value='{$srn}'>{$instruction}"; } $stmt->close(); } header('Content-Type: text/html'); echo implode( PHP_EOL, $html ); } }catch( Exception $e ){ echo $e->getMessage(); } exit(); } ?> <!doctype html> <html> <head> <title>Dependent / Chained SELECT menus</title> <script> /* AJAX FUNCTION */ function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } /* AJAX CALLBACK */ function createmenu(r,o,h){ o.menu.innerHTML=r; } /* UTILITY TO FIND NEXT SIBLING ELEMENT NODE */ function get_nextsibling(n){ x=n.nextSibling; while ( x.nodeType!==1 ) x=x.nextSibling; return x; } /* INLINE EVENT HANDLER */ function evtselect(e){ try{ var el=e.target; if( el.value=='null' || el.value==null )return false; var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':el.value }; var td=get_nextsibling( el.parentNode ); var oSelect=td.querySelector('select'); var opts={ menu:oSelect }; ajax.call( this, method, url, params, createmenu, opts ); }catch( err ){ console.log( err ); } } function bindEvents(){ var bttn=document.querySelector('input[name="add"]'); var tbl=document.querySelector('form#item_sel > table'); if( bttn && tbl ){ bttn.addEventListener('click',function(e){ /* get a reference to the first & last row, of class "item", in table */ var tr=tbl.querySelectorAll( 'tr.items' )[0]; var ref=tbl.querySelector( 'tr.save' ); /* Create a clone of the entire row - which includes the inline event handlers */ var clone=tr.cloneNode( true ); /* Insert the new row after the last row */ tr.parentNode.insertBefore( clone, ref ); /* Ensure that newly added "service" select menu is empty */ clone.querySelector('select[name="item[]"]').value='null'; clone.querySelector('select[name="service[]"]').innerHTML=''; clone.querySelector('input[name="qty[]"]').value=''; },{ capture:false, passive:true, once:false } ); } } document.addEventListener( 'DOMContentLoaded', bindEvents, false ); </script> <style type='text/css' charset='utf-8'> select {padding:1rem;width:300px;} </style> </head> <body> <h1>Chained select menus using basic ajax</h1> <form method='post' id='item_sel'> <table> <tr class='headers'> <th scope='col'>Item</th> <th scope='col'>Service</th> <th scope='col'>Qty</th> </tr> <tr class='items'> <td> <select name='item' class='country' onchange='evtselect(event)'> <option value=null>Please Select <?php $sql='select * from `irn_item` order by `irn`;'; $result=$db->query( $sql ); $html=array(); if( $result ){ while( $rs=$result->fetch_object() ){ $html[]="<option value='{$rs->irn}'>{$rs->name}"; } echo implode( PHP_EOL, $html ); } ?> </select> </td> <td><select name='service' class='country'></select></td> <td><input type='number' name='qty' min=0 max=1000 /></td> </tr> <tr class='save'> <td colspan='3'> <button type='submit' name='btnsave' class='btn btn-default'> <span class='glyphicon glyphicon-save'></span> Save </button> </td> </tr> </table> <input name='add' type='button' class='add-row' value='Add Row' /> </form> </body> </html>
С помощью этого кода я взял на себя задачу переименования недавно добавленных элементов – это, вероятно, не является абсолютно необходимым, поскольку вместо этого вы можете использовать array syntax для имен элементов – viz: <select name='item[]' onchange='evtselect(event)> или <input type='number' name='qty[]' /> т. д., тогда обычно используйте соответствующие значения в PHP. Следует отметить, что если вы решите этот подход (т. Е. Синтаксис массива), вам нужно будет посмотреть на различные селекторы, используемые в javascript, и соответствующим образом изменить имена.
Я надеюсь, что с этим новым пониманием использования inline event handlers вы сможете уловить проблему, которую у вас есть – вы можете с небольшим небольшим редактированием этого кода запустить ее для себя, чтобы убедиться, что приложение работает правильно. Вы должны отредактировать имена таблиц ( irn_item -> item , irn_service -> service ) и добавить соответствующие данные db / pwd … Удачи
Вы действительно должны изменить логику здесь, извините, но в этом случае статичный динамический контент не будет работать … что, если у нас есть строки 4 и 5 и 10 .. вам действительно нужно предоставить весь набор элементов общий класс затем присоединяет событие, используя делегирование события on() поэтому добавляются новые элементы, добавленные динамически.
Например, измените класс country на item в столбцах позиции и класс country для service в столбце службы:
$('body').on('change', '.item', function(){ //You're ajax logic here //Try to use `$.post()` instead //Target the related service list like var related_service_select = $(this).closest('tr').find('.service'); //Now you can fill it with the server side response });
Надеюсь это поможет.
Ваша проблема связана с этой ошибкой – Uncaught TypeError: невозможно установить свойство «onchange» null в HTMLDocument.bindEvents в строке 243. Вы можете видеть то же самое в элементах проверки. Это связано с тем, что вы определяете функцию bindEvents для item3, которая еще не добавлена. Также это будет работать только в случае добавления одной строки. Изменена ваша логика и многократно используется jquery. Я прокомментировал часть php в вашем коде и жестко закодировал этот материал. Также создан файл php, который отправляет ответ ajax при изменении поля выбора.
<?php // require_once '../home.php' ?> <?php foreach($_POST as $key => $val) { echo "$key => $val <br>"; } if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ echo "here <br>"; ob_clean(); // // $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); // $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); // if( $action && $id && !is_nan( $id ) ){ // // $stmt=$user_home->runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); // $stmt->bindParam(':irn',$id); // $stmt->execute(); // $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); // $stmtin->bindParam(':irn',$id); // $stmtin->execute(); // $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); // // if( $stmt->rowCount() > 0 ){ // echo "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; // } // } // } echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="container"> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php // //$sql='select * from `item` order by `Sr` asc;'; // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php // // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cont = 3; var qty = "qty"; var item = "item"; var what = "service"; $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); $('.container').on( 'change', '.country', function () { //console.log($(this).attr('name')); var oSelItem = $(this).attr('name'); var lastChar = oSelItem.substr(oSelItem.length -1); var prevChar = oSelItem.substr(0, oSelItem.length-1); //console.log(prevChar); if(prevChar === "item") { var oSelService = "service" + lastChar; console.log(oSelItem + " " + oSelService); console.log($(this).val()); var thisId = $(this).val(); $.ajax({ type: 'post', url: 'ajax.php', data: { 'id':thisId, 'action':'get_dependent_menu' }, success: function (response) { //alert(response); console.log(oSelService); $('select[name="'+ oSelService +'"]').html(response); } }); } }); }); </script> </body> </html>-<?php // require_once '../home.php' ?> <?php foreach($_POST as $key => $val) { echo "$key => $val <br>"; } if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ echo "here <br>"; ob_clean(); // // $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); // $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); // if( $action && $id && !is_nan( $id ) ){ // // $stmt=$user_home->runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); // $stmt->bindParam(':irn',$id); // $stmt->execute(); // $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); // $stmtin->bindParam(':irn',$id); // $stmtin->execute(); // $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); // // if( $stmt->rowCount() > 0 ){ // echo "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; // } // } // } echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="container"> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php // //$sql='select * from `item` order by `Sr` asc;'; // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php // // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cont = 3; var qty = "qty"; var item = "item"; var what = "service"; $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); $('.container').on( 'change', '.country', function () { //console.log($(this).attr('name')); var oSelItem = $(this).attr('name'); var lastChar = oSelItem.substr(oSelItem.length -1); var prevChar = oSelItem.substr(0, oSelItem.length-1); //console.log(prevChar); if(prevChar === "item") { var oSelService = "service" + lastChar; console.log(oSelItem + " " + oSelService); console.log($(this).val()); var thisId = $(this).val(); $.ajax({ type: 'post', url: 'ajax.php', data: { 'id':thisId, 'action':'get_dependent_menu' }, success: function (response) { //alert(response); console.log(oSelService); $('select[name="'+ oSelService +'"]').html(response); } }); } }); }); </script> </body> </html>всего<?php // require_once '../home.php' ?> <?php foreach($_POST as $key => $val) { echo "$key => $val <br>"; } if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ echo "here <br>"; ob_clean(); // // $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); // $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); // if( $action && $id && !is_nan( $id ) ){ // // $stmt=$user_home->runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); // $stmt->bindParam(':irn',$id); // $stmt->execute(); // $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); // $stmtin->bindParam(':irn',$id); // $stmtin->execute(); // $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); // // if( $stmt->rowCount() > 0 ){ // echo "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; // } // } // } echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="container"> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php // //$sql='select * from `item` order by `Sr` asc;'; // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php // // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var cont = 3; var qty = "qty"; var item = "item"; var what = "service"; $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); $('.container').on( 'change', '.country', function () { //console.log($(this).attr('name')); var oSelItem = $(this).attr('name'); var lastChar = oSelItem.substr(oSelItem.length -1); var prevChar = oSelItem.substr(0, oSelItem.length-1); //console.log(prevChar); if(prevChar === "item") { var oSelService = "service" + lastChar; console.log(oSelItem + " " + oSelService); console.log($(this).val()); var thisId = $(this).val(); $.ajax({ type: 'post', url: 'ajax.php', data: { 'id':thisId, 'action':'get_dependent_menu' }, success: function (response) { //alert(response); console.log(oSelService); $('select[name="'+ oSelService +'"]').html(response); } }); } }); }); </script> </body> </html>
И ajax.php
<?php echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; ?>