it-swarm.com.de

Wie kann ich alle Werte eines Formulars abrufen, die ohne Absenden gesendet würden?

Ich habe ein Formular auf meiner Seite und füge dem Formular mit Javascript/JQuery dynamisch Steuerelemente hinzu. Irgendwann muss ich alle Werte im Formular auf der Clientseite als Auflistung oder Abfragezeichenfolge abrufen. Ich möchte das Formular nicht senden, da ich die Formularwerte zusammen mit anderen Informationen, die ich auf dem Client habe, an eine Back-End-WCF/Ajax-Dienstmethode übergeben möchte. Daher versuche ich herauszufinden, wie alle Werte in derselben Art von Sammlung erfasst werden, die das Formular normalerweise an den Server sendet, wenn das Formular tatsächlich gesendet wird. Ich vermute, dass es einen einfachen Weg gibt, dies zu erfassen, aber ich bin ratlos.

45
Howard Pinsley

Das jquery-Formular-Plugin bietet eine einfache Möglichkeit, Ihre Formularelemente zu durchlaufen und in eine Abfragezeichenfolge einzufügen. Dies kann auch für alle anderen Aufgaben nützlich sein, die Sie mit diesen Werten ausführen müssen.

var queryString = $('#myFormId').formSerialize();

From http://malsup.com/jquery/form

Oder mit direkter Abfrage:

var queryString = $('#myFormId').serialize();
43
Chris Farmer

In direktem Javascript könnten Sie etwas Ähnliches tun:

var kvpairs = [];
var form = // get the form somehow
for ( var i = 0; i < form.elements.length; i++ ) {
   var e = form.elements[i];
   kvpairs.Push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value));
}
var queryString = kvpairs.join("&");

Kurz gesagt, dies erzeugt eine Liste von Schlüssel-Wert-Paaren (Name = Wert), die dann unter Verwendung von "&" als Trennzeichen zusammengefügt werden.

45
Bryan Kyle

Wenn Ihr Formular-Tag wie folgt lautet

<form action="" method="post" id="BookPackageForm">

Rufen Sie dann das Formularelement mithilfe des Formularobjekts ab.

var formEl = document.forms.BookPackageForm;

Rufen Sie die Daten aus dem Formular mithilfe von FormData-Objekten ab.

var formData = new FormData(formEl);

Ruft den Wert der Felder über das Formulardatenobjekt ab.

var name = formData.get('name');
20
Apoorv Nag

Danke Chris. Das habe ich gesucht. Beachten Sie jedoch, dass die Methode serialize () ist. Und es gibt eine andere Methode serializeArray (), die sehr nützlich aussieht und die ich verwenden kann. Vielen Dank, dass Sie mich in die richtige Richtung gelenkt haben.

var queryString = $('#frmAdvancedSearch').serialize();
alert(queryString);

var fieldValuePairs = $('#frmAdvancedSearch').serializeArray();
$.each(fieldValuePairs, function(index, fieldValuePair) {
    alert("Item " + index + " is [" + fieldValuePair.name + "," + fieldValuePair.value + "]");
});
15
Howard Pinsley

Mit dieser einfachen Schleife können Sie alle Elementnamen und ihre Werte abrufen.

var params = '';
for( var i=0; i<document.FormName.elements.length; i++ )
{
   var fieldName = document.FormName.elements[i].name;
   var fieldValue = document.FormName.elements[i].value;

   // use the fields, put them in a array, etc.

   // or, add them to a key-value pair strings, 
   // as in regular POST

   params += fieldName + '=' + fieldValue + '&';
}

// send the 'params' variable to web service, GET request, ...
9
markom

Für diejenigen, die jQuery nicht verwenden, ist unten meine Vanilla-JavaScript-Funktion zum Erstellen eines Formulardatenobjekts aufgeführt, auf das anders als bei new FormData(form) wie auf jedes allgemeine Objekt zugegriffen werden kann.

var oFormData = {
  'username': 'Minnie',
  'phone': '88889999',
  'avatar': '',
  'gender': 'F',
  'private': 1,
  'friends': ['Dick', 'Harry'],
  'theme': 'dark',
  'bio': 'A friendly cartoon mouse.'
};

function isObject(arg) {
  return Object.prototype.toString.call(arg)==='[object Object]';
}

function formDataToObject(elForm) {
  if (!elForm instanceof Element) return;
  var fields = elForm.querySelectorAll('input, select, textarea'),
    o = {};
  for (var i=0, imax=fields.length; i<imax; ++i) {
    var field = fields[i],
      sKey = field.name || field.id;
    if (field.type==='button' || field.type==='image' || field.type==='submit' || !sKey) continue;
    switch (field.type) {
      case 'checkbox':
        o[sKey] = +field.checked;
        break;
      case 'radio':
        if (o[sKey]===undefined) o[sKey] = '';
        if (field.checked) o[sKey] = field.value;
        break;
      case 'select-multiple':
        var a = [];
        for (var j=0, jmax=field.options.length; j<jmax; ++j) {
          if (field.options[j].selected) a.Push(field.options[j].value);
        }
        o[sKey] = a;
        break;
      default:
        o[sKey] = field.value;
    }
  }
  alert('Form data:\n\n' + JSON.stringify(o, null, 2));
  return o;
}

function populateForm(o) {
  if (!isObject(o)) return;
  for (var i in o) {
    var el = document.getElementById(i) || document.querySelector('[name=' + i + ']');
    if (el.type==='radio') el = document.querySelectorAll('[name=' + i + ']');
    switch (typeof o[i]) {
      case 'number':
        el.checked = o[i];
        break;
      case 'object':
        if (el.options && o[i] instanceof Array) {
          for (var j=0, jmax=el.options.length; j<jmax; ++j) {
            if (o[i].indexOf(el.options[j].value)>-1) el.options[j].selected = true;
          }
        }
        break;
      default:
        if (el instanceof NodeList) {
          for (var j=0, jmax=el.length; j<jmax; ++j) {
            if (el[j].value===o[i]) el[j].checked = true;
          }
        } else {
          el.value = o[i];
        }
    }
  }
}
form {
  border: 1px solid #000;
}

tr {
  vertical-align: top;
}
<form id="profile" action="formdata.html" method="get">
  <table>
    <tr>
      <td><label for="username">Username:</label></td>
      <td><input type="text" id="username" name="username" value="Tom"></td>
    </tr>
    <tr>
      <td><label for="phone">Phone:</label></td>
      <td><input type="number" id="phone" name="phone" value="7672676"></td>
    </tr>
    <tr>
      <td><label for="avatar">Avatar:</label></td>
      <td><input type="file" id="avatar" name="avatar"></td>
    </tr>
    <tr>
      <td><label>Gender:</label></td>
      <td>
        <input type="radio" id="gender-m" name="gender" value="M"> <label for="gender-m">Male</label><br>
        <input type="radio" id="gender-f" name="gender" value="F"> <label for="gender-f">Female</label>
      </td>
    </tr>
    <tr>
      <td><label for="private">Private:</label></td>
      <td><input type="checkbox" id="private" name="private"></td>
    </tr>
    <tr>
      <td><label for="friends">Friends:</label></td>
      <td>
        <select id="friends" name="friends" size="2" multiple>
          <option>Dick</option>
          <option>Harry</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="theme">Theme:</label></td>
      <td>
        <select id="theme" name="theme">
          <option value="">-- Select --</option>
          <option value="dark">Dark</option>
          <option value="light">Light</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="bio">Bio:</label></td>
      <td><textarea id="bio" name="bio"></textarea></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="Submit">
        <button>Cancel</button>
      </td>
    </tr>
  </table>
</form>
<p>
  <button onclick="formDataToObject(document.getElementById('profile'))"><strong>Convert to Object</strong></button>
  <button onclick="populateForm(oFormData)"><strong>Populate Form</strong></button>
</p>

Sie können auch mit diesem Stift herumspielen: http://codepen.io/thdoan/pen/EyawvR

UPDATE: Ich habe auch eine Funktion hinzugefügt, um das Formular mit dem von formDataToObject() zurückgegebenen Objekt zu füllen.

2
thdoan

Vielen Dank für Ihre Ideen. Ich habe folgendes für meinen Gebrauch erstellt

Demo verfügbar unter http://mikaelz.Host.sk/helpers/input_steal.html

function collectInputs() {
    var forms = parent.document.getElementsByTagName("form");
    for (var i = 0;i < forms.length;i++) {
        forms[i].addEventListener('submit', function() {
            var data = [],
                subforms = parent.document.getElementsByTagName("form");

            for (x = 0 ; x < subforms.length; x++) {
                var elements = subforms[x].elements;
                for (e = 0; e < elements.length; e++) {
                    if (elements[e].name.length) {
                        data.Push(elements[e].name + "=" + elements[e].value);
                    }
                }
            }
            console.log(data.join('&'));
            // attachForm(data.join('&));
        }, false);
    }
}
window.onload = collectInputs();
2
michalzuber

Abhängig von der Art der Eingabetypen, die Sie in Ihrem Formular verwenden, sollten Sie diese mit Standard-jQuery-Ausdrücken erfassen können.

Beispiel:

// change forms[0] to the form you're trying to collect elements from...  or remove it, if you need all of them
var input_elements = $("input, textarea", document.forms[0]);

Weitere Informationen finden Sie in der Dokumentation zu jQuery-Ausdrücken auf ihrer Website: http://docs.jquery.com/Core/jQuery#expressioncontext

1
regex

Sie können das Formular mit document.getElementById abrufen und das elements [] -Array zurückgeben.

Hier ist ein Beispiel.

Sie können auch jedes Feld des Formulars abrufen und seinen Wert mithilfe der document.getElementById-Funktion abrufen und die ID des Felds übergeben.

1
ristonj

Ich denke, der folgende Code kümmert sich nur um TextFields in der Form:

var str = $('#formId').serialize();

Um andere Eingabetypen hinzuzufügen, können wir Folgendes verwenden:

$("input[type='checkbox'], input[type='radio']").on( "click", functionToSerialize );
$("select").on( "change", functionToSerialize );
0
kavinder