如何在提交表单之前在JSON中获取表单所有元素值

时间:2018-02-15 17:03:22

标签: javascript jquery html server html-form

我将表单名称设置为JSON以获取JSON中的数据。当我提交HTML表单服务它工作正常但是当我在提交之前获得数据然后我无法获得正确的数据。

所有HTML呈现动态,因此没有修复xy值。这是相同的演示。

function validateData(){
	var isValidate = false;
	console.log($('form').serializeArray());
	console.log($('form').serialize());
	return isValidate;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="return validateData();" action="./send" method="post">
	<input type="hidden" name="a[x][Id]" value="hello x">
	<input type="radio" name="a[x][istest]" value="true"> Yes
	<input type="radio" name="a[x][istest]" value="false"> No
	<textarea name="a[x][msg]"></textarea>
	<input type="hidden" name="a[y][Id]" value="hello y">
	<input type="radio" name="a[y][istest]" value="true"> Yes
	<input type="radio" name="a[y][istest]" value="false"> No
	<textarea name="a[y][msg]"></textarea>
	<input type="hidden" name="id" value="hello form">
	<input type="submit" value="Submit "/>
</form>

我jQuery返回以下结果

JQuery Result

当我检查服务器时,它正在发送正确的JSON

{ a:
   { x: { Id: 'hello x',istest : 'true', msg: '' },
     y: { Id: 'hello y',istest : 'false', msg: '' } },
  id: 'hello form' }

我做了很多搜索,但无法得到正确答案。

1 个答案:

答案 0 :(得分:1)

我自定义了JSON,它向我发送了我想要的相同JSON。

var formValues = $('form').serializeArray();

var formJSON = {};
formValues.map(function(index, value){
    var name = index.name;
    name = name.replace(/\[/g,',');
    name = name.replace(/\]/g,'');
    name = name.split(',');
    if(name.length == 3){
        if(formJSON[name[1]] != undefined)
            formJSON[name[1]][name[2]] = index.value;
        else
            formJSON[name[1]] = {[name[2]] :index.value};
    }
});

console.log(formJSON);