how to get different values from 2 identical forms with jQuery

Question

I have 2 identical forms, I am trying to get the values from the forms after clicking the buttons.

The 'problem', I only get the values ​​from the first form.

$('.form button.Button').click(function () {  
  var val1 = $('.form input.Input:eq(0)').val();
  var val2 = $('.form input.Input:eq(1)').val();

  var varData = 'val1=' + val1 + ' & val2=' + val2;

  alert(varData)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="form" style="border-style: dotted;">
      <p>
				<input name="name1" class="Input" type="text" value="field1">
      </p>
      <p>
				<input name="name2" class="Input" type="text" value="field2">
      </p>	
			<p>
        <button name="name3" class="Button" type="submit" value="oké">Oké</button>
			</p>			
</div>
<div class="form" style="border-style: dotted;">
      <p>
				<input name="name1" class="Input" type="text" value="field3">
      </p>
      <p>
				<input name="name2" class="Input" type="text" value="field4">
      </p>
      <p>
        <button name="name3" class="Button" type="submit" value="oké">Oké</button>
			</p>			
</div>

thnx!!

Answer 1

Since you have two different div tags with same class name "Form" Using a class selector is not advisable when you want identical inputs.

PS: You are not using a form tag to get form values it will be very different if you do so :)

Please have a look at the following snippet.

$('.form1 button.Button').click(function () {  
  var val1 = $('.form1 input.Input:eq(0)').val();
  var val2 = $('.form1 input.Input:eq(1)').val();

  var varData = 'val1=' + val1 + ' & val2=' + val2;

  alert(varData)
});
$('.form2 button.Button').click(function () {  
  var val1 = $('.form2 input.Input:eq(0)').val();
  var val2 = $('.form2 input.Input:eq(1)').val();

  var varData = 'val1=' + val1 + ' & val2=' + val2;

  alert(varData)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="form1" style="border-style: dotted;">
      <p>
				<input name="name1" class="Input" type="text" value="field1">
      </p>
      <p>
				<input name="name2" class="Input" type="text" value="field2">
      </p>	
			<p>
        <button name="name3" class="Button" type="submit" value="oké">Oké</button>
			</p>			
</div>
<div class="form2" style="border-style: dotted;">
      <p>
				<input name="name1" class="Input" type="text" value="field3">
      </p>
      <p>
				<input name="name2" class="Input" type="text" value="field4">
      </p>
      <p>
        <button name="name3" class="Button" type="submit" value="oké">Oké</button>
			</p>			
</div>

Answer 2

You can use something like this to achive what you want:

var val1 = $(this).closest(".form").find(".Input:eq(0)").val();
var val2 = $(this).closest(".form").find(".Input:eq(1)").val();

Problem is that this $('.form input.Input:eq(0)'), will always find the first input and not the first input relevant to the .form your "inside"

Demo

$('.form button.Button').click(function() {
  var val1 = $(this).closest(".form").find(".Input:eq(0)").val();
  var val2 = $(this).closest(".form").find(".Input:eq(1)").val();

  var varData = 'val1=' + val1 + ' & val2=' + val2;

  alert(varData)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="form" style="border-style: dotted;">
  <p>
    <input name="name1" class="Input" type="text" value="field1">
  </p>
  <p>
    <input name="name2" class="Input" type="text" value="field2">
  </p>
  <p>
    <button name="name3" class="Button" type="submit" value="oké">Oké</button>
  </p>
</div>
<div class="form" style="border-style: dotted;">
  <p>
    <input name="name1" class="Input" type="text" value="field3">
  </p>
  <p>
    <input name="name2" class="Input" type="text" value="field4">
  </p>
  <p>
    <button name="name3" class="Button" type="submit" value="oké">Oké</button>
  </p>
</div>