+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: General (https://forum.codeigniter.com/forumdisplay.php?fid=1)
+--- Forum: Lounge (https://forum.codeigniter.com/forumdisplay.php?fid=3)
+--- Thread: getElemntbyid returns undefined value (/showthread.php?tid=71541)
getElemntbyid returns undefined value - kvanaraj - 08-27-2018
var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion
RE: getElemntbyid returns undefined value - InsiteFX - 08-27-2018
Read this:
Document.getElementById()
Then bookmark the website in your web browser.
RE: getElemntbyid returns undefined value - kaitenz - 08-27-2018
Have you tried "jQuery"?
Quote:jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML
It is free. Give it a try.
But if you prefer to stick with traditional JavaScript, then follow what InsiteFX said.
RE: getElemntbyid returns undefined value - kvanaraj - 08-27-2018
(08-27-2018, 10:18 PM)kaitenz Wrote: Have you tried "jQuery"?
Quote:jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML
It is free. Give it a try.
But if you prefer to stick with traditional JavaScript, then follow what InsiteFX said.
I tried but first row only affected.
echo '<td><input type="number" id="primaryincome" class="form-control" placeholder="0"> </td>';
<script type="text/javascript">
$("#primaryincome").click(function () {
var primaryincome = $("#primaryincome").val();
// var otherincome = $("#otherincome").val();
var totalincome = parseInt(primaryincome) + parseInt(primaryincome);
alert(totalincome);
$("#totalamountremaining").val(totalincome);
})
</script>
RE: getElemntbyid returns undefined value - Vitaly83 - 08-27-2018
(08-27-2018, 01:49 AM)kvanaraj Wrote: var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion
Display 'texttwo_'+rowid result and check if this element exists. Using of jQuery and other libs will not help if the element with this ID is not exists.
Just call console.log('texttwo_'+rowid) before call document.getElementById to check what element you try to get.
If document.getElementById returns null, then that element is not exists or hasn't created yet if it is a dynamical element.
RE: getElemntbyid returns undefined value - kvanaraj - 08-28-2018
(08-27-2018, 11:36 PM)Vitaly83 Wrote:It returns texttwo_1 or texttwo_2(08-27-2018, 01:49 AM)kvanaraj Wrote: var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion
Display 'texttwo_'+rowid result and check if this element exists. Using of jQuery and other libs will not help if the element with this ID is not exists.
Just call console.log('texttwo_'+rowid) before call document.getElementById to check what element you try to get.
If document.getElementById returns null, then that element is not exists or hasn't created yet if it is a dynamical element.
**********************
Yes it's a dynamical element
it's a input type
echo '<td id="texttwo_'.$row['id'].'">
<input type="number" min="0" max="999" name="acr"
onChange="sum('.$row['id'].');" class="txtbox" ></td>';
It is a muliple row. each row has different value that should be calculated based on this second row
RE: getElemntbyid returns undefined value - kaitenz - 08-28-2018
(08-27-2018, 11:36 PM)Vitaly83 Wrote: Using of jQuery and other libs will not help if the element with this ID is not exists.
Using jQuery, you can check whether the element exist.
Code:
if($('#texttwo_'+rowid).length)
{
// Do code
}I always do that check when I'm using DataTables or some other JS plugins. I first check if that table exists, then if yes, I initialize DT to that table. It always works for me.
Edit:
By the way, the code above will only return 0 or 1 (true or false equivalents) so no need to do if($('#texttwo_'+rowid).length > 0)
Correct me if I'm wrong.
RE: getElemntbyid returns undefined value - kaitenz - 08-28-2018
(08-27-2018, 10:52 PM)kvanaraj Wrote: I tried but first row only affected.
echo '<td><input type="number" id="primaryincome" class="form-control" placeholder="0"> </td>';
<script type="text/javascript">
$("#primaryincome").click(function () {
var primaryincome = $("#primaryincome").val();
// var otherincome = $("#otherincome").val();
var totalincome = parseInt(primaryincome) + parseInt(primaryincome);
alert(totalincome);
$("#totalamountremaining").val(totalincome);
})
</script>
Once you clicked the #primaryincome textbox (I assume it's a textbox because of the [type="number"]), it executes the code immediately. And since no default value was entered (but I'm suspecting that you mean [value="0"] instead of [placeholder="0"]), it will give you an invalid result.
I think your target is to when a user changes the value in your textbox, the code will be executed.
If that's what you want, you need to use $('#primaryincome').change() instead of $().click()
RE: getElemntbyid returns undefined value - Vitaly83 - 08-29-2018
(08-28-2018, 12:21 AM)kvanaraj Wrote:(08-27-2018, 11:36 PM)Vitaly83 Wrote:It returns texttwo_1 or texttwo_2(08-27-2018, 01:49 AM)kvanaraj Wrote: var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion
Display 'texttwo_'+rowid result and check if this element exists. Using of jQuery and other libs will not help if the element with this ID is not exists.
Just call console.log('texttwo_'+rowid) before call document.getElementById to check what element you try to get.
If document.getElementById returns null, then that element is not exists or hasn't created yet if it is a dynamical element.
**********************
Yes it's a dynamical element
it's a input type
echo '<td id="texttwo_'.$row['id'].'">
<input type="number" min="0" max="999" name="acr"
onChange="sum('.$row['id'].');" class="txtbox" ></td>';
It is a muliple row. each row has different value that should be calculated based on this second row
If they're dynamical and create on document load then run you code in:
Code:
document.addEventListener("DOMContentLoaded", () => {
// TODO: your code here
});or if you use jQuery in:
Code:
$(document).ready(() => {
// TODO: your code here
});RE: getElemntbyid returns undefined value - Wouter60 - 08-29-2018
What's the point in getting elements by id if the id's are dynamic?
Instead, use a css class as the selector. Then, use the $(this).parents('tr') method to get the row in the table.
Example:
PHP Code:
<table>
<?php foreach($rows as $row) : ?>
<tr>
<td><input type="text" name="text_one[]" class="findrow" /></td>
<td><span class="showme"><?= $row['id'];?></span></td>
</tr>
<?php endforeach; ?>
</table>
Code:
<script>
$(document).ready(function(){
$('.findrow').change(function(){
row = $(this).parents('tr');
t2 = row.find('.showme').html();
alert(t2);
});
});
</script>After you change the value in one of the input fields, the id of the current row will be displayed in an alert box.