Wie durch Formularfelder mit jQuery/Javascript

Question

Ich habe ein Formular für eine ASP.NET WebForms-Anwendung, die wie folgt aussieht iterieren:

<div id="signinForm"> 
    <div class="form-inline form-group-sm"> 
     <div class="input-group"> 
      <label for="MemberName" class="sr-only">Email Address :</label> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
      <input type="email" required id="MemberName" placeholder="Email Address" class="form-control"> 
     </div> 
     <div class="input-group"> 
      <label for="Password" class="sr-only">Password :</label> 
      <input type="password" required id="Password" placeholder="Password" class="form-control"> 
     </div> 
     <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button> 
    </div> 
</div> 

Ich möchte bauen ein JSON-Objekt aus den Formularfeldern passieren ein Webservice, und jetzt das ich verwende:

  var formData = {}; 
      $(signinForm).find(':input').each(function() { 
       formData[this.name] = this.value; 
      }); 

      var json = JSON.stringify({ NewMember: formData }); 

Wenn ich das JSON-Objekt gebaut, die Formularfelder sind nicht im Objekt enthalten inspizieren - sie sind leer („“). Was fehlt mir im Code, den ich erreichen muss, was ich will, nämlich die Name/Wert-Paare der Formularfelder als Teil des erstellten JSON-Objekts einzubeziehen?

Answer 1

Das funktioniert. Bitte versuche.

var formData = {}; 
 

 
$('#signinForm').find('input').each(function() { 
 
    formData[this.id] = this.value; 
 
}); 
 

 
var json = JSON.stringify({ NewMember: formData }); 
 

 
console.log(json);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="signinForm"> 
 
<div class="form-inline form-group-sm"> 
 
    <div class="input-group"> 
 
     <label for="MemberName" class="sr-only">Email Address :</label> 
 
     <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
 
     <input type="email" required id="MemberName" placeholder="Email Address" class="form-control"> 
 
    </div> 
 
    <div class="input-group"> 
 
     <label for="Password" class="sr-only">Password :</label> 
 
     <input type="password" required id="Password" placeholder="Password" class="form-control"> 
 
    </div> 
 
    <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button> 
 
</div> 
 
</div>

Answer 2

Sie die Doppelpunkt

$(signinForm).find('input').each(function() { 

Auch die Eingabe Artikel im HTML-Beispiel zu entfernen, nicht Namen haben Attribute, obwohl man sie verwenden hier

formData[this.name] = this.value; 

Answer 3

Die Eingabefelder sind fehlende Namen Attribut

var formData = {}; 
 
$(signinForm).find('input[name]').each(function() { 
 
    formData[this.name] = this.value; 
 
}); 
 

 
var json = JSON.stringify({ NewMember: formData }); 
 

 
console.log(json)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="signinForm"> 
 
    <div class="form-inline form-group-sm"> 
 
     <div class="input-group"> 
 
      <label for="MemberName" class="sr-only">Email Address :</label> 
 
      <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
 
      <input type="email" name="email" required id="MemberName" placeholder="Email Address" class="form-control"> 
 
     </div> 
 
     <div class="input-group"> 
 
      <label for="Password" class="sr-only">Password :</label> 
 
      <input type="password" required id="Password" placeholder="Password" class="form-control"> 
 
     </div> 
 
     <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button> 
 
    </div> 
 
</div>

Answer 4

habe ich eine kleine Funktion jQuery Helfer genau dies zu tun (ich die Antwort auf eine andere Antwort gefunden, aber Stackoverflow kann eigentlich nicht die ursprüngliche Frage finden, die für Sie zu zitieren)

Helper Funktion

ich den Code unten in einer separaten JavaScript-Helfer-Datei platziert machen glo verfügbar bally über meine App

$.fn.serializeObject = function() { 
var o = {}; 
var a = this.serializeArray(); 
$.each(a, function() { 
    if (o[this.name] !== undefined) { 
     if (!o[this.name].push) { 
      o[this.name] = [o[this.name]]; 
     } 
     o[this.name].push(this.value || ''); 
    } else { 
     o[this.name] = this.value || ''; 
    } 
}); 
return o; 
}; 

Die sich tatsächliche Form wurde als deklariert:

<form id="frmShippingAccount" class="form-inline shipping-account-form" action="#"> 
    <input type="text" name="Name" /> 
</form> 

innerhalb der Aktion auf Klick Dann meiner Form der Schaltfläche Speichern ...

var shippingAccountForm = JSON.stringify($("#frmShippingAccount").serializeObject()); 

Die serializeObject-Funktion würde jedes Element in meinem Formular abrufen und das Name-Attribut in ein JSON-Objekt als Eigenschaftsnamen und den entsprechenden Wert als Wert verschieben.

z. { "Gesellschaft": "", "Adresse1": "", "Address2": "", "City": "", "Zip": "", "Land": "" }

Ich denke, das wichtigste Problem ist, dass Ihre 'Form' als Div deklariert wird, zweitens bin ich nicht sicher, ob Ihre JSON.stringify-Syntax korrekt ist.

Das Verfahren, das oben ein perfekt geformtes JSON Objekt, das ich in einem Web-Dienst eingespannt und dann in eine Newstonsoft JObject geparst mit

JObject JDATA = JObject.Parse (jsonString);

wo jsonString eine Zeichenfolge des JSON-Objekt aus der Liste meiner Ajax-Aufruf übergeben war

Hoffnung, das hilft!