logo标签列表

如何将标准HTML表单转换为包含所有数据的JSON表示？

javascriptjquery
3

我有一个简单的HTML表单：

<form id="formid1" action="#" method="post">
    <table>
        <tr><td> First name: </td><td><input type="text" name="firstname" id="firstname"/>  </td></tr>
        <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
        <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
        <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
        <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
            <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

        <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

    </table>
</form>

我需要获取表单元素的JSON表示，包括id，value，type，form action，form id等。

我尝试使用以下代码进行操作，但并没有得到我想要的结果：

<script>
$(document).ready(function(){

    var encoded = $.toJSON($('#formid1')); 

    $("#formid1").submit(function() {
  $.colorbox({html:'<p>Form Converted to JSON Data: <br /><br /><br /><br /><br /></p>'+ encoded  });
      return false;
    });

    });
</script>

I get: 

{"length":1,"0":{"firstname":{},"lastname":{},"address":{},"zip":{},"sex":{"0":{},"1":{}},"6":{}},"context":{"jQuery16108216209608688556":1},"selector":"#formid1"}

关闭

在这个例子中，您希望您的JSON看起来像什么？ - Ali
可能是重复的问题：使用jQuery将表单数据转换为JS对象。 - Jasper
可能是使用jQuery将复杂表单序列化为JSON对象的重复问题。 - Paul Sweatte
2个回答
1

试试这个：

$('#formid1').serializeArray().reduce(function(obj, v) { obj[v.name] = v.value; return obj; }, { });
0

嗨，我也在解决同样的问题！我采用了onsubmit函数而不是action来解决它。你可以将表单中的所有内容传递给一个JavaScript函数，然后就可以访问表单数据了。我编写的函数使用警报来显示你已经可以访问该数据。以下是代码：

<html>
<body>

<form onsubmit="handleForm(this)">
<table>
    <tr><td> First name: </td><td><input type="text" name="firstname"  id="firstname"/>  </td></tr>
    <tr><td>  Last name: </td><td><input type="text" name="lastname" id="lastname"/>  </td></tr>
    <tr><td> Address:  </td><td> <input type="text" name="address" id="address"/> </td></tr>
    <tr><td> Zip: </td><td> <input type="text" name="zip" id="zip"/> </td></tr>
    <tr><td> Sex:  </td><td> <input type="radio" name="sex" value="male" /> Male<br />
        <input type="radio" name="sex" value="female" /> Female<br /></td></tr>

    <tr><td>  </td><td>  <input type="submit" value="Submit" /></td></tr>

</table>
</form>

<script>
function handleForm(arr) {
    alert(arr['firstname'].value + arr['lastname'].value);
}
</script>

</body>
</html>
OP希望将表单转换为JSON，而不仅仅是从表单中获取某个属性。 - NiCk Newman
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接