Question

我直截了当地将这个基本的serialize() example粘贴到本地的html上，它可以打印字符串（显然）。

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

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

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

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

...它向我抛出了“未定义”的错误。

有人知道如何完成这项工作吗？

这是完整的代码：

<!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
}

你的功能做了什么，但实际上没有回来。为了填充myLink，您需要返回＆＃34; str＆＃34;

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>

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

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

所以完美的解决方案是将user3191461's solution与我的结合起来的组合（或方法）。知道如何才能做到这一点吗？

如何使用复选框和单选格值构建URL？

2 个答案: