Get the content of a form when the button is pressed using javascript

Question

I have a webpage that has multiple forms everywhere, in some pages, there are 4 or 5 forms at once. At this time I get the form input field's contents targeting its specific name (using jQuery):

html

<input id="lastname" name="lastname" type="text" class="form-control" placeholder="Last name*">

js

var lastname = $("[name='lastname']").val();

Nonetheless, this is not scalable, I need to add more variables every time I add more HTML Forms with their unique names (All of the forms are conformed with the same 4 fields). I want to implement a vanilla javascript function that can handle all forms when submit button is pressed this is how I have it now:

//At this momment I get the values using jQuery, targeting the specific input name: 
$('.btn').click(function(){    
    $('.btn').attr("disabled", true);
    var name = $("[name='name']").val();
    var lastname = $("[name='lastname']").val();
    var phone = $("[name='phone']").val();
    // make a var for every input field known

    //stuff to send it via ajax to an external api:
    /*
      { ... }
 */
}

<form>
        <label for="name">Name*</label>
        <input type="text" placeholder="name here" id="name" name="name" required>
        <label for="lastname">Last Name*</label>
        <input type="text" placeholder="last name here" id="lastname" name="lastname" required>
        <label for="phone">Phone Number*</label>
        <input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
        <button class="btn" onclick="process()">Submit</button>
</form>
<form>
        <label for="name-2">Name*</label>
        <input type="text" placeholder="name here" id="name-2" name="name-2" required>
        <label for="lastname-2">Last Name*</label>
        <input type="text" placeholder="last name here" id="lastname-2" name="lastname-2" required>
        <label for="phone-2">Phone Number*</label>
        <input type="text" placeholder="phone # here" id="phone-2" name="phone-2" required>
        <button class="btn" onclick="process()">Submit</button>
</form>
<form>
        <label for="name">Name*</label>
        <input type="text" placeholder="name here" id="name-3" name="name-3" required>
        <label for="lastname">Last Name*</label>
        <input type="text" placeholder="last name here" id="lastname-3" name="lastname-3" required>
        <label for="phone">Phone Number*</label>
        <input type="text" placeholder="phone # here" id="phone-3" name="phone-3" required>
        <button class="btn" onclick="process()">Submit</button>
</form>

I want to have only 1 javascript function that receives the entire form (when the button is clicked) and internally traverses the form element to get the values of the field and this way, it can be reusable to all forms

Does this answer your question? [get all the elements of a particular form](https://stackoverflow.com/questions/4431162/get-all-the-elements-of-a-particular-form) — devlin carnate, Feb 14 '22 at 20:25
Have you tried using`onsubmit`on the form rather than `onclick` on the button (which should be type="submit")? The event will include an object representation of the form you can iterate over however you choose. — Steve Hynding, Feb 14 '22 at 20:27
Devlin, it does solve part of the question, but what about get only the input fields of the specific form where the button was pressed? — Alexandro Giles, Feb 14 '22 at 22:07
@AlexandroGiles: Google "get parent form of element in javascript" — devlin carnate, Feb 14 '22 at 22:42
The issue was that using this method only, I got all input fields from all Forms not the specific where the click was made. I just answer my own question, is it a good approach? — Alexandro Giles, Feb 14 '22 at 23:07

Alexandro Giles · Answer 1 · 2022-02-14T23:22:01.180

The javascript function should receive the element first, then traverse to parent element: HTML

<form>
        <label for="name">Name*</label>
        <input type="text" placeholder="name here" id="name" name="name" required>
        <label for="lastname">Last Name*</label>
        <input type="text" placeholder="last name here" id="lastname" name="lastname" required>
        <label for="phone">Phone Number*</label>
        <input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
        <button class="btn" onclick="process(this)">Submit</button>
</form>

Using onclick="process(this)" in the button, this way it will call the javascript function associated with and sending the element where the click was made.

js

process(element){
    var form = element.closest('form')
    // now you can extract the input field of this specific form.
}

Now you can get the input fields as needed using: Get all the elements of a particular form

Get the content of a form when the button is pressed using javascript

1 Answers1