Why php code inside the javascript cannot change the value of innerHTML?

Question

This page include two web page, insert6.php is using iframe.
enter image description here

This full code of the web site of the page.
form6.php

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>CCC</title>
<style>
#tlist tr:last-child td {
    background-color:#CCCCCC;
}
table{
    table-layout: fixed;
}
th, td {
    overflow: hidden;
}
#container
{ 
margin-left:auto; 
margin-right:auto; 
width:600px;
}
</style>
</head>
<body>
<h3>New Record</h3>
<script language="JavaScript" type="text/javascript">
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 che = document.createElement('input');
 che.type = 'checkbox';
 che.id = 'op'+ iteration;
 che.name= 'checkbox';
 cellLeft.appendChild(che); 

 // right cell
 var cellRight = row.insertCell(1);
 var el = document.createElement('input');
 el.type = 'text';
 el.name = 'txtRow[]';
 el.id = 'txtRow' + iteration;
 el.size = 40;

 el.onkeypress = keyPressTest;
 cellRight.appendChild(el);

 // select cell
 var cellRightSel = row.insertCell(2);
 var sel = document.createElement('select');
 //sel.type = 'text';
 sel.name = 'selRow[]';
 sel.id = 'selRow' + iteration;
 sel.options[0]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="FF")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");
  sel.options[1]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="DD")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");
  sel.options[2]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="TT")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");
  sel.options[3]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="GG")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");
  sel.options[4]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="RR")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");
  sel.options[5]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="AA")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");

 cellRightSel.appendChild(sel);
}
function keyPressTest(e, obj)
{
 var validateChkb = document.getElementById('chkValidateOnKeyPress');
 if (validateChkb.checked) {
   var displayObj = document.getElementById('spanOutput');
   var key;
   if(window.event) {
     key = window.event.keyCode;
   }
   else if(e.which) {
     key = e.which;
   }
   var objId;
   if (obj != null) {
     objId = obj.id;
   } else {
     objId = this.id;
   }
   displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
 }
} 
function openInNewWindow(frm)
{
 // open a blank window
 var aWindow = window.open('', 'TableAddRowNewWindow',
  'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

 // set the target to the blank window
 frm.target = 'TableAddRowNewWindow';

 // submit
 frm.submit();
}
function validateRow(frm)
{
 var chkb = document.getElementById('chkValidate');
 if (chkb.checked) {
   var tbl = document.getElementById('tblSample');
   var lastRow = tbl.rows.length - 1;
   var i;
   for (i=1; i<=lastRow; i++) {
     var aRow = document.getElementById('txtRow' + i);
     if (aRow.value.length <= 0) {
       alert('Row ' + i + ' is empty');
       return;
     }
   }
 }
 openInNewWindow(frm);
}
function deleteAll(obj){ 
var checked = document.getElementsByName(obj); 
debugger 
for(var i = 0; i < checked.length; i ++){ 
if(checked[i].checked){ 
var tr=checked[i].parentNode.parentNode; 
var tbody=tr.parentNode; 
tbody.removeChild(tr); 
i--; 
} 
} 
}
</script>
<!--Input Data-->
<form action="insert6.php" method="post" target="myframe">
Series:
<?php
    function series(){
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");

    $query = "SELECT Series_NAME FROM series;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    echo("<option>".$row[$i]."</option>");
        }
        }
    mysql_free_result($result);
    }
?>
<select name="choose series">
<?php series(); ?>
</select><br>
<?php
    function height(){
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");

    $query = "SELECT height FROM width_height GROUP BY height;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    echo("<option>".$row[$i]."</option>");
        }
        }
    mysql_free_result($result);
    }
?>
<p>Height(MM):
<select name="height" id="height0">
<?php height(); ?>
</select></p>
<?php
    function width(){
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");

    $query = "SELECT width FROM width_height GROUP BY width;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    echo("<option>".$row[$i]."</option>");
        }
        }
    mysql_free_result($result);
    }
?>
<p>Width (MM):
<select name="width" id="width0">
<option><?php width(); ?></option>
</select><br>

<table border="1" id="tblSample">
 <tr>
   <td><input type="checkbox" id="op0" name="checkbox">
   </td>
   <td><input type="text" name="txtRow[]"
    id="txtRow0" size="40"/></td>
   <td>
   <select name="selRow[]" id="selRow0">
   <?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");

    $query = "SELECT tile FROM material ORDER BY `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    echo("<option>".$row[$i]."</option>");
        }
        }
    mysql_free_result($result);
    ?>
   </select>
   </td>
 </tr>
</table>
<input type="button" value="Add" onClick="addRowToTable();" />
<input type="button" name="delete_button" value="Delete" onClick="deleteAll('checkbox');" />
<input type="submit" name="submit" value="Submit" onclick="test();"/>
</form>
<script src="https://dl.dropboxusercontent.com/u/19096175/blog/selectDate/selectDate.js" type="text/javascript"></script>
Choose Date：<input onfocus="HS_setDate(this)" readonly="" type="text" value="Check" />
<br />
<hr/>
<iframe src="insert6.php" name="myframe" id="myframe" width="650" height="400" scrolling="no" frameborder="0"> 
</iframe> 
</body>
</html>

This full code of the web site of the page.
insert6.php

<!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>
<title>DDD</title>
<style>
#tlist tr:last-child td {
    background-color:#CCCCCC;
}
table{
    table-layout: fixed;
}
th, td {
    overflow: hidden;
}
#container
{ 
margin-left:auto; 
margin-right:auto; 
width:600px;
}
</style>
</head>
<body>

<?php
/*
$name = $_POST['selRow'];
$qty = $_POST['txtRow'];

foreach( $qty as $v ) {
print $v."<br>";
}

foreach( $name as $v ) {
print $v."<br>";
}
*/
?>
<script>
function delrecord(obj)  
{  
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);  
  var delbutton=document.getElementsByName("del");  
  var newzum=0;  
  for(var j=1;j <document.getElementsByName("del").length+1;j++)  
  {  
  newzum+=parseFloat(document.getElementById('total'+j).innerHTML);    
  }  
  znum.innerHTML =newzum; 
}  
function caltotal(e){
var fqty=document.getElementById('qty' +iteration);  
var fprice=document.getElementById('price' + iteration);  
var ftotal=document.getElementById('total'+ iteration);
var delbutton=document.getElementsByName("del");  
ftotal.innerHTML= fqty.innerHTML * fprice.innerHTML;

newzum =0;
for(var j=1;j <=document.getElementsByName("del").length;j++)  
{  
newzum += parseFloat(document.getElementById('total'+j).innerHTML);
}
znum.innerHTML = newzum;
}
</script>

<div class="container">
<table width="450" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">  
    <tr class="tit2">
    <td>QTY </td>
    <td>TILE </td>
    <td>HEIGHT </td>
    <td>WIDTH </td>
    <td>PRICE </td>
    <td>TOTAL </td>
    <td>Action </td>  
    </tr> 
    <tr class="tit3"> 
<?php
if(isset($_POST["submit"])){ 
$t=count($_POST['selRow']); 
$w=count($_POST['txtRow']);
for($i=0;$i<$t;$i++)
{
$qty[$i]= $_POST['txtRow'][$i];
$tile[$i]= $_POST['selRow'][$i];
$height = $_POST['height'];
$width = $_POST['width'];

echo "<tr class='tit3'><td>";
echo "".$qty[$i]."<br>";
echo "</td>";
echo "<td>";
echo "".$tile[$i]."<br>";
echo "</td>";
echo "<td>";
echo "".$height."<br>";
echo "</td>";
echo "<td>";
echo "".$width."<br>";
echo "</td>";
echo "<td>";
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    //foreach($_POST['selRow'] as $tile){

    $query = "SELECT `Price` FROM `actualpanelmaterialsize` WHERE `Material ID` IN (SELECT `Material_ID` FROM `material` WHERE `Tile` = '".$tile[$i]."') AND  `Width_Height ID` IN (SELECT `Width_Height ID` FROM `width_height` WHERE `Width` =".$_POST['width']." AND `Height` =".$_POST['height'].");";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    $price = $row[0];
    echo $price."<br>";
        }
    //}
echo "</td>";
echo "<td id='total[$i]'>";
echo $total[$i]=$price*$qty[$i];
echo "</td>";
echo "<td>";
echo "<input type='button' value='Delete' name='del' onclick='delrecord(this);'>";
echo "</td>";
echo "</tr>";
}
echo "<script>";
echo "newzum =0;";
echo "for(var j=0;j <=document.getElementsByName('del').length+1;j++) {" ;
echo "for (var i=0;i<=document.getElementById('total['+i+']').innerHTML.length;i++){";
echo "newzum += parseFloat(document.getElementById('total['+i+']').innerHTML);";
echo "}";
echo "}";
echo "document.getElementById('znum').innerHTML = newzum;";
echo "</script>";
} 
?> 

</tr> 
<tr class="tit3"> <td>Total </td> <td colspan=3> </td> <td colspan=2 align='right'> <b id="znum">0</b> </td> <td colspan=1> </td> </tr>
</table>
<script>
/*
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(document.getElementById("total["+i+"]").innerHTML);
}
*/
function Check(){
for (var i=0;i<=document.getElementById("total["+i+"]").innerHTML.length;i++){
window.alert(newzum);
}
}
</script>
<input type="button" value="Check" onClick="Check();"/>
</div>
</body>
</html>

Last, I was ask you guys about why znum.innerHTML cannot change the value. Now, I put the javascript code inside the php language, the result still wrong...

My expected result:
enter image description here

Now I see the result:
enter image description here

After click the Check button to see newznum is correct but znum.innerHTML could not change this value enter image description here

When pass the form to insert6.php, the total should be change the value. Now, I cannot do it. Anyone see the problem here?
Please you help me, I dun know where i get a mistake.

Thank you for reading my question!
I hope i will received the answer to help me to solve the problem

Dont post whole the code you have.Post relevant code only because it will be easy to debugg and will be easy to get helped — 웃웃웃웃웃, May 17 '14 at 06:42
*"Last, I was ask you guys about why znum.innerHTML cannot change the value."* If that is the case *and* it is relevant, please provide a link, or include relevant information in the question, or rather, do both. — GolezTrol, May 17 '14 at 06:48

score 2 · Accepted Answer · answered May 17 '14 at 06:57

At first, Separation of logic is very important and what i see frmo your code is you are making DB calls from your view itself. Which shows poor way of coding. It will make it difficult to manager your code.

sel.options[0]= new Option("<?php
    mysql_connect("localhost", "root", "root") or
    die("Could not connect: " . mysql_error());
    mysql_select_db("partition");
    $query = "SELECT tile FROM material ORDER BY  `material`.`Material_ID` ASC ;";
    $result = mysql_query($query);
    $row = mysql_fetch_row($result);
    mysql_data_seek($result,0);
    while ($row=mysql_fetch_row($result))
        {
    for ($i=0;$i<mysql_num_fields($result);$i++)
        {
    if ($row[$i]=="FF")
    echo($row[$i]);
        }
        }   
    mysql_free_result($result); 
  ?>");

Now answer to your question:

echo "newzum =0;";
echo "for(var j=0;j <=document.getElementsByName('del').length+1;j++) {" ;
echo "for (var i=0;i<=document.getElementById('total['+i+']').innerHTML.length;i++){";
echo "newzum += parseFloat(document.getElementById('total['+i+']').innerHTML);";
echo "}";
echo "}";
echo "document.getElementById('znum').innerHTML = newzum;";
echo "</script>";

This lines of code will be executed before the page is loaded as its php.

as a result, when the page is rendered the script will not find document.getElementsByName('del') so it will throw undefined error.

To overcome this, Do those actions in onload function.

window.onload = function() {
 // Inside this method put those lines. It will work.
}

window.onload cannot normally run. – Alex_OX_17 May 17 '14 at 08:27 — Alex_OX_17, May 17 '14 at 08:27
It will.. Can you update with you recent code? – mohamedrias May 17 '14 at 08:35 — mohamedrias, May 17 '14 at 08:35

score 0 · Answer 2 · answered May 17 '14 at 06:49

Your code is too long, but I will try to answer from your title.

You must understand how php and javascript work. php is a server-side language, while javascript is a client side language. You can NOT execute php inside javascript. php does the processing on the server and then returns the results to the client. After this, the server is not aware of the client state.

In order to change the value of innerHTML, you can just use javascript. If you need to somehow interact with php, you should send AJAX calls to the server, where the php script can process and return new data.

GolezTrol · Answer 3 · 2014-05-17T06:59:05.697

The PHP will just echo the Javascript code, which is fine, but needlessly complex. You can just enter the Javascript code in the page.

The actual problem right now is this line:

 document.getElementById('znum').innerHTML = newzum;

It is a line of Javascript in the global scope, and it will be executed as soon as the browser encounters it during the loading of the page. But the element is should modify ('znum') is a couple of lines lower on the page:

<b id="znum">0</b>

That basically means that the element is not ready yet when the script is executed, so it cannot be found.

The solution is relatively simple: Execute the Javascript later (at the bottom) of the page, so it will execute when all relevant elements are already loaded.

Script errors like this result in an error or a warning which should be visible in the Console tab in the developer tools (F12) of your browser. So make sure you always look at that when debugging Javascript. It's really a tool you should master as a web developer. :)

Why php code inside the javascript cannot change the value of innerHTML?

3 Answers3