Динамический контент и проводка ajax

Question

У меня есть страница, которая может содержать от 1 до 100 итераций кодового блока - в этом кодовом блоке поля и т. Д. Имеют одинаковые имена и идентификаторы на каждой итерации, поскольку они содержатся в пределах для цикла.

Ниже приведен простой пример зацикленной коды:

<div id="form" class="form"> 
    <form method="post" id="input_form" action="<?=$PHP_SELF?>" enctype="multipart/form-data"> 
     <input type="text" name="start" id="start"> 
     <input type="text" name="end" id="end"> 
     <input type="text" name="duration" id="duration"> 
     <button type="button" id="calc">Calc</button> 
     <input type="submit" name="submit" value="Submit"> 
    </form> 
</div> 

Для нормальной формы HTML представить цели в нескольких итерациях работают отлично, как только одна кнопка отправки может быть нажата в то время, а затем он принимает значение от начинать и заканчивать и отправлять.

Однако мне также нужно иметь возможность выполнять простой расчет через AJAX по данным, и здесь возникает проблема - поскольку у меня может быть от 1 до 100 кнопок, используя тот же идентификатор, который он никогда не срабатывает. Я попытался добавить значение в конец идентификатора (например, используя цикл $ i в моем цикле for), поэтому они уникальны, но тогда я не могу использовать #calc для запуска вызова ajax, поскольку больше нет элемента, называемого calc.

jQuery(document).ready(function() { 
    $("#calc").click(function() { 
     var start_date = $("#start").val(); 
     var end_date = $("#end").val(); 
     var dataString = 'start_date=' + start_date + '&end_date=' + end_date; 
     $.ajax({ 
      type: "POST", 
      url: "calc.php", 
      data: dataString, 
      success: function() { 
       $('#duration').val(data); 
      } 
     }); 
    }); 
}); 

Мне нужен вызов Ajax стрелять с помощью правильного начала и конца, а затем заполнить в срок в форме пользователь работает в не зная, сколько форм есть или что используется.

http://jsfiddle.net/g7Tya/1/

Answer 1

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

Вы понимаете, что вы не можете иметь дупликации идентификаторов на этой странице. Они должны быть уникальными. Предполагая, что вы измените эти идентификаторы классов, я буду писать следующий код:

jQuery(document).ready(function() { 
    $(".button").click(function() { // add the class button to the submit 
     var t = $(this); 
     var start_date = t.prev(".start").val(); 
     var end_date = t.prev(".end").val(); 
     var dataString = 'start_date=' + start_date + '&end_date=' + end_date; 
     $.ajax({ 
      type: "POST", 
      url: "calc.php", 
      data: dataString, 
      success: function (data) { 
       t.prev('.duration').val(data); 
      } 
     }); 
    }); 
}); 

Answer 2

вы не должны поймать АЯКС ответа успеха
success: function (data) { $('#duration').val(data); }