Javascript 获取HTML表单值并提交到新窗口

假设我在一个应用程序中有这个表单，我希望用户检查他们的兴趣，然后将这些值添加到url上。目标将只接受url变量

我尽可能地在url中输入一个值，但仅此而已。如果我运行console（log），我会看到它们

我是错过了一个简单的步骤还是有更好的方法

电影
新闻
体育

$（'.done'）。在（'click'，function（）上{
var dataArray=$（'#message'）.serializeArray（）；
$.each（数据数组、函数（i、字段）{
var数据对象=field.value+“”；
打开窗户http://url.com?name=test&property=“+数据对象）；
});
});如果您只想将表单数据提交到一个新窗口/选项卡，那么您根本不需要任何JavaScript，您只需向表单标记添加一个额外的“target”属性，告诉它提交到一个新窗口

注意：如果
url.com
最初不是您页面的url，那么您也可以添加“action”属性来指定：

<form id="message" target="_blank" action="http://url.com" >...</form>

。。。

并有一个适当的“提交”按钮，而不是你的超链接。（如果您喜欢，可以使用CSS使其看起来像超链接。）



如果仍要提交硬编码到jQuery代码中的“name”参数，最简单的方法是在表单中添加一个隐藏字段：

<input type="hidden" name="name" value="test"/>



因此，在您的情况下，完成的代码如下所示：

<form id="message" target="_blank" action="http://url.com">
  <input type="checkbox" name="movies" value="Movies" id="Movies">
  <label class="likeButton" for="Movies">Movies</label>
  <br>
  <input type="checkbox" name="news" value="News" id="News">
  <label class="likeButton" for="News">News</label>
  <br>
  <input type="checkbox" name="sports" value="Sports" id="Sports">
  <label class="likeButton" for="Sports">Sports</label>
  <input type="hidden" name="name" value="test"/>
  <br>
  <input type="submit" value="Done"/>
</form>


影视


新闻


体育



其他一切都可以被移除

这样，例如，如果您在“新闻”和“体育”上打勾，然后提交，那么最终的URL将类似于
http://url.com?news=News&sports=Sports&name=test

演示：
您可以使用该方法

描述：创建数组的序列化表示形式，即普通
对象，或适合在URL查询字符串或
Ajax请求。在传递jQuery对象的情况下，它应该包含
具有名称/值属性的输入元素

如果要循环所有值并将它们添加到URL，则在循环中运行window.open很可能是一个错误-我们可以看到，它将在循环的第一次迭代中打开窗口。我想你会在循环结束后移动这个。另外，如果你试图创建一个有效的查询字符串，这是错误的方法。您可以在URL上的一个“property”参数中获得所有字段值，这些字段值之间用空格分隔，没有任何名称（毕竟，接收页面不需要知道每个值所指的是什么吗？？？）P.S.注意到您也每次都重新创建dataObject，而不是附加更多值。因此，您也必须更改它，以便它添加到变量中，而不是替换它。但我仍然相当肯定，您将获得的格式不是页面预期的格式。这当然是…非传统的，我们应该说。看看你实际上似乎在尝试做什么，我认为有一个更简单的解决方案——看看下面的答案。有道理。所以，如果我移动窗口。在外面打开，我需要做一个循环变量，然后添加？是的。尽管jQuery已经提供了一个快捷方式，正如dganenco在他们的回答中所指出的那样。或者，我很确定您可以使用我的答案，完全摆脱jQuery。我不认为你现在所做的在任何情况下都会给你带来正确的结果。除非您打算将所有值作为一个“属性”参数提交？也许你应该给我们一个预期URL的例子。出于兴趣，如果有人选择，比如说，新闻和体育，然后单击“完成”，这将生成一个类似
https://www.url.com/?name=test&property=news%3DNews&sports=Sports
（演示：）。这看起来不太符合逻辑。这是不一致的，“news”选项保存在“property”参数中（但同时包含名称和值，用空格分隔，但包含“sports”值以更正常的方式存在于它自己的URL参数中。如果目标页面设置为以这种不一致的方式接收数据，我会有点惊讶。经过更多考虑后，@ADsyon html唯一的解决方案会更好地满足我的需要。
<form id="message" target="_blank" action="http://url.com">
  <input type="checkbox" name="movies" value="Movies" id="Movies">
  <label class="likeButton" for="Movies">Movies</label>
  <br>
  <input type="checkbox" name="news" value="News" id="News">
  <label class="likeButton" for="News">News</label>
  <br>
  <input type="checkbox" name="sports" value="Sports" id="Sports">
  <label class="likeButton" for="Sports">Sports</label>
  <input type="hidden" name="name" value="test"/>
  <br>
  <input type="submit" value="Done"/>
</form>

$('.done').on('click', function() {

  var dataArray = $('#message').serializeArray();

  window.open('http://url.com?name=test&property=' + $.param( dataArray ));

});