Question

说我在应用程序中有此表单，我希望用户检查他们的兴趣，然后将值添加到url上。目标将仅接受url变量。

我尽可能地在URL中获取一个值，但是它在那里停止了。如果我运行console（log），我会全部看到它们。

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

<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代码中的“名称”参数，最简单的方法是在表单中添加一个隐藏字段：

<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/

Answer 2

您可以使用jQuery param方法。

描述：创建一个数组的序列化表示形式，一个普通的对象，或适合在URL查询字符串中使用的jQuery对象，或者 Ajax请求。如果传递了jQuery对象，则该对象应包含具有名称/值属性的输入元素。

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

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

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

});

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

2 个答案: