Filemaker, PHP and jquery > show hide elements

Question

I am echoing out a form (foreach) from my filemaker records which will result in the items ID, Name, a Checkbox and then an image.

In my understanding i will have to use classes or the elements will all have the same id.

My Code;

foreach($result->getRecords() as $record){
$id = $record->getField('Record_ID_PHP');
$name = $record->getField('DB_Name');
$pic = $record->getField('Photo_Path');
echo '"'.$id.'"<br>';
echo $name.'<br>';
echo '<input type="checkbox" class="check" value="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$pic.'">';
echo '<div class="pics">';
echo '<img style="width:200px;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$pic.'"><br>';
echo '<hr>';
echo '</div>';
}

Which results in a page full of the records, a checkbox and the relating image.

I wish to only show these images when the checkbox is checked but cannot find a solution, i have tried many jquery scripts, to no avail.

The images will then populate the next page as a pdf to be printed.

I am hoping not to have to grab the checkbox's values as an array to then use the get method with 100's of if statements but cant see another way ?

The jquery ive used.

$(document).ready(function () {
$('.pics').hide();
$('.check').click(function () {
    $('pics').show;
});
$('.pics').hide;
});

and

$(function()   {
$(".check").click(function(e) {
    e.preventDefault();
    $('.pics').hide();
    $('.pics').show();
});
});

Plus many similar alternatives.

Is there something obvious i am missing ?

Query to filemaker method;

I have changed the path field to a calculated value which works great, thank you, although with 1000's of records, i would need lots of php code to echo the checkbox's to the website and lots more to be able to edit them from the website.

I have done this previously with the value held within the checkbox in filemaker.

$sesame = $print->getField('Allergens::Allergens[11]'); if ($sesame == "Sesame") { $sesame = "checked" ;} else if ($sesame !== "Sesame") {$sesame = "" ;}

This displays the checkbox synced with filemaker.

if ($_POST['Sesame'] == 'Sesame'){ $a_sesame = 'Sesame';} else { $a_sesame = 'No Sesame'; }

This is sent as a variable to my script.

if($a_sesame == "Sesame"){$contains_sesame = "Yes";} else { $contains_sesame = "No";}

This grabs the new value from the form.

Which all work great, but then i am writing a script in filemaker too to enable the to and from of the different names for each checkbox state.

which is for this part 120 lines long, this is a sample which i have to repeat for each repetition of this field.

Set Variable [ $sesame; Value:GetValue ( Get ( ScriptParameter ) ; 11 ) ] 
If [ $sesame = "Sesame" ]
Set Field [ Allergens::Allergens[11]; "Sesame" ] Commit Records/Requests
[ Skip data entry validation; No dialog ] 
Else If [ $sesame = "No Sesame" ]
Clear [ Allergens::Allergens[11] ] [ Select ]
Commit Records/Requests
[ Skip data entry validation; No dialog ]
Refresh Window
[ Flush cached join results; Flush cached external data ]
End If

This would be far too large to write for so many records, just for these 14 fields used 120 in filemaker and 400 plus in the php.

Answer 1

I am not 100% sure what you are trying to do but this should work. First add an extra div that closes input and div pics like below.

foreach($result->getRecords() as $record){
   $id = $record->getField('Record_ID_PHP');
   $name = $record->getField('DB_Name');
   $pic = $record->getField('Photo_Path');
   echo <<<TEXT
      '{$id}'<br>
      {$name}<br>
      <div>
         <input type='checkbox' class='check' value='Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/{$pic}'>
         <div class='pics'>
            <img style='width: 200px;' src='Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/{$pic}'><br>
            <hr>
         </div>
      </div>
TEXT;
}

then change your java to this

$(document).ready(function() {
   $(".pics").hide();
   $(".check").click(function() {
      $(this).siblings().toggle();
   });
});

well I hope this helps