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

Question

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

我尽可能地在 url 中获取一个值，但它到此为止。如果我运行控制台(日志)，我会看到所有这些。

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

<form id="message"><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></form>
<div class="button-center done">
     <a href="#"><p>DONE</p></a>
</div>

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

    var dataArray = $('#message').serializeArray();
    
    $.each(dataArray, function(i, field){
        var dataObject = field.value + ' ';
        
        window.open('http://url.com?name=test&property=' + dataObject); 
   
    });
    
 });

Answer 1

如果你只是想提交你的表单数据到一个新的窗口/标签，那么你根本不需要任何JavaScript，你可以只添加一个额外的“target”属性到你的表单标签，告诉它提交进入一个新窗口。

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

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

而不是你的超链接，有一个适当的“提交”按钮。 (您可以使用 CSS 使其看起来像超链接，如果您愿意的话。)

<input type="submit" name="submit" value="Done"/>

如果您仍想提交已硬编码到 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

演示:http://jsfiddle.net/ryzmL1hs/