时间戳

首页 > 解决方案 > Javascript html表单动态更新动作值未保存

javascript - Javascript html表单动态更新动作值未保存

问题描述

我有一个表单，其操作值根据用户选择的复选框进行更新。我想创建一个带有反映所选复选框的查询的 URL。

当我单击复选框时，查询字符串已正确构建，没问题。但是，当我在表单上单击提交时，它会将查询字符串转换为 admin/sites/lockers/?types=5对admin/sites/lockers/?colonised=on&free=on我来说是黑魔法。

为什么这样做？我希望在admin/sites/lockers/?types=5.

谢谢你的帮助。

资源 ：

// creates query string based on what was filled in form.
// GET request will be done with the options provided.
const initialPath = document.optionsForm.action;

parseValues();

function parseValues() {
  let optionsArray = [];
  const params = new URLSearchParams();

  let n = 0;
  let flag = 0;
  for (let k = 1; k <= 4; k++) {
    let check = document.getElementById("customCheck" + k);
    if (check.checked) {
      flag += Math.pow(2, (k - (n + 1)));
    }
  }
  optionsArray.push({
    name: 'types',
    value: flag
  })

  const url = jQuery.param(optionsArray);
  document['optionsForm'].action = initialPath + url;
  console.log(initialPath + url);
}
<html>

<head>
  <title>Test</title>
</head>

<body>
  <div class="container">
    <div class="jumbotron">
      <form action="/admin/sites/lockers/?" method="GET" name="optionsForm">
        <p class="lead">Cochez les localisations souhaitées : </p>
        <p class="lead">Cochez les types de casiers souhaités : </p>
        <div class="form-group">
          <div class="custom-control custom-checkbox" onclick='parseValues()'>
            <input type="checkbox" class="custom-control-input" id="customCheck1" checked="" name="colonised">
            <label class="custom-control-label" for="customCheck2">Colonisés</label>
          </div>
          <div class="custom-control custom-checkbox" onclick='parseValues()'>
            <input type="checkbox" class="custom-control-input" id="customCheck2" checked="" name="non-renewed">
            <label class="custom-control-label" for="customCheck2">Non Renouvelés</label>
          </div>
          <div class="custom-control custom-checkbox" onclick='parseValues()'>
            <input type="checkbox" class="custom-control-input" id="customCheck3" checked="" name="free">
            <label class="custom-control-label" for="customCheck3">Libres</label>
          </div>
          <div class="custom-control custom-checkbox" onclick='parseValues()'>
            <input type="checkbox" class="custom-control-input" id="customCheck4" checked="" name="occupied">
            <label class="custom-control-label" for="customCheck4">Occupés</label>
          </div>
        </div>
        <input type="submit" value="Confirmer" class="btn btn-primary" onclick="parseValues();">
      </form>
    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
</script>

</html>

标签： javascripthtmlformsurl

解决方案

推荐阅读