web-dev-qa-db-fra.com

Comment puis-je obtenir toutes les valeurs d'un formulaire qui seraient soumises sans soumettre

J'ai un formulaire sur ma page et j'ajoute dynamiquement des contrôles au formulaire avec Javascript/JQuery. À un moment donné, j'ai besoin d'obtenir toutes les valeurs du formulaire côté client sous forme de collection ou de chaîne de requête. Je ne veux pas soumettre le formulaire parce que je veux transmettre les valeurs du formulaire ainsi que d'autres informations que j'ai sur le client à une méthode de service WCF/Ajax back-end. J'essaie donc de comprendre comment capturer toutes les valeurs du même type de collection que le formulaire enverrait normalement au serveur si le formulaire était réellement soumis. Je soupçonne qu'il existe un moyen facile de capturer cela, mais je suis perplexe.

javascriptjqueryhtmlajaxforms
45
Howard Pinsley

Le plugin de formulaire jquery offre un moyen facile d'itérer sur vos éléments de formulaire et de les placer dans une chaîne de requête. Il peut également être utile pour tout ce que vous devez faire avec ces valeurs.

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

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

Ou en utilisant directement jquery:

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

En Javascript simple, vous pouvez faire quelque chose de similaire à ce qui suit:

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("&");

En bref, cela crée une liste de paires clé-valeur (nom = valeur) qui est ensuite jointe en utilisant "&" comme délimiteur.

45
Bryan Kyle

Si votre balise de formulaire est comme

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

Récupérez ensuite l'élément de formulaire à l'aide de l'objet formulaires.

var formEl = document.forms.BookPackageForm;

Obtenez les données du formulaire en utilisant des objets FormData.

var formData = new FormData(formEl);

Obtenez la valeur des champs par l'objet de données de formulaire.

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

Merci Chris. Voilà ce que je cherchais. Cependant, notez que la méthode est serialize (). Et il existe une autre méthode serializeArray () qui semble très utile que je peux utiliser. Merci de m'avoir indiqué dans la bonne direction.

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

Vous pouvez utiliser cette boucle simple pour obtenir tous les noms d'éléments et leurs valeurs.

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

Pour ceux qui n'utilisent pas jQuery, voici ma fonction JavaScript Vanilla pour créer un objet de données de formulaire accessible comme n'importe quel objet commun, contrairement à new FormData(form).

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>

Vous pouvez également jouer avec lui dans ce stylo: http://codepen.io/thdoan/pen/EyawvR

MISE À JOUR: J'ai également ajouté une fonction pour remplir le formulaire avec l'objet renvoyé par formDataToObject().

2
thdoan

Merci pour vos idées. J'ai créé ce qui suit pour mon usage

Démo disponible sur 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

Selon le type de types d'entrée que vous utilisez sur votre formulaire, vous devriez pouvoir les récupérer à l'aide d'expressions jQuery standard.

Exemple:

// 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]);

Consultez la documentation des expressions jQuery sur leur site pour plus d'informations: http://docs.jquery.com/Core/jQuery#expressioncontext

1
regex

Vous pouvez obtenir le formulaire en utilisant un document.getElementById et en renvoyant le tableau elements [].

Voici un exemple.

Vous pouvez également obtenir chaque champ du formulaire et obtenir sa valeur à l'aide de la fonction document.getElementById et en transmettant l'ID du champ.

1
ristonj

Je pense que le code suivant ne prendra en charge que TextFields sous la forme:

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

Pour ajouter d'autres types de type d'entrée, nous pouvons utiliser:

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