Welcome Guest, Not a member yet? Register   Sign In
getElemntbyid returns undefined value
#1

var txtSecondNumberValue = document.getElementById('texttwo_'+rowid).value;
return indefined value in javascript. but in the POST values working . need suggestion
Reply
#2

Read this:

Document.getElementById()

Then bookmark the website in your web browser.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#3

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.
Reply
#4

(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>
Reply
#5

(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.
Reply
#6

(This post was last modified: 08-28-2018, 12:36 AM by kvanaraj.)

(08-27-2018, 11:36 PM)Vitaly83 Wrote:
(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.
It returns texttwo_1 or texttwo_2
**********************
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
Reply
#7

(This post was last modified: 08-28-2018, 04:54 AM by kaitenz. Edit Reason: added info )

(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.
Reply
#8

(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()
Reply
#9

(08-28-2018, 12:21 AM)kvanaraj Wrote:
(08-27-2018, 11:36 PM)Vitaly83 Wrote:
(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.
It returns  texttwo_1 or texttwo_2
**********************
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
});
Reply
#10

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.
Reply




Theme © iAndrew 2016 - Forum software by © MyBB