Submitting one form amongst multiple forms ajax

Question

I've been a lurker for some time, but this is my first post (and motivated me to sign up), I've searched countless posts, but can't find a solution that best works. This is part of a project where users search a database and have the option to add returned results to a saved location (posting the id, resid, to a separate mysql table).

The search function is in a separate php file, the relevant parts of the code are below (I've stripped out a lot of the formatting):

// Output HTML formats
    $html ='<tr >
      <form id="myForm" method="post">
        <input type="hidden" id="resid" name="resid" value="ther3sidd">
        <input type="hidden" id="lesid" name="lesid" value="liD1">
        <input type="button" id="submitFormData" onclick="SubmitFormData()" value="Submit" />
      </form>
         </tr>';

The values "ther3sidd" and "liD1" get replaced with values unique to the item returned by the search, and are numerical values. There will also be multiple of the forms returned on the user facing page all with the same id of myForm (but different lesid and resid).

The search results are outputted to the page the user is on and a button can be pressed to add the result to a mysql table using the script below (stored in the page the user is on).

function SubmitFormData() {       
    var lesid = $('input[name="lesid"]').val();
    var resid = $('input[name="resid"]').val(); 
    var dataString = {lesid: lesid, resid: resid}

    $.ajax({
        type: "POST",
        url: 'lesresadd.php',
        data: dataString, 
    })} 

Below is the php file lesresadd.php (without the connection info)

$lessonid = $_POST['lesid'];
$resourceid = $_POST['resid'];

$sql = "INSERT INTO lessons_resources (lesson_id, resource_id)
VALUES ('$lessonid', '$resourceid')";

$result = $conn->query($sql)

The code works fine and can submit data to the mysql table, however, the main issue is that the values for resid and lesid are for the first result from the search function (and not the one selected with the button click). I know that I need to use 'this' somewhere on the variable, however, I am not sure of the correct syntax. For example, I have tried the following (and many variants on it):

var lesid = $this().('input[name="lesid"]').val();

But this does not work. Maybe, there is more I need to do to the code, and it isn't as simple as just adding 'this' somewhere. I am reasonably new to AJAX and entirely self taught from visiting sites just like stack overflow. Any advice would be greatly appreciated.

Answer 1

It's not the neatest solution, but here goes:

$html = "";
$i = 1;
while($r = mysql_fetch_object($res))
{
    $html .='<tr>
        <input type="hidden" id="resid'.$i.'" name="resid" value="ther3sidd">
        <input type="hidden" id="lesid'.$i.'" name="lesid" value="liD1">
        <input type="button" class="submitFormData" onclick="SubmitFormData('.$i.')" value="Submit" />
         </tr>';
    $i++;
}

Then in your JavaScript:

function SubmitFormData(id) {       
    var lesid = $('#lesid'+id).val();
    var resid = $('#resid'+id).val(); 
    var dataString = {lesid: lesid, resid: resid}

    $.ajax({
        type: "POST",
        url: 'lesresadd.php',
        data: dataString, 
    })}