How to access an array of input elements created with ajax and javascript and get those individual values

Question

Here's my code and my problem:

HTML:

<tbody id="list"></tbody>

Javascript:

let suggest;
const name = $('#post input[name=name]');
const rating = $('#post input[name=rating]');
const postinputs = $('#form-submit');
const table = document.querySelector('#list');

$.ajax({

    method: 'GET',
    url: wpApiSettings.root+'top-list-route/my-top-list-get',
    contentType: 'application/json; charset=utf-8',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    },
    dataType: 'json',
    success: ajaxResponse

});

function ajaxResponse(data) {

    let str = [];
    suggest = data;
    for ( let i = 0; i < suggest.length; i ++ ) {
        const name = suggest[i].name;
        const rating = suggest[i].rating;
        str += '<tr>';
        str += `<td><input type="text" value=${suggest[i].name}></td>`;
        str += `<td><input type="text" value=${suggest[i].rating}></td>`;
        str += `<td><button type="button">Update</button></td>`;
        str += `<td><button class="delete">Delete</button><input name="delete[]" type="hidden" value=${suggest[i].id}></td>`;
        str += '</tr>';
    }
    table.innerHTML = str;

}

Essentially I need to access the code of this string:

str += `<td><button class="delete">Delete</button><input name="delete[]" type="hidden" value=${suggest[i].id}></td>`;

In particular, I need to access the value, which is dynamically added by javascript.

I tried:

$(table).add('.delete').click( function() {
        var log = $('input[name="delete[]"]').val();
        console.log(log);
}

But the result is always 2, which is the first value of the array obtained from the input array of that particular element.

How can I solve my problem?

I tried also to bind the element with an event (on):

$(document).on(click, 'input[name="delete[]"]', function() {
   console.log(this.val());
}

But it doesn't return anything.

The exception suggests there is a syntax or similar problem in frontend-rec-style.scss. scssphp will throw \ScssPhp\ScssPhp\Exception\ParserException exceptions when it cannot parse the provided code. — webspy
– webspy, Commented Mar 7, 2020 at 23:24
Sorry, deleted my comment because it was not the point of the question. You say you only get the first one, but which one do you want? Do you want to add a click event to each .delete, logging its own value? — Aioros
– Aioros, Commented Apr 3, 2020 at 16:21
Yes, whenever I click on a singular input, I need to get the individual value. If I do otherwise, like how I explained in my code, for some reason I obtain the same value. Plus I'm not even sure if the name="delete[]" is right in the first place — Porcellino80
– Porcellino80, Commented Apr 3, 2020 at 16:22
I also tried the function find() but it wasn't able to find my value — Porcellino80
– Porcellino80, Commented Apr 3, 2020 at 16:23

Aioros · Accepted Answer · 2020-04-03 17:17:11Z

1

Your second solution, the $(document).on(input) one, is correct in principle except that your input is hidden, so you cannot click on it. The first one is almost right. It should look like:

$(table).find('.delete').click( function() {
    var log = $(this).siblings('input[name="delete[]"]').val();
    console.log(log);
});

The idea is that we bind the click handler on the button (".delete"), and in the handler we find the input (which we know is a sibling of the button).

There's probably another problem in your case, though: if you load the table elements dynamically after, they won't have the click handler bound. So you could go with a compromise:

$(document).on('click', '.delete', function() {
    var log = $(this).siblings('input[name="delete[]"]').val();
    console.log(log);
});

edited Apr 3, 2020 at 17:17

answered Apr 3, 2020 at 16:29

Aioros

4,3931 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Porcellino80 Over a year ago

Unfortunately, the first solution never fires (with find) and if I use ADD, it returns undefined

Aioros Over a year ago

I'm guessing you use it before the actual table elements are created. Let me edit my answer.

Porcellino80 Over a year ago

Yes, I did! I tried in many different ways but I haven't still figured it out the problem

Porcellino80 Over a year ago

Perfect, except for one point! on('click'). I've already marked the right solution!

Collectives™ on Stack Overflow

How to access an array of input elements created with ajax and javascript and get those individual values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related