当前位置： 文江博客话题详情

3复选框以不同的更新参数

发布于 2025-02-10 23:16:31 字数 2892 浏览 0 评论 0原文

我有一系列if语句来确定location.href参数。我以前从未设置过这样的东西。

我想要tarput =，usernum =和coneff =以更新URL中的参数。但是由于某种原因，我的用户室破坏了JS。

这是我的示例：

function goPBFour(event) {
  //something wrong with number of users updating the url
  event.preventDefault();
  const formData = new FormData(event.target);
  const userNum = formData.get("userNum");

  if (document.querySelector("input[name=throughput]").checked) {
    if (document.querySelector("input[name=user]").checked) {
      if (document.querySelector("input[name=conEff]").checked) {
        window.location.href = "evalportalb4.html" + location.search + "&throughput=true" + "&userNum=" + userNum + "&conEff=true";
      } else {
        window.location.href = "evalportalb4.html" + location.search + "&throughput=true" + "&userNum=" + userNum;
      }
    } else if (document.querySelector("input[name=conEff]").checked) {
      window.location.href = "evalportalb4.html" + location.search + "&throughput=true" + "&conEff=true";
    }
  } else if (document.querySelector("input[name=user]").checked) {
    if (document.querySelector("input[name=conEff]").checked) {
      window.location.href = "evalportalb4.html" + location.search + "&userNum=" + userNum + "&conEff=true";
    } else {
      window.location.href = "evalportalb4.html" + location.search + "&userNum=" + userNum;
    }
  } else if (document.querySelector("input[name=conEff]").checked) {
    window.location.href = "evalportalb4.html" + location.search + "&conEff=true";
  } else {
    window.location.href = "evalportalb4.html" + location.search;
  }
}
<form id="myForm" onsubmit="goPBFour(event)" method="get">
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2"
        max="12" disabled required/> (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

原文

I have a series of if statements to determine location.href parameters. I have never set up something like this before.

I want throughput=, userNum=, and conEff= to update as parameters in the URL. but for some reason, my userNum breaks the JS.

Here is my example:

function goPBFour(event) {
  //something wrong with number of users updating the url
  event.preventDefault();
  const formData = new FormData(event.target);
  const userNum = formData.get("userNum");

  if (document.querySelector("input[name=throughput]").checked) {
    if (document.querySelector("input[name=user]").checked) {
      if (document.querySelector("input[name=conEff]").checked) {
        window.location.href = "evalportalb4.html" + location.search + "&throughput=true" + "&userNum=" + userNum + "&conEff=true";
      } else {
        window.location.href = "evalportalb4.html" + location.search + "&throughput=true" + "&userNum=" + userNum;
      }
    } else if (document.querySelector("input[name=conEff]").checked) {
      window.location.href = "evalportalb4.html" + location.search + "&throughput=true" + "&conEff=true";
    }
  } else if (document.querySelector("input[name=user]").checked) {
    if (document.querySelector("input[name=conEff]").checked) {
      window.location.href = "evalportalb4.html" + location.search + "&userNum=" + userNum + "&conEff=true";
    } else {
      window.location.href = "evalportalb4.html" + location.search + "&userNum=" + userNum;
    }
  } else if (document.querySelector("input[name=conEff]").checked) {
    window.location.href = "evalportalb4.html" + location.search + "&conEff=true";
  } else {
    window.location.href = "evalportalb4.html" + location.search;
  }
}
<form id="myForm" onsubmit="goPBFour(event)" method="get">
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2"
        max="12" disabled required/> (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

夜还是长夜 2025-02-17 23:16:31

您的JS有一些问题，我使用较少的重复使它变得更简单了，

function goPBFour(event) {
    //something wrong with number of users updating the url
    event.preventDefault();
    const formData = new FormData(event.target);
    const userNum = formData.get("userNum");

    let new_link = "evalportalb4.html" + window.location.search;

    if (document.querySelector("input[name=throughput]").checked) {
      new_link += "&throughput=true";
    }
    if (document.querySelector("input[name=user]").checked) {
      new_link += "&userNum=" + userNum;
    }
    if (document.querySelector("input[name=conEff]").checked) {
      new_link += "&conEff=true";
    }

    window.location.href = new_link;
}

缺少＆lt;/div;/div;，然后移动了＆lt; script＆gt;＆gt;＆gt;/script＆gt; <<<<<<<<<< /代码>到＆lt; body＆gt;的内部。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
  <body>
    <form id="myForm" onsubmit="goPBFour(event)" method="get">
      <div id="pBFContainer" class="container">
        <div id="bodyFOption1">
          <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
          <p></p>
        </div>
        <div id="bodyFOption2">
          <input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br />
          How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/> (Evaluate limits 2-12 users)
          <p></p>
        </div>
        <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
        </div>
        <input type="submit" id="subButton" value="Next..." />
       </div>
    </form>
    <script type="text/javascript" src="evalportalp1.js"></script>
  </body>
</html>

在阅读有关location.href的时候，我来了 https://developer.mozilla.org/en-us/docs/web/api/location ，也许最好使用location.replace.replace（）？

There were a few issues with your js, I made it somewhat simpler using less repetition

function goPBFour(event) {
    //something wrong with number of users updating the url
    event.preventDefault();
    const formData = new FormData(event.target);
    const userNum = formData.get("userNum");

    let new_link = "evalportalb4.html" + window.location.search;

    if (document.querySelector("input[name=throughput]").checked) {
      new_link += "&throughput=true";
    }
    if (document.querySelector("input[name=user]").checked) {
      new_link += "&userNum=" + userNum;
    }
    if (document.querySelector("input[name=conEff]").checked) {
      new_link += "&conEff=true";
    }

    window.location.href = new_link;
}

There was a missing </div> and I moved the <script></script> to the inside of <body>.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
  <body>
    <form id="myForm" onsubmit="goPBFour(event)" method="get">
      <div id="pBFContainer" class="container">
        <div id="bodyFOption1">
          <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
          <p></p>
        </div>
        <div id="bodyFOption2">
          <input type="checkbox" name="user" value="yes" onsubmit="goPBFour(event)" />Would you like to test capacity performance (concurrent users)?<br />
          How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/> (Evaluate limits 2-12 users)
          <p></p>
        </div>
        <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
        </div>
        <input type="submit" id="subButton" value="Next..." />
       </div>
    </form>
    <script type="text/javascript" src="evalportalp1.js"></script>
  </body>
</html>

While reading about location.href, I came about this https://developer.mozilla.org/en-US/docs/Web/API/Location, maybe it would be better to use location.replace()?

回复 原文
奢华的一滴泪 2025-02-17 23:16:31

您可以通过将formdata与urlsearchParams对象相结合，使其变得更加容易和动态。

在您的示例中因此，您已经可以使用它，而不是检查每个单独的输入。

通过将location.search传递到新的urlsearchParams实例来获取当前的URL参数。然后在formdata对象上循环，然后将每个密钥和值传递给urlsearchParams对象。结果应该是从表单中值覆盖的URL中的当前参数。

const form = document.querySelector('form');
form.addEventListener('submit', event => {
  event.preventDefault();
  
  const formData = new FormData(event.target);
  const params = new URLSearchParams(location.search);
  
  // Overwrite the params with values from the form.
  for (const [key, value] of formData) {
    params.set(key, value);
  }
  
  // Construct a new URL with the params.
  const url = new URL(location.origin);
  url.pathname = '/evalportalb4.html';
  url.search = params;
  
  // location.href = url;
  console.log(url);
});

// Enabling and disabling of number of users field.
const testUserPerformance = document.querySelector('#testUserPerformance');
const numberOfUsers = document.querySelector('#numberOfUsers');
testUserPerformance.addEventListener('change', event => {
  numberOfUsers.disabled = !event.target.checked;
});
.as-console-wrapper { max-height: 38px; }
<form>
  <div>
    <label>
      <input type="checkbox" name="throughput" value="yes" />
      Would you like to test the user experience throughput?
    </label>
  </div>
  
  <div>
    <label>
      <input id="testUserPerformance" type="checkbox" name="user" value="yes" />
      Would you like to test capacity performance (concurrent users)?
    </label>
  </div>
  
  <div>
    <label>
      How many Users:
      <input id="numberOfUsers" type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>
    </label>
  </div>
  
  <div>
    <label>
      <input type="checkbox" name="conEff" value="yes" />
      Would you like to test connection efficiency?
    </label>
  </div>
  
  <button>submit</button>
</form>

You can make this significantly easier and dynamic by combining the FormData with an URLSearchParams object.

In your example FormData extracts all the values from the form and does that in a smart way by omitting inputs that are either disabled or not checked, so you can already use that instead of checking every individual input.

Get the current URL params by passing location.search to a new URLSearchParams instance. Then loop over the FormData object and pass every key and value to the URLSearchParams object. The result should be the current params in the URL overwritten by the values from the form.

const form = document.querySelector('form');
form.addEventListener('submit', event => {
  event.preventDefault();
  
  const formData = new FormData(event.target);
  const params = new URLSearchParams(location.search);
  
  // Overwrite the params with values from the form.
  for (const [key, value] of formData) {
    params.set(key, value);
  }
  
  // Construct a new URL with the params.
  const url = new URL(location.origin);
  url.pathname = '/evalportalb4.html';
  url.search = params;
  
  // location.href = url;
  console.log(url);
});

// Enabling and disabling of number of users field.
const testUserPerformance = document.querySelector('#testUserPerformance');
const numberOfUsers = document.querySelector('#numberOfUsers');
testUserPerformance.addEventListener('change', event => {
  numberOfUsers.disabled = !event.target.checked;
});
.as-console-wrapper { max-height: 38px; }
<form>
  <div>
    <label>
      <input type="checkbox" name="throughput" value="yes" />
      Would you like to test the user experience throughput?
    </label>
  </div>
  
  <div>
    <label>
      <input id="testUserPerformance" type="checkbox" name="user" value="yes" />
      Would you like to test capacity performance (concurrent users)?
    </label>
  </div>
  
  <div>
    <label>
      How many Users:
      <input id="numberOfUsers" type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>
    </label>
  </div>
  
  <div>
    <label>
      <input type="checkbox" name="conEff" value="yes" />
      Would you like to test connection efficiency?
    </label>
  </div>
  
  <button>submit</button>
</form>

回复 原文
陌路终见情 2025-02-17 23:16:31

有很多问题，我试图重写它。这是我

的逻辑过度复杂的地方，而不是干燥（不要重复自己）

，我对此越多，我想知道为什么不拥有表格呢？

document.getElementById("myForm").addEventListener("submit", function(event) {
  const userNum = document.getElementById("numberUsers").value;
  let loc = "evalportalb4.html" + location.search;
  const throughput = document.querySelector("input[name=throughput]").checked;
  const userChecked = document.querySelector("input[name=user]").checked;
  const conEff = document.querySelector("input[name=conEff]").checked;

  if (userChecked) loc += "&userNum=" + userNum;
  if (throughput)  loc += "&throughput=true"
  if (conEff)      loc += "&conEff=true";
  alert(loc); // for debugging
  event.action = loc; // go to the URL
})
<form id="myForm" method="get">
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>      (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

如果您在选择上删除残疾人，则表格应该有效

<form id="myForm" method="get" action="evalportalb4.html"
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" size="3" name="userNum" placeholder="2" min="2" max="12" required/>      (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>

There are many issues, I tried to rewrite it. This is where I am

Your logic is overcomplicated, AND not DRY (Don't Repeat Yourself)

The more I looked at this, I wondered why not just have the form?

document.getElementById("myForm").addEventListener("submit", function(event) {
  const userNum = document.getElementById("numberUsers").value;
  let loc = "evalportalb4.html" + location.search;
  const throughput = document.querySelector("input[name=throughput]").checked;
  const userChecked = document.querySelector("input[name=user]").checked;
  const conEff = document.querySelector("input[name=conEff]").checked;

  if (userChecked) loc += "&userNum=" + userNum;
  if (throughput)  loc += "&throughput=true"
  if (conEff)      loc += "&conEff=true";
  alert(loc); // for debugging
  event.action = loc; // go to the URL
})
<form id="myForm" method="get">
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" id="numberUsers" size="3" name="userNum" placeholder="2" min="2" max="12" disabled required/>      (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>
<script type="text/javascript" src="evalportalp1.js"></script>

Just the form should work if you remove the disabled on the select

<form id="myForm" method="get" action="evalportalb4.html"
  <div id="pBFContainer" class="container">
    <div id="bodyFOption1">
      <input type="checkbox" name="throughput" value="yes" />Would you like to test the user experience throughput?
      <p></p>
    </div>
    <div id="bodyFOption2">
      <input type="checkbox" name="user" value="yes" />Would you like to test capacity performance (concurrent users)?<br /> How many Users:<input type="number" size="3" name="userNum" placeholder="2" min="2" max="12" required/>      (Evaluate limits 2-12 users)
      <p></p>
    </div>
    <div id="bodyFOption3"><input type="checkbox" name="conEff" value="yes" />Would you like to test connection efficiency?</div>
  </div>
  <input type="submit" id="subButton" value="Next..." />
</form>

回复 原文
~没有更多了~

关于作者

|煩躁

暂无简介

文章
评论
29 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文