JQuery AJAX utilise VALUE comme clé/id

Question

Je me demandais comment j'allais obtenir une valeur d'identifiant pour que je puisse faire quelque chose comme ça, j'ai 2 champs et un div (status).

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

La valeur dans le champ caché sera le même nombre pour goûts de item_x et date_x etc. qui est de 2 ensembles de terrain et il y aurait beaucoup plus! codé avec PHP (objet foreach).

J'ai donc besoin de passer les valeurs de ces champs dans une requête ajax.

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

Comment puis-je obtenir le comme var appelé id « 1 » ou « 2 », pour que je puisse faire quelque chose comme

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

Puisqu'il y aura plusieurs de ces mini-dames, faire la même mais pas en même temps, seulement quand on clique dessus. Je peux facilement le faire quand il y en a seulement 1 mais quand il y en a plus de 1 im un peu coincé.

Heres ma version de le faire une fois, je dois un peu comment définir l'ID, il est donc plus définie:

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(''); 
} 
} 

Merci pour toute aide

Answer 1

sur la base de votre balisage sans l'événement 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> 

Vous pouvez laisser jQuery faire le câblage de l'événement, pour commencer, et utilisez l'événement approprié (onkeypress ou onblur serait mieux, je pense)

$(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

Vous pouvez faire quelque chose comme ça, d'avoir un tableau avec les données:

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