将表单中的 JSON 添加到另一个表单的隐藏输入中并提交答案

【问题标题】：Adding JSON from form into hidden input of another form and submit将表单中的 JSON 添加到另一个表单的隐藏输入中并提交
【发布时间】：2016-10-31 12:20:06
【问题描述】：

所以基本上，我有两种形式：

<form id="form1">
<input type="text" name="firstname"/>
<input type="text" name="lastname"/>
</form>

<form id="form2" method="POST" action="http://some.url.com">
<input type="hidden" name="school" value="Random school"/>
<input type="hidden" name="year" value = "Random year"/>
<input type="hidden" name="placeforJSON" id="json">
<input type="submit">
</form>

我想做接下来的事情：

当我从表单 2 按提交时，使用 form1 创建 JSON，将其放入“placeforJSON”输入名称并将 form2 发送到某个 URL

我能够正确发送此请求，但是，我正在努力将 JSON 设置为输入字段。

这是javascript代码（请注意，我是初学者，此代码取自互联网）：

这是对 JSON 进行字符串化的函数：

  $.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 JSON.stringify(o);
  };

这是在点击提交时设置“placeforJSON”输入的函数：

$(function() {
   $('#form2').submit(function() {
      $('#json').value = $('#form1').serializeObject();
      return false;
   });
});

我希望这会在发送 form2 之前添加 json 字符串，但事实并非如此。

我也尝试输入document.getElementById('json').value = $('#form1').serializeObject();，但也没有用。

有趣的是，例如这个：

<script type="text/javascript">
     function product(a,b) {
       return a*b;
     }
    document.getElementById('json').value = product(5,3);
 </script>

这通过了，请求中有一个对象 placeforJSON = 15。

有人可以帮我解决这个问题吗？提前谢谢你。

【问题讨论】：

这一行有一个类型：$('#json').value = $('#form1').serializeObject();应该是 $('#json').val($('#form1').serializeObject());
我已经试过了，把它放到提交函数中，可惜它仍然是空的。
在事件中添加这一行，看看控制台有什么内容 console.log($('#form1').serializeObject());
序列化对象将对象重新设置为值 {"firstname":"gj","lastname":"jnm"}
我对 javascript 完全陌生，但不会“Stringify”意味着它应该将其作为字符串值返回，以便我可以将其放入输入中？

标签： javascript html json forms

【解决方案1】：

将 $('#json').value = $('#form1').serializeObject(); 更改为 $('#json').val( $('#form1').serializeObject()); 应该可以解决此问题。请运行附加的Fiddle 并检查浏览器控制台。

【讨论】：

控制台看起来不错，但是 json 永远不会发送到服务器，因为请求是在更改之前发送的。
@Sekula1991 尝试从处理函数中删除 return false。从处理程序返回 false 将取消提交操作。
删除它但仍然没有运气

【解决方案2】：

这是解决此问题的方法：

HTML 代码：

<form id="form1" oninput="inputFunction()>
<input type="text" name="firstname"/>
<input type="text" name="lastname"/>
</form>

<form id="form2" method="POST" action="http://some.url.com">
<input type="hidden" name="school" value="Random school"/>
<input type="hidden" name="year" value = "Random year"/>
<input type="hidden" name="placeforJSON" id="json">
<input type="submit">
</form>

JAVASCRIPT 代码：

function toJSONString(form) {
    var obj = {};
    var elements = form.querySelectorAll( "input, select, textarea" );
    for( var i = 0; i < elements.length; ++i ) {
        var element = elements[i];
        var name = element.name;
        var value = element.value;

        if( name ) {
            obj[ name ] = value;
        }
    }
    return JSON.stringify(obj);
}

function inputFunction() {
  var form = document.getElementById("form1");
  var json = toJSONString(form);
  document.getElementById('json').value = json;
}

在每次输入更改时，我都会创建 JSON 字符串并将该值设置为 json 输入。

【讨论】：