Value to display in another textbox using ajax for dynamic textbox

[rpv_sen]

Hi

I am trying to populate textbox value based on releated textbox value like that of (Country and State) using dynamic row formate. I can able to populate a value for only first row, if i tried ti for second row its again overwrite the first row and also i am trying the hide some textbox based on the value. Can anyone please help to solve this issue.

Note: I have attached screenshot for your reference.
Html

<button type="button" class="btn btn-info" id="delete">- Delete</button>
                                    <button type="button" class="btn btn-info" id="addmore">+ Add More</button>
                                    <div class="clear"></div><br>
                                    <table>
                                      <tr align="center">
                                          <td><input class='check_all' type='checkbox' onclick="select_all()"/></td>
                                          <td>Line Number</td>
                                          <td>Connection Type</td>
                                          <td>Type</td>
                                          <td>Condition</td>
                                          <td>Open Query Statement</td>
                                          <td>Return Code</td>
                                          <td>Report Name</td>
                                          <td>Report Version 1</td>
                                          <td>Report Description</td>
                                          <td>Dep.Flag Sequence</td>
                                          <td>Dep Report Description</td>
                                          <td>Email PDF / CSV </td>
                                          <td>Manual Break</td>
                                          <td>Job Queue</td>
                                          <td>Execution Server Name</td>
                                          <td>Email Grp Name</td>
                                        </tr>
                                      <tr>
                                            <td><input type='checkbox' class='case'/></td>
                                            <td><input type='text' name='flag_seq[]' id='flag_seq'/></td>
                                            <td><input type='text' name='conn_type[]' id='conn_type' onChange='showptype(this.value);'></td>
                                            <td><div id='txtHint'></div></td>
                                            <td><input type='text' name='cond[]' id='cond'></td>
                                            <td><input type='text' name='oqs[]' id='oqs'></td>
                                            <td><input type='text' name='rcode[]' id='rcode'></td>
                                            <td><input type='text' name='report_name[]' id='report_name'></td>
                                            <td><input type='text' name='report_ver[]' id='report_ver'></td>
                                            <td><input type='text' name='report_desc[]' id='report_desc'></td>
                                            <td><input type='text' name='dep_flag_seq[]' id='dep_flag_seq'></td>
                                            <td><input type='text' name='dep_rep_desc[]' id='dep_rep_desc'></td>
                                            <td><input type='text' name='pdf_csv[]' id='pdf_csv'></td>
                                            <td><input type='text' name='manual_break[]' id='manual_break'></td>
                                            <td><input type='text' name='Job_que[]' id='Job_que'></td>
                                            <td><input type='text' name='eserver_name[]' id='eserver_name'></td>
                                            <td><input type='text' name='email_grp[]' id='email_grp'></td>
                                      </tr>
                                    </table>
                                    <div class="form-group"><input name="Submit" type="submit" id="Submit" class="btn btn-info" value="Submit"></div>

                                    <script type="text/javascript">
function checkEnableSubmit() { 
var ptype = document.getElementById('ptype'); 
var cond = document.getElementById('cond');
var oqs = document.getElementById('oqs');
var rcode = document.getElementById('rcode');
var report_name = document.getElementById('report_name');
var report_ver = document.getElementById('report_ver');
cond.disabled = (ptype.value == "JDE"); 
oqs.disabled = (ptype.value == "JDE"); 
rcode.disabled = (ptype.value == "JDE");
report_name.disabled = (ptype.value == "FILE"); 
report_ver.disabled = (ptype.value == "FILE"); 
rcode.disabled = (ptype.value == "FILE");
cond.disabled = (ptype.value == "SQL"); 
report_ver.disabled = (ptype.value == "SQL"); 
rcode.disabled = (ptype.value =="SQL");
} 
</script>

 <script type="text/javascript">

function showptype(str1)
{
if (str1=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getptype.php?q="+str1,true);
xmlhttp.send();
}
</script>
<script language="javascript">
var i=2;
$("#addmore").on('click',function(){
    var data="<tr><td><input type='checkbox' class='case'/></td>";
    data +="<td><input type='text' name='flag_seq[]' id='flag_seq"+i+"'/></td><td><input type='text' name='conn_type[]' id='conn_type"+i+"' onChange='showptype(this.value)'></td> <td><div id='txtHint'></div></td><td><input type='text' name='cond[]' id='cond"+i+"'></td><td><input type='text' name='oqs[]' id='oqs'></td><td><input type='text' name='rcode[]' id='rcode"+i+"'></td><td><input type='text' name='report_name[]' id='report_name"+i+"'></td><td><input type='text' name='report_ver[]' id='report_ver"+i+"'></td><td><input type='text' name='report_desc[]' id='report_desc"+i+"'></td><td><input type='text' name='dep_flag_seq[]' id='dep_flag_seq"+i+"'></td><td><input type='text' name='dep_rep_desc[]' id='dep_rep_desc"+i+"'></td><td><input type='text' name='pdf_csv[]' id='pdf_csv"+i+"'></td><td><input type='text' name='manual_break[]' id='manual_break"+i+"'></td><td><input type='text' name='Job_que[]' id='Job_que"+i+"'></td><td><input type='text' name='eserver_name[]' id='eserver_name"+i+"'></td><td><input type='text' name='email_grp[]' id='email_grp"+i+"'></td></tr>";
    $('table').append(data);
    i++;
});
</script>
<script>
$("#delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();

});
</script>
<script>
function select_all() {
    $('input[class=case]:checkbox').each(function(){ 
        if($('input[class=check_all]:checkbox:checked').length == 0){ 
            $(this).prop("checked", false); 
        } else {
            $(this).prop("checked", true); 
        } 
    });
}

</script>

getptype.php

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

$q=$_GET["q"];

$qi = trim($_GET["q"]);
 //$qi = count($q);

$query="select * from $database.FQ64006 WHERE SCYQ64CTYPE='$qi'";
$btype=odbc_exec($connection,$query);
//$bcom = odbc_result($bcompany,"MCCO");
?>
<input type="text" name="ptype[]" id="ptype" value="<?php $SCYQ64TYPE1 = odbc_result($btype,"SCYQ64TYPE"); echo $SCYQ64TYPE = trim($SCYQ64TYPE1) ?>" onChange="checkEnableSubmit();">

[Excizted]

Hi there,

When you are updating the text hint with Ajax, your Javascript code looks for the first element with ID="txtHint".

But you are creating multiple elements with ID="txtHint" and so your hint will always be shown in the first row.

To resolve this you need to correlate the Ajax call to a given row and make sure your ID's are unique.

For example when creating a new row (line 98 in your snippet) do something like

var numRows = 1; // keep track of how many rows you have
$('#addmore').on('click', function(){
numRows++; // when adding a row, increment the count
...
data += '<input type="text" name="conn_type[]" id="conn_type" onChange="showptype(this.value, \'txtHint' + numRows + '\');">...<div id="txtHint' + numRows + '"></div>...';
// use the number in the ID of your element ^ and when calling Ajax
...
}

Now you just need to use the second argument of showptype to find the right txtHint.

function showptype(str1, txtHintID) // second parameter added
{
if (str1=="")
  {
  // we use the variable txtHintID which should contain fx "txtHint2" or "txtHint7" depending on the row called from
  document.getElementById(txtHintID).innerHTML=""; 

  ... // and so on, update your other txtHint-references too

This should be more than enough to get you finished.

Remember - always keep unique IDs or things will break ;-)

[rpv_sen]

Thanks for your help

[Lucifer_1]

I have two textbox and 2 listbox where if i have entered some value in first textbox then in second textbox value should fetch from database on basis of first textbox then all data should be get checked and then it will redirect to submission form