Add hidden field with CMS item name to Form Submission (all the collection items are on the same page)

Design help CMS
1

Hello,
I have a CMS list of job positions on Career page of the site. Each job has an Apply button that opens a form pop-up. I want to know what position a person applies to.
I know that for a Collection Page a hidden field embed like this <input type="hidden" name="job" value="{dynamic field name}"/> would work, but if all the collection items are on the same page this method doesn’t seem to work. Is there any other way maybe?

Screenshot 2024-01-15 at 18.45.28
Screenshot 2024-01-15 at 18.45.282878×1144 254 KB

Screenshot 2024-01-15 at 18.45.18
Screenshot 2024-01-15 at 18.45.182880×1298 329 KB

2

You could use JS custom code to listen for a click on the button, then get the value of the collection item title in your collection list and then write that value to the hidden field in the form.

3

thank you for you suggestion! still can’t figure out the solution but maybe you could see where the problem could be

added hidden field to the form with “hidden-field” ID name

added jquery to the head of the page <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
then added the following script to the body of the page

<script>
  $(document).ready(function() {
    // Function to set the value of the hidden field
    function updateHiddenField(jobTitle) {
      $('#hidden-field').val(jobTitle);
    }

    // Attach click event to the Apply button
    $('.button-apply').click(function() {
      // Get the job title from the collection list item
      var jobTitle = $(this).closest('.job_posts-item').find('.job-title').text().trim();

      // Update the hidden field with the job title
      updateHiddenField(jobTitle);
    });
  });
</script>

then tested the form and but hidden field doesn’t appear in a test form submission

also here’s read-olny to the project