Question

我的网页上有4个按钮，每个按钮都有一个值。因此，根据在网页中按下/单击的按钮，我需要在URL中相应修改参数“ Buttonvals”，因为这些值将用作我的SQL查询的过滤器。

例如，如果选择了按钮1 2和4

URL必须为：url？buttonvals = value1 | value2 | value4。请建议我如何去做。如果可能的话，请提供代码，因为我还是Java和php的新手

  <input type="checkbox" name="item1" value="value1"> value1 <br>
  <input type="checkbox" name="item2" value="value2">  value2 <br>
  <input type="checkbox" name="item3" value="value3">  value3 <br>
  <input type="checkbox" name="item4" value="value4">  value4 <br>

  <input type="submit" value="Submit">




  the url must become something like   url?buttonvals=value1|value2|value4

预先感谢：）

Answer 1

嗨，R P，我为您提供解决方案。

您的HTML代码

<input type="checkbox" name="item1" value="value1" onclick="setUrlParams(this)"> value1 <br>
<input type="checkbox" name="item2" value="value2" onclick="setUrlParams(this)">  value2 <br>
<input type="checkbox" name="item3" value="value3" onclick="setUrlParams(this)">  value3 <br>
<input type="checkbox" name="item4" value="value4" onclick="setUrlParams(this)">  value4 <br>
<input type="submit" value="Submit">

JS代码

   function setUrlParams($obj){

  var myButtonClasses = $obj.classList;

 if (myButtonClasses.contains("chbox-clicked")) {

    myButtonClasses.remove("chbox-clicked");

 }else{
   myButtonClasses.add("chbox-clicked");
 }


  //now get all selcted classes
  var valueStr = "";
var chboxCheckd  = document.getElementsByClassName('chbox-clicked');
for (var i = 0; i < chboxCheckd.length; ++i) {
    var item = chboxCheckd[i];  
    valueStr = valueStr+item.value+"|";
}
  var finalurl = window.location.href;
  if( finalurl.indexOf('?') >= 0){
    finalurl = finalurl+"&buttonvals="+valueStr.slice(0, -1);
   }else{
    finalurl = finalurl+"?buttonvals="+valueStr.slice(0, -1); 
   }
  //var finalurl = "http://abc.xyz/buttonvals="+valueStr.slice(0, -1);
  console.log(finalurl);
  //window.history.replaceState(null, null, finalurl);
  //window.location.href = finalurl
}

取消注释replacestate行即可更改位置，而无需重新加载页面。或者取消注释最后一行以使用URL重新加载页面。

当前仅在控制台上打印。 JS编辑器上也不允许这样做。

DEMO

单击和取消单击按钮更新参数

1 个答案: