将数据从表单传递到类似JSON的对象

时间:2014-05-03 18:32:37

标签: javascript jquery html forms

我的表格如下:

<form name="input">

name: <input type="text" id="name">

data1: <input type="text" id="data1" value=110>
data2: <input type="text" id="data2" value=2 >
data3: <input type="text" id="data2" value=3>
data4: <input type="text" id="data2" value=4>


<input onclick="return inject();" type="submit" value="submit">

</form>

我的源代码看起来像:

var plotting()=[
{height:data_1, weight:54 },
{height:data_2, weight:66 },
{height:data_3, weight:45 },
{height:data_4, weight:60 }
]

假设我想通过高度传递我的变量data1,

所以我创建了一个方法

function injection(){
var data_1 = = document.getElementById("data1").value;
     .
     .
//repetition the first variable and method up to data4

}

它不起作用,但我可以像上面那样将data_1放在Object中吗? 当我点击提交时,它应该更新变量。

1 个答案:

答案 0 :(得分:0)

你所要求的并不完全清楚,但这里有一个关于更新表单提交对象的快速示例。如果您希望使用相同的数据填充表单,这是任务的一半。你可能已经创建了它。

<form id="demo">
    name: <input type="text" name="name">
    data1: <input type="text" name="data1" value="110">
    data2: <input type="text" name="data2" value="2" >
    data3: <input type="text" name="data3" value="3">
    data4: <input type="text" name="data4" value="4">
    <input type="submit" value="submit">
</form>


var plotting = {};

// Update object on form submit
document.getElementById('demo').addEventListener('submit', function(e) {
    var i = 0;
    while(e.target[i]) {
        var input = e.target[i];
        if(input.type != 'submit' && input.name) {
           plotting[input.name] = input.value;
        }
        i++;
    }
    e.preventDefault();
}, false);


<强>演示
http://jsfiddle.net/YaVzw/1/