Question

I am currently returning an array and running a for loop through it. The form is supposed to take in the id,screenName and course when submitted. The ajax works. However, it always takes in only the id of the first row only. Without the ajax, i am able to submit the forms for different rows. But i dont want the page to be refreshed every time the button is clicked so i included the ajax part. I am not sure where i am going wrong since i am pretty new to this area. Any help would be appreciated.

<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

Change your code below

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

to

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

You should also remove the id=”Nid” since id’s can only be used once. If anything it should be a class. The above code checks the closest form element and grabs the id.