0

i have javascript with name something.js. in js file i have funtion like this 

$(document).ready(function() {
tampilInterval();       
$('#mydata').html();
function tampilInterval() {
    $.ajax({
        type  : 'ajax',
        url:$("#baseurl").val(),
        dataType:"json",
        method:"post",
        success : function(data){
            var html = '';
            var i;
            html += '<tr>'+
                '<td>'+data[0].key+'</td>'+
                '<td><input type="text" class="form-control" id="int0" name="int0" value="'+data[0].value+'"></td>'+
                '</tr><tr>'+
                '<td>'+data[1].key+'</td>'+
                '<td><input type="text" class="form-control" id="int1" name="int1" value="'+data[1].value+'"></td>'+
                '</tr>';
                $('#show_data').html(html);
        }
    });
};

in my case, i want to use value from id -> int0 and int1 to another function in same file.

i have code to get and check that values like this

var int0 = document.getElementsByName('int0').value;
var int1 = document.getElementById('int1');

but it said 'null'. how to get that value ? or how to make variables int0 and int1 into global variables that already have value? thank you

Tobok Sitanggang
  • 607
  • 5
  • 15

5 Answers5

1

If you are using document.getElementsByName(), it will return a NodeList, which is kind of like an array. It doesn't have value directly. You would need to get the zero-th element on that array for the value:

var int0 = document.getElementsByName('int0')[0].value;

Note the [0].

samanime
  • 25,408
  • 15
  • 90
  • 139
  • i got error 'Uncaught TypeError: Cannot read property 'value' of undefined'. what i miss? – Tobok Sitanggang Feb 28 '18 at 14:56
  • The element don't exists when you call `document.getElementsByName`. Note that the element MUST exists on the DOM when you call it. – Jorge Fuentes González Feb 28 '18 at 14:57
  • It sounds like you might be either trying to get the element by the wrong identifier or trying to get it before it exists in the DOM. Try moving your ` – samanime Feb 28 '18 at 15:23
  • I tried and the result is still the same, `null` is this is possible to do? – Tobok Sitanggang Feb 28 '18 at 15:42
  • Are you sure your function above has run BEFORE you try to grab the value from it? Since it is AJAX, it might be that your code to get the info is happening before the code that has created those elements. You can add `console.log()`s in both places to see if they are happening in the order you think they are. – samanime Feb 28 '18 at 15:49
  • And note, `document.getElementsByName('int0')[0].value` and `document.getElementById('int0').value` should both work, if called from the correct space. – samanime Feb 28 '18 at 15:49
  • Yes, it works if it not Ajax Function. i've tried to move my function in view data before tag closing `

    `, but is still the same result.

     – Tobok Sitanggang Feb 28 '18 at 16:59
  • like @Alexander said, the listener has not yet worked and did not assign it. so decide to put the data in type hidden without Ajax function and it works. But, thanks for your answer. i got something new to learn. thank you – Tobok Sitanggang Feb 28 '18 at 17:02
1

Oh sure. When the function tampilInterval is executed, it only sets the listener success that will be executed when the ajax-request completes. If you are currently checking the value of the int0 and int1 DOM-nodes - the listener has not yet worked and did not assign it.

Alexander
  • 73
  • 6
  • thank you, thats my problem. is there any other way to get that value? i want to use `int0` and int `int1` in other function but in the same file thank you – Tobok Sitanggang Feb 28 '18 at 15:07
  • 1
    You can't use the values ​​before the listener installs its. Therefore, the only way to solve your problem is to transfer your other function also inside this listener `success` – Alexander Feb 28 '18 at 23:01
0

I think you could store the variable globally and get it later.

$(document).ready(function() {

var value1, value2;

tampilInterval();       
$('#mydata').html();
function tampilInterval() {
    $.ajax({
        type  : 'ajax',
        url:$("#baseurl").val(),
        dataType:"json",
        method:"post",
        success : function(data){
            value1 = data[0].value; value2 = data[1].value;
            var html = '';
            var i;
            html += '<tr>'+
                '<td>'+data[0].key+'</td>'+
                '<td><input type="text" class="form-control" id="int0" name="int0" value="'+data[0].value+'"></td>'+
                '</tr><tr>'+
                '<td>'+data[1].key+'</td>'+
                '<td><input type="text" class="form-control" id="int1" name="int1" value="'+data[1].value+'"></td>'+
                '</tr>';
                $('#show_data').html(html);
        }
    });
};
Jim Gaudet
  • 16
  • 2
0

The function getElementsByClassName returns a NodeList, so you need to get those elements using indexes.

var int0 = document.getElementsByName('int0')[0].value;

A better approach is to use the function querySelector, this way you don't need to worry about the indexes:

var int0 = document.querySelector('[name="int0"]').value;

Resource

  • document.querySelector()

    Returns the first Element within the document that matches the specified selector, or group of selectors, or null if no matches are found.

Ele
  • 33,468
  • 7
  • 37
  • 75
  • i still get error like this `Uncaught TypeError: Cannot read property 'value' of null` and I've tried to removing `value`, but it said `null`. what i miss? – Tobok Sitanggang Feb 28 '18 at 15:16
0

Try to use 

$('#int0').val();
$('#int1').val();

You use jQuery to call ajax but the code below use javascript

If you want to add data after html loaded, use $(window).load() instead of $(document).ready()

Difference between $(window).load() and $(document).ready() functions

Note : Use "Class" instead of "Id" in loop. Id is unique for the first tag

Ryuk Lee
  • 720
  • 5
  • 12