Question

我有一个包含多个值的动态html表单，我需要的是将表单数据添加到JSON并将其发布到php页面以插入到mysql。

形式：

<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数组，但无法弄清楚如何获取一个代码行中的所有值以及如何转换为json并发布到php：

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

Answer 1

嗯，您可以使用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);

以下是demo：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部分取自here）

以下是demo：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)

Answer 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/

上面的代码创建了input元素的jQuery对象，然后将每个元素的name属性和value映射到obj对象变量。然后，它使用JSON.stringify(obj)将对象格式化为可查看的上下文。

Answer 3

jQuery在这个上面被杀了。

证明：http://jsfiddle.net/iambriansreed/nTnhW/

Pure 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);
}

Answer 4

如果您只想获取文字输入，并且您知道表单的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

html表单数组到JSON

4 个答案: