Select input content of the same form when a user clicks on a button using jQuery

Question

I have multiple forms on the same page, at this moment I'm sending its content to another server using jQUery ajax, I'm using individual unique selectors to get their values before send. I want to change the approach in order to reduce the code:

Instead of using individual unique selectors like:

$(#form-1 button).click(function(){
    var name = $("[name='name-1']").val();
});

To something like this:

$(form button).click(function(){
   var name = $(this).sibbling("[name='name']").val();
});

$("#form-1 button").click(function(){
  var name = $("[name='name']").val();
  var phone = $("[name='phone']").val();
  console.log(name);
  console.log(phone);
  // [...] ajax stuff
});
$("#form-2 button").click(function(){
  var name = $("[name='name-2']").val();
  var phone = $("[name='phone-2']").val();
  console.log(name);
  console.log(phone);
  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

All of my forms have the same 3 values (name, email, and phone ).

Not sure it affects, but you have a typo in "sibbling" – Aaron Morefield Oct 18 '21 at 19:09 — Aaron Morefield, Oct 18 '21 at 19:09

SKJ · Answer 1 · 2021-10-18T18:35:33.323

You need to loop on elements.

https://api.jquery.com/each/

And use the right selector (Note the "^" in the selector).

jQuery selector for id starts with specific text

$("button").click(function(){
  
  $("[name^='name']").each(function(){
     console.log($(this).attr("name") + " - val : " + $(this).val());            
  })
  
  $("[name^='phone']").each(function(){
     console.log($(this).attr("name") + " - val : " + $(this).val());            
  })

  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

Or with form selector

$("button").click(function(){
  
  $("form[id^='form']").each(function(){
    console.log($(this).attr('id'));
    console.log($(this).find("input[name^='name']").attr("name") + " - val : " + $(this).find("input[name^='name']").val());  
    console.log($(this).find("input[name^='phone']").attr("name") + " - val : " + $(this).find("input[name^='phone']").val());  
  })

  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

Or with forms selector

$("button").click(function(){
  

    console.log($(this).parent('form').attr('id'));
    console.log($(this).parent('form').find("input[name^='name']").attr("name") + " - val : " + $(this).parent('form').find("input[name^='name']").val());  
    console.log($(this).parent('form').find("input[name^='phone']").attr("name") + " - val : " + $(this).parent('form').find("input[name^='phone']").val());  

  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
 </form>

<form id="form-2">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name-2">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone-2">
  </div>
  <button type="button">Send </button>
 </form>

Thanks for your response, is it possible, that only get the values of the form that is being called (when the button is pressed). With your current answer, I get all of the values — Alexandro Giles, Oct 18 '21 at 17:18

Rob Moll · Accepted Answer · 2021-10-18T19:07:33.430

I use event delegation here and this in jQuery and focus on selecting by class:

An event-delegation approach attaches an event handler to only one element, the form in this case, and the event only needs to bubble up one level (from the clicked button to the form).

This also only triggers the function for the clicked button and it's associated inputs. This prevents both forms from being processed with either button press.

Reference

This jQuery selector:

let name = $(this).parent().find("[name='name']").val();

Works like this:

$(this) is the clicked button element. Then we go to the parent of the clicked button which is the form. Then we use .find() which will 'Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.' And in this case we want to find the element that has the name of name which is a text input so we use .find("[name='name']"). More importantly, it's the specific input of potentially many inputs that we need for what we're doing. And finally we grab the value of the selector using .val().

$(".myForm").on('click', "button", function() {
  let name = $(this).parent().find("[name='name']").val();
  let phone = $(this).parent().find("[name='phone']").val();
  console.log(name);
  console.log(phone);
  // [...] ajax stuff
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-1" class="myForm">
  <div class="form-group">
    <label for="name">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
</form>

<form id="form-2" class="myForm">
  <div class="form-group">
    <label for="nombre">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="name">
  </div>
  <div class="form-group">
    <label for="phone-2">Name*</label>
    <input type="text" placeholder="Your name" class="form-control" name="phone">
  </div>
  <button type="button">Send </button>
</form>

Thanks Rob, at this moment I believe that this is the way to go, I'm testing it right now and it seems to work. — Alexandro Giles, Oct 18 '21 at 18:31

Select input content of the same form when a user clicks on a button using jQuery

2 Answers2