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

Question

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

所有 HTML 呈现动态，因此没有固定的 x 和 y 值。这是同一个演示。

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 返回以下结果

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

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

我做了很多搜索，但没有得到正确的答案。

Answer 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);