2

いくつかの値を含む動的な html フォームがあります。必要なのは、フォーム データを JSON に追加し、それを mysql に挿入するために php ページに投稿することです。

形：

<input type="text" name="name[]" id="p" />
<input type="text" name="manuf[]" id="k" size="3" />
<input type="text" name="item_pr[]" id="ka" size="10" />
<input type="text" name="price" id="su" size="10" disabled="disabled"/><br />

最初にJS配列を作成しようとしましたが、1つのコード行ですべての値を取得する方法と、jsonに変換してphpに投稿する方法を理解できません:

var elementai = document.getElementsByName('name[]');
          for (var i = 0, j = elementai.length; i < j; i++) {
          var elementas = elementai[i];
          alert(elementas.value);
          }
4

4 に答える 4

4

使いやすく、書くコードが少ないので、jQueryを使用できます。私はここで両方の解決策を与えていますが。

JavaScriptの場合：

$.fn.extractObject = function() {
  var accum = {};
  function add(accum, namev, value) {
    if (namev.length == 1)
      accum[namev[0]] = value;
    else {
      if (accum[namev[0]] == null)
        accum[namev[0]] = {};
      add(accum[namev[0]], namev.slice(1), value);
    }
  }; 
  this.find('input, textarea, select').each(function() {
    add(accum, $(this).attr('name').split('.'), $(this).val());
  });
  return accum;
}
// ...

var object = $('#testformId').extractObject();
console.log(object);

デモは次のとおりです：http ：//jsfiddle.net/G2XVq/

jQueryの場合：

$.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;
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});​

（ここから取得したjQuery部分）

これがデモです：http ：//jsfiddle.net/sxGtM/3/

javascriptを介してphpにデータを投稿するため：

 var str_json = JSON.stringify(myObject) //gives me the JSON string.

// AJAX XMLHttpRequest object in Javascript to send data to the server:
request= new XMLHttpRequestObject()
request.open("POST", "Phppage.php")
request.setRequestHeader("Content-type", "application/json", true)
request.send(str_json)
于 2012-07-10T18:22:48.000 に答える
2

以下のソリューションでは、jQuery の.map()関数を利用して、目的の結果を正確に得るために必要なコードの量を最小限に抑えています。

HTML:

<input type="text" name="name" id="p" /> 
<input type="text" name="manuf" id="k" size="3" /> <input type="text" name="item_pr" id="ka" size="10" /> 
<input type="text" name="price" id="su" size="10" disabled="disabled"/>
<br /> 
<input type="button" id="go" value="Go >>" onclick="createJSONObject()" />

jQuery:

function createJSONObject(){
    var formValues = $('input[type=text]');
    var obj = {};
    $.map(formValues, function(n, i) {
        obj[n.name] = $(n).val();
    });

    console.log(JSON.stringify(obj));
}

デモ: http://jsfiddle.net/mBLkH/

上記のコードは、要素の jQuery オブジェクトを作成し、各要素の属性をオブジェクト変数にinputマップします。次に、オブジェクトを表示可能なコンテキストにフォーマットするために利用します。namevalueobjJSON.stringify(obj)

于 2012-07-10T18:18:26.307 に答える
0

jQueryはこれで終わりです。

証明: http://jsfiddle.net/iambriansreed/nTnhW/

純粋な JavaScript:

var input_ids = ['p','k','ka','su'];

for (var i = 0, j = input_ids.length; i < j; i++) {
    var element = document.getElementById(input_ids[i]);
    alert(element.value);
}​
于 2012-07-10T18:30:05.447 に答える
0

テキスト入力を取得したいだけで、フォームの ID がわかっている場合:

var inputs = document.getElementById('myForm').getElementsByTagName('input');
var params = {};
for(var i=0; i < inputs.length; i++){
    var curr = inputs[i];
    if(curr.getAttribute('type')==='text')){
        params[curr.getAttribute('name')] = curr.value;
    }
}

jQuery を使用して投稿する:

$.post('myUrl',params,function(data){ console.log(data); });

または、ストレートな JavaScript を使用: https://stackoverflow.com/a/8567146/1081941

于 2012-07-10T18:47:00.557 に答える