Ajax всегда занимает в первом ряду только при отправке формы

Question

В настоящее время я возвращаю массив и запускаю цикл for. Форма должна содержать идентификатор, имя экрана и курс при отправке. Аякс работает. Тем не менее, он всегда принимает только идентификатор первой строки. Без ajax я могу отправлять формы для разных строк. Но я не хочу, чтобы страница обновлялась при каждом нажатии кнопки, поэтому я включил часть AJAX. Я не уверен, где я иду не так, так как я довольно новичок в этой области. Любая помощь будет оценена.

<form name ="nominate" action="" id ="nominate"  method="POST">
        <input type="hidden" name="id" id = "Nid" value="<?php echo $id;?>">
        <input type="hidden" name="screenName" id = "screenName" value="<?php echo $screenName;?>">
        <input type="hidden" name="course" id = "course" value="<?php echo $course;?>">
        <input type="image" class="nominate" style="float: left;" onMouseOver="this.src='images/discuss_this_u.png'"
        onMouseOut="this.src='images/discuss_this.png'" value="Place Order" src="images/discuss_this.png"  width="60" height="20">
        </form>



<script> 
  $(function() {
    $(".nominate").click(function() {
     var id = $('#Nid').val();  
    var screenName = $('#screenName').val();
    var course = '<?php echo $course ;?>';
    var section = '<?php echo $section ;?>';

    var dataString = 'id='+ id + '&screenName=' + screenName + '&course=' + course + '&section=' + section;  
    alert(dataString);
    $.ajax({
       type: "POST",
       url: "nominate.php",
       data: dataString,
       success: function(){

       }
    });


    });
  });



</script>

Answer 1

Измените свой код ниже

var id = $('#Nid').val();

на

var id = $(this).closest('form').find('input[name=id]').val();

Вы также должны удалить id = "Nid", поскольку идентификаторы могут использоваться только один раз.Во всяком случае, это должен быть класс.Приведенный выше код проверяет ближайший элемент формы и получает идентификатор.