Problem in getting data using document.getElementById

Hi…

I got an error: Object Required when I use this code:


    var SubQty = document.getElementById("SubQty").value;

<input class='txt' type='text' name='SubQty[]' id='$joinId' size='12' style= 'border:none;' value=''/>

How can I get the value?

Thank you

The bit in red here:

document.getElementById("[COLOR="#FF0000"]SubQty[/COLOR]")

needs to be an id on the target element. E.g

<input id="SubQty" ... >

BUt my id= ‘$joinId’;

because it counts using php:

here is my whole code:


<?php                                                                          
   error_reporting(0);
   date_default_timezone_set("Asia/Singapore"); //set the time zone  
$con = mysql_connect('localhost', 'root','');

if (!$con) {
    echo 'failed';
    die();
}

mysql_select_db("mes", $con);

?>
<html>
<title>Stock Requisition</title>
<head>
<link rel="stylesheet" type="text/css" href="kanban.css">



<script type="text/javascript">
function save_sr(){

    var SubQty = document.getElementsById("joinId").value;
    

}


</script>

<script type="text/javascript">

function test_(cmpd) {
    var len_ = (document.frmMain.elements.length) - 1;
  
     for (i=0; i <= len_; i++ ) {

       var strPos_ = document.frmMain.elements[i].id.indexOf(cmpd)

              if (strPos_ != -1) {
              var strPos = document.frmMain.elements[i].id.indexOf("_");
              
var strId = document.frmMain.elements[i].id.slice(strPos + 1) + "_" + document.frmMain.elements[i].id.slice(0,strPos)               
   document.frmMain.elements[i].value = Math.round((document.getElementById(strId).value * document.getElementById('DemandedQty').value) * 100 ) / 100;  
     } 
    }  
}
</script>

</head>
<body>
<form name="frmMain"  method="post">


   <div>
<table>
<thead>
<th>Items</th>
<th>Sub Items</th>
<th>Item Code</th>
<th>Demanded Qty</th>
<th>UoM</th>
<th>Class</th>
<th>Description</th>
<th>BIN Location</th>
</thead>
<?php

$DemandedQty = $_POST['DemandedQty'];

$sql = "SELECT DISTINCT Items FROM bom_subitems ORDER BY Items";
$res_bom = mysql_query($sql, $con);
while($row = mysql_fetch_assoc($res_bom)){
    
    $Items = $row['Items'];
    $Items_ = substr($Items, 12, 3);
    
echo "<tr>
        <td style='border: none;font-weight: bold;'>&nbsp;<input type='name' value='$Items_' name='Items_[]' id='Items_' readonly = 'readonly' style = 'border:none;width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border:none;'>&nbsp;</td>
        <td style='border:none;'>&nbsp;</td> 
        <td style='border: none;'><center><input type='text' style='text-align: right;' name='DemandedQty[]' id='DemandedQty' size='12' onkeyup='test_(\\"$Items_\\")'></center></td>     
        </tr>"; 
             
$sql = "SELECT Items, SubItems, ItemCode, UoM, Class, Description, BINLocation, Quantity FROM bom_subitems WHERE Items = '$Items' ORDER BY Items"or die(mysql_error());

$res_sub = mysql_query($sql, $con);  
 $counter = 0;
 while($row_sub = mysql_fetch_assoc($res_sub)){
     $joinId = $counter . "_" .  $Items_;      
     $Items = $row_sub['Items'];
     $Items1 = substr($Items, 12, 3);
     $SubItems = $row_sub['SubItems'];
     $ItemCode = $row_sub['ItemCode'];
     $UoM = $row_sub['UoM'];
     $Class = $row_sub['Class'];
     $Description = $row_sub['Description'];
     $BINLocation = $row_sub['BINLocation'];
     $Quantity = $row_sub['Quantity']; 
     $joinId2 =  $Items_ . "_" . $counter;

    echo "<tr>
        <td style='border: none;'>&nbsp;<input type='hidden' value='$Items1'  name='Items1[]' id='Items1'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='SubItems[]' id='SubItems' value='$SubItems'  readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='ItemCode[]' id='ItemCode' value='$ItemCode'  readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td><input class='txt' type='text' name='SubQty[]' id='$joinId' size='12' style= 'border:none;'/><input type='hidden' id='$joinId2' value='$Quantity' /></td>
        <td style='border: none;' size='3'>&nbsp;<input type='text' name='UoM[]' id='UoM' value='$UoM' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size='3'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='Class[]' value='$Class' name='Class' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='Description[]' value='$Description' id='Description' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size= '30'></td>
        <td style='border: none;'>&nbsp;<input type='text' name='BINLocation[]' value='$BINLocation' id='BINLocation' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td>     
        </tr>";    
 $counter  = $counter  + 1;
}
} 
                 
?>
</table>
</div>


<div id="save_btn">
<input type="button" name="button" value="save" onClick="save_sr()" style="width: 5em;">


</div>
</form>
</body>
</html>

Thank you

The important thing for JavaScript is what will be output as the id. What will the id be once the PHP has been parsed? If you don’t know, then there may be a better way to select that element. You could target the class instead, or getElementByTagName etc.

what do you mean for this: What will the id be once the PHP has been parsed?
I need to cound the ID using php.

Thank you

PHP never makes it to the browser, so JavaScript won’t see id=‘$joinId’. It will look like something else in the HTML. You need to know what will be output in the browser to be able to tell JS what the id is. Otherwise, as I added above, perhaps target the input in a different way, via the class, or with getElementsByTagName(‘input’).

How can I target using class?

Thank you

I don’t know much JS, unfortunately, but here’s two ways I managed to get the value of that element:


var el = document.getElementsByTagName('input');
var SubQty = el[5].getAttribute("value");

and


var el = document.getElementsByClassName('txt');
var SubQty = el[0].getAttribute("value");

However, using getElementsByClassName is dangerous, as it’s new to JS and not supported in older browsers. In that case, you could use a workaround, such as here:

Thank you it solve my problem

It’s not new to JS. The only main browsers that don’t support it is IE8 and down.

All is relative. :slight_smile: As I understand it, it’s part of the HTML5 DOM, which I consider to be new.

I consider “new” to be based off time relation.