erhalten Eingabe aller Formen in Seite

Question

I-Eingang jeder Form in meine Seite zu bekommen, die ihren Namen name meine Formen sind wie diese

<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> 

ich bereits einen Code haben, die mit jeder Form etwas zu tun ist (ein ajax-Request), aber ich möchte eine Schaltfläche auf einer Seite haben, der alle Formen Daten einreichen

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

ich diesen JavaScript-Code versucht:

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

aber es funktioniert nicht wie kann ich es tun?

Answer 1

Versuchen serializeArray()

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

Answer 2

Dieses Versuchen:

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>

Answer 3

Anders als this zuvor ähnliche Frage

beantwortet würde ich Ihre onclick handl sagen Er kann möglicherweise nicht erfolgreich initialisiert werden, da Sie jQuery $ in der HandlerFunction completeSaveAll verwenden und DOM-Elemente möglicherweise rendern, bevor jQuery abgerufen wird.

Answer 4

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:

Verwenden submit und verhindert, dass der Standard Prozess, so dass nur die Werte zurückgegeben werden.

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

Und dann diese auslösen oben Ihre button außerhalb dieser Formen

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

Ersetzen Sie die Werte mit {{$media->name}} oder was auch immer Sie tun möchten, verwenden.

Demo here

Answer 5

Es ist sehr einfach:

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

Hier können Sie jsbin es

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