web-dev-qa-db-ja.com

送信せずに送信されるすべてのフォームの値を取得するにはどうすればよいですか

ページにフォームがあり、Javascript/JQueryを使用してフォームにコントロールを動的に追加しています。ある時点で、クライアント側のフォームのすべての値をコレクションまたはクエリ文字列として取得する必要があります。フォームの値を、クライアントにある他の情報と一緒にバックエンドWCF/Ajaxサービスメソッドに渡したいため、フォームを送信したくありません。そのため、フォームが実際に送信された場合にフォームが通常サーバーに送信するのと同じタイプのコレクション内のすべての値をキャプチャする方法を見つけようとしています。これをキャプチャする簡単な方法があると思うが、私は困惑している。

javascriptjqueryhtmlajaxforms
45
Howard Pinsley

Jqueryフォームプラグインは、フォーム要素を反復処理してクエリ文字列に入れる簡単な方法を提供します。また、これらの値を使用して他に必要なことにも役立ちます。

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

http://malsup.com/jquery/form から

または、ストレートjqueryを使用します。

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

ストレートJavascriptでは、次のようなことができます。

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

つまり、キーと値のペア（名前=値）のリストを作成し、「＆」を区切り文字として使用して結合します。

45
Bryan Kyle

あなたのフォームタグが

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

次に、フォームオブジェクトを使用してフォーム要素を取得します。

var formEl = document.forms.BookPackageForm;

FormDataオブジェクトを使用して、フォームからデータを取得します。

var formData = new FormData(formEl);

フォームデータオブジェクトによってフィールドの値を取得します。

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

ありがとう、クリス。それが私が探していたものです。ただし、メソッドはserialize（）であることに注意してください。そして、私が使用する非常に便利に見える別のメソッドserializeArray（）があります。私を正しい方向に向けてくれてありがとう。

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

この単純なループを使用して、すべての要素名とその値を取得できます。

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

JQueryを使用しない人のために、new FormData(form)とは異なり、一般的なオブジェクトのようにアクセスできるフォームデータオブジェクトを作成するVanilla JavaScript関数を以下に示します。

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

このペンでそれをいじることもできます： http://codepen.io/thdoan/pen/EyawvR

更新：formDataToObject()によって返されるオブジェクトをフォームに入力する関数も追加しました。

2
thdoan

あなたのアイデアをありがとう。私は自分の使用のために次のものを作成しました

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

フォームで使用している入力タイプのタイプに応じて、標準のjQuery式を使用してそれらを取得できる必要があります。

例：

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

詳細については、サイトのjQuery式のドキュメントを参照してください。 http://docs.jquery.com/Core/jQuery#expressioncontext

1
regex

Document.getElementByIdを使用してelements []配列を返すフォームを取得できます。

ここに例があります。

Document.getElementById関数を使用してフォームの各フィールドを取得し、その値を取得して、フィールドのIDを渡すこともできます。

1
ristonj

次のコードはフォーム内のTextFieldのみを処理すると思います。

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

他のタイプの入力タイプを追加するには、次を使用できます。

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