function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "File";
cell2.appendChild(element2);
//cell2.innerHTML = rowCount + 1;
}
How to access the values added in the text boxes in php from here?
Please advise.
Since Javascript is on the client and PHP on the server you are going to have to submit these values to the server via a form.
Related
I am passing a parameter to a php url. For example, name.local.test/api.php?id=5&name=test. I was then getting the data from the url using the GET method and was saving it into a mysqlite database. After saving I am displaying the saved data with Json_encoded format.
[{"time":"1561384655","ip":"192.168.103.151","waterlevel":"85","station":"Near the Training Center","humidity":"39","temperature":"26"}
what is the easiest way to print such values in the json format on php page?
I am expecting something like:
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//Push the data in array
var time = new Date().toLocaleTimeString();
var txt = this.responseText;
var obj = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
ADCvalues.push(obj.waterlevel);
Tvalues.push(obj.temperature);
Hvalues.push(obj.humidity);
timeStamp.push(time);
showGraph(); //Update Graphs
//Update Data Table
var table = document.getElementById("dataTable");
var row = table.insertRow(1); //Add after headings
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = time;
cell2.innerHTML = obj.waterlevel;
cell3.innerHTML = obj.temperature;
cell4.innerHTML = obj.humidity;
}
};
xhttp.open("GET", "http://abdikani.local.abaarsoschool.org/json.php", true); //Handle readADC server on ESP8266
xhttp.send();
}
I changed the database columns to be not nullable and not it works find. But still, no values are received. here is the console error: 4abdikani.local.ask.org/json.php:1 Failed to load resource: net::ERR_NAME_NOT_RESOLVED 4graphs.html:153 GET abdikani.local.ask.org/json.php net::ERR_NAME_NOT_RESOLVED –
what will be the solution for such an error. The code answer for the question How to turn a json files into a graph? returns this error
Here is the main part of the code. I want it to return the value from the local php page and display it on a graph.
function getData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//Push the data in array
var time = new Date().toLocaleTimeString();
var txt = this.responseText;
var obj = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
console.log(obj);
obj.forEach(function(element_data){
console.log(element_data);
ADCvalues.push(element_data.waterlevel);
Tvalues.push(element_data.temperature);
Hvalues.push(element_data.humidity);
timeStamp.push(time);
showGraph();
var table = document.getElementById("dataTable");
var row = table.insertRow(1); //Add after headings
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = time;
cell2.innerHTML = element_data.waterlevel;
cell3.innerHTML = element_data.temperature;
cell4.innerHTML = element_data.humidity;
});
}
};
xhttp.open("GET", "http://abdikani.local.ask.org/json.php", true); // Works fine with me using the same json document locally - Handle readADC server on ESP8266
xhttp.send();
}
</script>
</body>
</html>
I need some help in displaying all the values in a Firebase database, in a table.
As is, it is just displaying the first value in the table alone
Results:
var tblCodes = document.getElementById('tbl_qrcode_list');
var databaseRef = firebase.database().ref('qrcode/');
var rowIndex = 1;
databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblCodes.insertRow(rowIndex);
var cellId = row.insertCell(0);
var cellName = row.insertCell(1);
cellId.appendChild(document.createTextNode(childKey));
cellName.appendChild(document.createTextNode(childData.qrcode_desc));
rowIndex = rowIndex + 1;
});
});
function save_code(){
var qrcode_desc = document.getElementById('qrcode_desc').value;
var qrcode_grp = document.getElementById('qrcode_grp').value;
var qrcode_stg = document.getElementById('qrcode_stg').value;
var qrcode_img = document.getElementById('qrcode_img').value;
var qrid = firebase.database().ref().child('qrcode').push().key;
var data = {
qrcode_id: qrid,
qrcode_desc: qrcode_desc,
qrcode_grp: qrcode_grp,
qrcode_stg: qrcode_stg,
qrcode_img: qrcode_img,
}
You need to create a cell for each value here :
you need to create cells for each data
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cellName.appendChild(document.createTextNode(childData.qrcode_desc));
cellName.appendChild(document.createTextNode(childData.qrcode_grp));
cell3.appendChild(document.createTextNode(childData.qrcode_id));
cell4.appendChild(document.createTextNode(childData.qrcode_img));
cell5.appendChild(document.createTextNode(childData.qrcode_stg));
i want to do a very simple thing. I want to populate the list of a drop-down box based on the value of the 1st drop-down box. So these 2 boxes are the only elements in a table, which creates rows dynamically(on the click of a button). I am a newbie in html.. and have almost spent 2 entire days in vain in this...
This is the code:
HTML Code:
<table border="1" id="areas">
<tr>
<th colspan="3">Areas Serviced</th>
</tr>
<tr>
<td>
<select name='city1' id='city1' onChange="dynamic1(this,'txtRow1');">
<option value="">Please select a city</option>
<option value='Bangalore'> Bangalore </option>
<option value='Mumbai'> Mumbai</option>
</select>
<option></option>
</td>
<td>
<select name="txtRow1" id="txtRow1">
<option value="">Please Select an area</option>
<option></option>
</select>
</td>
</tr>
</table>
<input type="button" value="Add another Area" onClick="addRowToTable();" /> <input type="button" value="Remove" onClick="removeRowFromTable();" />
</br>
</br>
<input type="submit" name="submit" id="submit" value="Submit" />
Javascript:
function dynamic1(parent,child){
var parent_array = new Array();
parent_array[''] = ['Please select a city'];
parent_array['Bangalore'] = ['Marathahalli','Kadubeesanahalli'];
parent_array['Mumbai'] = ['Andheri','Santacruz'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
function addRowToTable()
{
var tbl = document.getElementById('areas');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var col = document.createElement("TR");
var cell1 = document.createElement("TD");
var txt0= document.createTextNode(iteration);
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
var id2=combo2.id;
combo1.setAttribute("name","city");
combo1.setAttribute("onChange","dynamic1(this,id2);");
combo11.setAttribute("value","Bangalore");
combo11.innerHTML="Bangalore";
combo12.setAttribute("value","Mumbai");
combo12.innerHTML ="Mumbai";
combo2.setAttribute("name","area");
combo2.setAttribute("id","txtRow"+iteration);
combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);
var cell2 = document.createElement("TD");
cell2.appendChild(combo1);
var cell3 = document.createElement("TD");
cell3.appendChild(combo2);
col.appendChild(cell2);
col.appendChild(cell3);
tbl.appendChild(col);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
This code does not work.
Alternate Javascript code:
function SetMedia(objCity,iteration) {
var objArea = document.getElementById("txtRow"+iteration);
objArea.options.length = 0;
objArea.disabled = false;
switch (objCity.value) {
case "Bangalore":
objArea.options.add(new Option("Marathahalli"));
objArea.options.add(new Option("Kadubeesanahalli"));
break;
case "Mumbai":
objArea.options.add(new Option("Andheri"));
objArea.options.add(new Option("Santacruz"));
break;
default:
objArea.options.add(new Option("select"));
objArea.disabled = true;
break;
}
}
function addRowToTable()
{
var tbl = document.getElementById('areas');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var col = document.createElement("TR");
var cell1 = document.createElement("TD");
var txt0= document.createTextNode(iteration);
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
combo1.id="city"+iteration;
var id1=combo1.id;
combo2.id="txtRow"+iteration;
var id2=combo2.id;
combo1.setAttribute("name","city");
combo1.onChange=func(){SetMedia(id1,iteration);}
combo11.setAttribute("value","Bangalore");
combo11.innerHTML="Bangalore";
combo12.setAttribute("value","Mumbai");
combo12.innerHTML ="Mumbai";
combo2.setAttribute("name","area");
combo2.setAttribute("id","txtRow"+iteration);
combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);
var cell2 = document.createElement("TD");
cell2.appendChild(combo1);
var cell3 = document.createElement("TD");
cell3.appendChild(combo2);
col.appendChild(cell2);
col.appendChild(cell3);
tbl.appendChild(col);
}
Basically, I am not able to link the dynamically created object(drop-down number 2) to drop-down number 1 since I am not able to get the 'id's of the elements dynamically generated...
After this, I also need to use these values entered in another php script using POST...
This part doesn't work. You can't write to the .length property of an array or collection.
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
replace with
while (thechild.options[0]) thechild.removeChild(thechild.options[0]);
var parent_value = parent.options[parent.selectedIndex].value;
if (parent_array[parent_value]) {
for(var i=0;i<parent_array[parent_value].length;i++){
var o = document.createElement('option');
o.text = parent_array[parent_value][i];
o.value = parent_array[parent_value][i];} }
thechild.appendChild(o);
}
}
In the first javascript you are attempting to read the id attribute of combo2 before you have set it.
In the second javascript you are just adding two empty options to the select element (combo2).
I am trying to make a form in which there will be a button, when clicking on it a Javascript function will be called and a new row with a textbox will be added. In simple words, when clicking on the button, new text will be added. Here is the function:
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
cellRight.appendChild(el);
// select cell
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'selRow' + iteration;
sel.options[0] = new Option('text zero', 'value0');
sel.options[1] = new Option('text one', 'value1');
cellRightSel.appendChild(sel);
}
Now please guide me: how can I set the default value of the text box and drop down box? I mean in this code where should I put <?php echo $data['pno'];?>
I have tried putting in the HTML form; for the first row it works but for the second row it doesn't work. Thanks.
i have solved in this way
<input type="button" value="Add" onClick="addRowToTable(<?php echo $data['pno'];?>);" />
and on the javascript side
function addRowToTable(a)
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.value=a; // here i have achived the value
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
}
might be its not a good solution but for my case it works
How about you save the default value in a separate JS variable in your html like:
var defaultValue = "<?php echo $data['pno'];?>";
Or try this:
var defaultValue = "<?= $data['pno'] ?>";
Then when you are adding new input you can use it like this:
el.value = defaultValue;