Jquery - I have got multiple forms on page. How to update each form without reloading the page

Question

I am a beginner with jQuery and I am trying to create a page with multiple forms and each form is having 3 common fields in them, they are: 1. Hidden field with uniqueID, 2. textbox and 3. submit button.

My concern is how do I get the value of a hidden field and text box for each form record on click of a submit button but not refreshing the page. I have used the below jQuery, AJAX but this doesn't pass the values for that form on submit.

Anyone can help me with this please.

Javascript I am using is below:

$(document).ready(function() {
    $(".submit").click(function(){
        alert($(this).serialize());
        $.ajax({
        url:"ajax.php",
        type:"POST",
        //data:form.serialize(),
        data:$(this).serialize(),
        success:function(response){
          console.log(response);
            //Do stuff here
      }

   });
        return false;
    });
});

Answer 1

Try and see what

alert($(this).parent().serialize());

is returning. this is relative to the selector which in your example is the element with class="submit"