Skip to content Skip to sidebar Skip to footer
Home / Ajax / Function / Html Table / Javascript / Php

Using Ajax Function In Added Row

Post a Comment
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><inputtype="button"value="Add Question"onclick="addRow('dataTable')"><br><br><tableid="dataTable" ><tr><th>Q</th><th>Keyword</th><th>Chapter</th><th>CLO</th><th> Marks</th></tr><trid=0><td> 1</td><td><inputtype="text"name="keyword"></td><td>&nbsp;&nbsp;<selectname="chapter"onchange="CLO(this.parentElement.parentElement.id)"><optionvalue="" ></option><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option></select></td><tdid="CLO">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></td><td><inputtype="text"name="Assess_Mark"></td></tr></table><form></body>

The modified JS

functionaddRow(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;
            }
  }
  functionCLO(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 = newXMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = newActiveXObject("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"