Using AJAX Function In Added Row
In my page user can click on button (add question) to add new row In each row CLO value will be determine based on Keyword and chapter he provide function CLO() will be call after
Solution 1:
The Modified html
<body><form>
<input type="button" value="Add Question" onclick="addRow('dataTable')"><br> <br>
<table id="dataTable" >
<tr><th>Q</th><th>Keyword</th>
<th>Chapter</th>
<th>CLO</th>
<th> Marks</th></tr>
<tr id=0><td> 1</td><td> <input type="text" name="keyword"> </td>
<td> <select name="chapter" onchange="CLO(this.parentElement.parentElement.id)"> <option value="" > </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td id="CLO"> </td> </td>
<td> <input type="text" name="Assess_Mark"> </td></tr>
</table><form></body>
The modified JS
function addRow(tableID){
var table=document.getElementById(tableID);
var rowCount=table.rows.length;
var row=table.insertRow(rowCount);
row.id = Number(table.rows[rowCount-1].id)+1;
var colCount=table.rows[1].cells.length;
var cell1=row.insertCell(0);
cell1.innerHTML= rowCount;
for(var i=1;i<colCount;i++){
var newcell=row.insertCell(i);
newcell.innerHTML=table.rows[1].cells[i].innerHTML;
}
}
function CLO(rowID) {
var a=document.getElementsByName("keyword")[rowID].value;
var b=document.getElementsByName("chapter")[rowID].value;
console.log("marks = "+a +" chapter = "+b)
if (a == ""&& b == "") {
document.getElementById("CLO").innerHTML = "";
return;
} else {
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("CLO").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","PLO.php?q1="+escape(a)+"&q2="+escape(b),true);
xmlhttp.send();
}
}
Post a Comment for "Using AJAX Function In Added Row"