JQuery AJAX использует VALUE в качестве ключа / идентификатора

Question

Мне было интересно, как мне получить значение идентификатора, чтобы я мог сделать что-то вроде этого, у меня есть 2 поля и div (статус).

<input name="item_1" type="hidden" value="1" /> 
<input type="text" name="date_1" id="dateselect" onchange="check();" />
<div id="status_1">Click on the field above!</div> 

<input name="item_2" type="hidden" value="2" /> 
<input type="text" name="date_2" id="dateselect" onchange="check();" />
<div id="status_2">Click on the field above!</div>

Значение в скрытом поле будет таким же числом для подобных item_x, date_x и т. Д., Что составляет 2 набора полей, и их будет намного больше! кодируется с помощью PHP (foreach item).

Так что мне нужно передать значения этих полей в запрос ajax.

date = $("[name='date']").val();
item = $("[name='item']").val();
elm = "#status";

Как бы я получил "1" или "2" в качестве переменной с именем id, чтобы я мог сделать что-то вроде

date = $("[name='date_"+id+"']").val();
item = $("[name='item_"+id+"']").val(); or item = id;
elm = "#status_"+id;

Поскольку таких мини-шашек будет несколько, они будут делать то же самое, но не в одно и то же время, только при нажатии. Я могу легко сделать это, когда есть только 1, но когда есть больше, чем 1, я немного застрял.

Вот моя версия делает это один раз, мне нужно кое-как установить идентификатор, чтобы он больше не был определен:

function check(id,elm) {
book = $("[name='date']").val();
var item = '';
if(id === undefined){
item = $("[name='item']").val();
}else{
item = id;
}
if(elm === undefined){
elm = "#status";
}
if(book.length >= 3 && item.length >= 0) {
$(elm).html('<img align="middle" src="images/loading.gif" alt="Checking" /> Checking availability...');
$.ajax({type: "POST",url: "checker.php",data: "date="+book+"&itemid="+item,success: function(msg){
$(elm).ajaxComplete(function(event, request, settings){
if(msg == 'OK') {
$(elm).html(' <img align="middle" src="images/tick.png" alt="Available" /> Available!');
$(elm).next().val(1);
} else { 
$(elm).html(msg);
$(elm).next().val(0);}
});
}});
} else {
$(elm).html('');
}
}

Спасибо за любую помощь

Answer 1

На основе вашей разметки без события onchange

<input name="item_1" type="hidden" value="1" /> 
<input type="text" name="date_1" id="dateselect" />
<div id="status_1">Click on the field above!</div> 

<input name="item_2" type="hidden" value="2" /> 
<input type="text" name="date_2" id="dateselect" />
<div id="status_2">Click on the field above!</div>

Вы можете разрешить jQuery выполнять разметку событий для начинающих и использовать правильное событие (onkeypress или onblur будет лучше всего)Я думаю)

$(function(){
    // bind the onkeypress event to textboxes that start with 'date_'
    $("input:text[name^='date_']").onkeypress(function(){
        var id = $(this).attr("name").split("_")[1];

        var $date = $(this);
        var $item = $("[name='item_" + id + "']");
        var $status = $("#status_" + id);

        if($date.val().length >= 3 && $item.length > 0) {
            $status.html('<img align="middle" src="images/loading.gif" alt="Checking" /> Checking availability...');
            $.ajax({
                type: "POST", 
                url: "checker.php",
                data: "date=" + $date.val() + "&itemid=" + $item.val(),
                success: function(msg) {
                    if(msg == 'OK') {
                        $status.html('<img align="middle" src="images/tick.png" alt="Available" /> Available!');
                        $item.val(1);
                    } else { 
                        $status.html(msg);
                        $item.val(0);
                    }
                }
            });
        } 
        else {
            $status.html('');
        }
    });
});

Answer 2

Вы можете сделать что-то вроде этого, чтобы получить массив с данными:

<input name="item[]" type="hidden" value="1" /> 
<input type="text" name="date[]" id="dateselect" onchange="check();" />
<div id="status[]">Click on the field above!</div>