get input of all forms in page

Question

I want to get input of every form in my page that their name is name my forms are like this

<form class="form" role="form" onsubmit="completeSave(this)">
      <div class="form-body">
           <div class="form-group">
               <label>name</label>
               <input type="text" class="form-control" name="name"
                                               value="{{$media->name}}">
            </div>
       </div>
 </form>
// next form!
 <form class="form" role="form" onsubmit="completeSave(this)">
      <div class="form-body">
           <div class="form-group">
               <label>name</label>
               <input type="text" class="form-control" name="name"
                                               value="{{$media->name}}">
            </div>
       </div>
 </form>

I already have some code that do something with each form (an ajax request ) but I want to have a button in a page that submit all forms data

 <button class="btn btn-primary" onclick="completeSaveAll()">submit</button>

i tried this javascript code :

 function completeSaveAll() {
        var form = $('form');
        form.each(function () {
            console.log(this.find("[name=name]"));
        })
  }

but it doesn't work how can I do it?

`.find()` is a jQuery method and can only be chained to a jQuery object, i.e.`$(this)` and not `this`. — Terry, Oct 15 '16 at 12:31
if I understood correct, this question related for this topic [Submit two forms with one button](http://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button) — Yuriy Yakovenko, Oct 15 '16 at 12:23

score 0 · Answer 1 · answered Oct 15 '16 at 12:23

0

Try serializeArray()

$.ajax({
type : 'POST',
url : 'url',
data : $('#form').serializeArray()
});

answered Oct 15 '16 at 12:23

Kinshuk Lahiri

1,468
10
23

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Other than this previously answered similar question

I would say your onclick handler might not be able to initialize successfully as you are using jQuery $ in the handlerFunction completeSaveAll and DOM elements might render before jQuery is fetched.

edited May 23 '17 at 12:16

Community

1
1

answered Oct 15 '16 at 12:32

atulj

71
2
4
10

Thielicious · Answer 3 · 2016-10-16T21:40:37.803

HTML:

<form class="form" role="form">
      <div class="form-body">
           <div class="form-group">
               <label>name</label>
               <input type="text" class="form-control" name="name" value="name1">
            </div>
       </div>
 </form>
// next form!
 <form class="form" role="form">
      <div class="form-body">
           <div class="form-group">
               <label>name</label>
               <input type="text" class="form-control" name="name" value="name2">
            </div>
       </div>
 </form>
 <button class="btn btn-primary">submit</button>

jQuery:

Use submit and prevent the default process, so that only the values will be returned.

$('form').on('submit', function(e) {
  e.preventDefault();
  var form = $(this);
  form.each((key, val)=>
    console.log(val.name.value))
})

And then trigger this above using your button outside of these forms

$('button').click(()=> 
    $('form').trigger('submit')
)

Replace the values with {{$media->name}} or whatever you want to do.

Demo here

score 0 · Answer 4 · answered Oct 15 '16 at 14:06

0

Its very simple:

'use strict';
var name = $('input[name="name"]');
$.each(name , function(i,el){
  console.log(i);
});

Here you go jsbin for it

https://jsbin.com/pewulimefu/2/edit?html,js,output

answered Oct 15 '16 at 14:06

panatoni

735
6
13

score -1 · Answer 5 · answered Oct 15 '16 at 12:28

Try This:

function completeSaveAll() {
  debugger
        //var form = $('form');
        $('form').each(function () {
            console.log($(this).find("[name=name]").val());
        })
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form" role="form" onsubmit="completeSave(this)">
      <div class="form-body">
           <div class="form-group">
               <label>name</label>
               <input type="text" class="form-control" name="name"
                                               value="{{$media->name}}">
            </div>
       </div>
 </form>
// next form!
 <form class="form" role="form" onsubmit="completeSave(this)">
      <div class="form-body">
           <div class="form-group">
               <label>name</label>
               <input type="text" class="form-control" name="name"
                                               value="{{$media->name}}">
            </div>
       </div>
 </form>
<button class="btn btn-primary" onclick="completeSaveAll()">submit</button>

Down voter, please comment so that I can update if there is any mistake. — Kumar_Vikas, Oct 15 '16 at 12:38

get input of all forms in page

5 Answers5