How to get the value of input fields of a particular form on which i clicked ,all the forms and their input have the same class but different value

Question

i get all the forms generated by a PHP while loop so i can not change their id and classes..they all come in the DOM with same id and class but every form input has their own distinct value...all i want is,,if i click on submit of a particular form i want the jquery to get the input value only of that specific form.

   <form  class ='myform' >
     <input type = "hidden" name ="fname" value = "sam">
     <input type = "submit" value = "Submit">
   </form>


    <form class = 'myform'>
      <input type = "hidden" name = "fname" value = "olivia">
      <input type = "submit" value = "Submit">
    </form>


    <form class = 'myform'>
      <input type = "hidden" name = " fname " value = "justien">
      <input type = "submit" value = "Submit">
    </form>

   <scirpt >

    ----here i want the solution
   </script>

Answer 1

You could either add a counter into the loop statement for creating the myForm.

`<form class = 'myform${counter}'>`

This would make the forms have a unique class but would make CSS difficult. Alternatively, you could select the parent of the input field

$('input[value="justien"]').parent();

That should work

Answer 2

It works for me like a charm

$(document).ready(
    $(".myforms']").submit(function(e) {
        e.preventDefault();
        var f_name = $(this).children("input[name='f_name']");
        alert(f_name.val());
    })
);