如何构建一个带有复选框和单选值的 URL？

Question

我直接将这个基本 serialize() example 复制粘贴到本地 html，它可以打印字符串（很明显）。

但是我很难用这个字符串创建 url。我的目标是创建一个如下所示的 link（或表单操作）：

<a href="node/1?single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1">Click me</a>

但是当 a 执行以下操作时：

var mylink = showValues();
document.write('<a href="node/1?'+mylink+'">Click me</a>');

...它向我抛出 "undefined" 错误。

请问有人知道怎么做吗？

这是完整代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>serialize demo</title>  
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<form class="myform">
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>

  <br>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>

  <br>
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>

  <br>
  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>

<p><tt id="results"></tt></p>

<script>
  function showValues() {
    var str = $( ".myform" ).serialize();
    $( "#results" ).text( str );
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );
  showValues();
</script>

</body>
</html>

Answer 1

试试这个：

function showValues() {
    var str = $( "form" ).serialize();
    $( "#results" ).text( str );
    return str; // need to return result
}

您的函数做了一些事情，但实际上 return 并没有。为了填写myLink，您需要return "str"

Answer 2

感谢 user3191461，现在它确实会在页面加载时显示该字符串，但在选择其他选项时它不会改变。

我发现这种方法有效：

<script type="text/javascript">

  function showValues() {
    var str = $( ".myform" ).serialize();
    $("a.mylink").attr("href", "node/1?"+str);   
  }
  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
  $( "select" ).on( "change", showValues );  

   showValues();

</script>

如您所见，我在脚本中添加了 $("a.mylink").attr("href", "node/1?"+str);，并将以下 html-代码放在脚本标签之外：

<a href="node/1" class="mylink">Click me</a>

（注意 Drupal 可能需要 jQuery.noConflict(); 方法）

编辑： 仍然是个问题。复选框应该像这样构建 check=1,2 （作为数组）而不是 check=1&check=2...

解决方案（复选框作为数组）：

<script type="text/javascript">
  jQuery.noConflict();

  function showValues() {
    var radios = jQuery('input[type=\'radio\']:checked').map(function() { return this.value; }).get().join(', ');
    var checkboxes = jQuery('input[type=\'checkbox\']:checked').map(function() { return this.value; }).get().join(', ');
    jQuery("a.mylink").attr("href", "node/1?chks="+checkboxes+"&rads="+radios);  
  }
  jQuery( "input[type='checkbox']" ).on( "click", showValues );
  jQuery( "input[type='radio']" ).on( "click", showValues );

   showValues();

</script>

默认情况下 link 将是 node/1，但是一旦单击某个选项，字符串就会在其后面构建。在这种情况下，我将从空值开始，因此无需执行更多操作。

但如果我从选定的值开始（默认情况下必须将其放置在 url 中），我的解决方案是不够的。

因此，完美的解决方案是将与我的相结合的组合（或方法）。请问知道怎么做吗？

如何构建一个带有复选框和单选值的 URL？

How to build a URL with checkbox and radio values?

forms

url

jquery

serialization