个人中心
gpt4 book ai didi

javascript - 用变量替换输入值并且

转载 作者：行者123 更新时间：2023-12-02 22:50:43 24 4
gpt4 key购买 nike

我正在尝试用 javascript 为我的网站制作一种问卷/测验。调查问卷共 5 页，每页有一个问题。我想使用 GET 方法，因此每个页面的 URL 如下所示:

(我必须保留 GET 方法，因为我想用于其他用途)。

用户登陆第一页 --> 获取 radio 输入表单 --> 检查一个 --> 重定向到第二页 --> 等等...

?q= 是包含答案的变量，例如 ?q=133 表示用户选择了以下答案:

  • 在第一个问题中，他检查了值1的 radio 输入

  • 在第二个问题中，他检查了值3的 radio 输入

  • 在第三个问题中，他检查了值3的 radio 输入

(所以 133 表示用户检查第一个问题的 1，第二个问题的 3，第三个问题的 3。)

<小时/>

我设法使变量起作用:

  • answPre:从 GET (?q=1) 形式获取先前的答案。

  • answCurrent:获取当前页面检查的 radio 输入。

  • urlVal:两者的组合(answPre+answCurrent)

所以我希望 urlVal 成为从一个页面传输到另一个页面的值。但我不想在 url 中同时包含 urlVal 和“q”值(选中的单选按钮的名称)。

什么是正确的做法？

  • 我可以隐藏 URL 中的“q”值吗？

  • 或者我可以“覆盖”q 值并改为 urlVal 吗？

我迷路了，希望得到任何帮助，感谢您的帮助和时间!

function displayRadioValue() {

 // var pageURL = window.location.href;
 var fakeURL="website.com/quiz/first?q=1"
  var answPre = fakeURL.substr(fakeURL.lastIndexOf('=') + 1);  //get the previous page's answer.

//get the current page's answer
    var ele = document.getElementsByName('q');
    for(j = 0; j < ele.length; j++) {
      if(ele[j].checked)
      var answCurrent= document.getElementById("demo2").innerHTML = ele[j].value;
    }

  var array = [answPre,answCurrent]; //combine answPre + answNew
  var urlVal = "";
  var i;
   for (i = 0; i < array.length; i++) {
     urlVal += array[i];
   }



document.getElementById("demo1").innerHTML = answPre;
document.getElementById("demo3").innerHTML = urlVal;


//document.getElementById("fquiz").submit();// Form submission

}
<html>
<body>
<h2>second.html</h2>

<b>answPre: </b><span id="demo1"></span><br>
<b>answCurrent: </b><span id="demo2"></span><br>
<b>urlVal: </b><span id="demo3"></span><br>
<!-- <b>final answNew: </b><span id="demo4"></span><br> -->

<hr>

<form id="fquiz" method="GET" action="third.html">

<p>Who are you going with?</p>
  <input type="radio" name="q" value="1" id="yes"
  onClick="javascript: displayRadioValue()">Solo<br>

  <input type="radio" name="q" value="2" id="no"
  onClick="javascript: displayRadioValue()">Couple<br>

  <input type="radio" name="q" value="3" id="no"
  onClick="javascript: displayRadioValue()">Family with kids<br>

  <input type="radio" name="q" value="4" id="no"
  onClick="javascript: displayRadioValue()">Group of friends<br>

<p>(then it takes you to third.html with hopefully this url: ../third.html?q=XX where XX is urlVal)
</form>

</body>
</html>

最佳答案

我对您的代码进行了一些更改，使其更加现代化。

  1. 我将事件处理程序的绑定(bind)从 HTML 移至 JavaScript。一般来说，我喜欢保留有关结构的 HTML 和有关行为的 JavaScript。
  2. 除了之前的答案之外，我还添加了代码以从 URL 中获取该步骤。
  3. 我用过 querySelector 使用 :checked pseudo-selector 检索选定的单选按钮.
  4. 我用过 join('') 放在一系列答案上，以便于阅读。
  5. 在 HTML 中，我使用了 <p>所有需要在一行中的元素，而不是固定 <br>在每行的末尾。这只是个人喜好。
  6. 我将单选按钮及其文本包裹在 <label> 中元素。这有助于提高可访问性，并为人们提供更大的点击目标(点击整个标签检查 radio ，而不仅仅是 radio 本身)。

我还将 URL 参数的名称更改为 urlVal而不是q ，但我不确定我是否理解你问题的这一部分。我根本没有使用此代码的表单提交过程，而是依赖于更改 location直接...

请注意，在 Stack Overflow 上运行代码不会正确重定向，因为 example.com/quiz/second 上当然没有任何内容，而且 Stack Snippets 无论如何都是沙盒的。在任何情况下，您都需要根据您的具体用途调整代码。

// Use JavaScript to attach event handlers to HTML elements.
document.querySelectorAll('input[name="q"]').forEach(el => el.addEventListener('click', displayRadioValue));

function displayRadioValue() {

  // var pageURL = window.location.href;
  var fakeURL = "example.com/quiz/first?q=1"
  var step = fakeURL.substring(fakeURL.lastIndexOf('/') + 1, fakeURL.indexOf('?'));
  var answPre = fakeURL.substr(fakeURL.lastIndexOf('=') + 1); //get the previous page's answer.

  //get the current page's answer
  // The :checked pseudo-class makes it easier to find the checked radio button
  var el = document.querySelector('input[name="q"]:checked');
  var answCurrent = document.getElementById("demo2").innerHTML = el.value;
  var array = [answPre, answCurrent]; //combine answPre + answNew
  // The join method is easier to use than looping.
  var urlVal = array.join('');

  document.getElementById("demo1").innerHTML = answPre;
  document.getElementById("demo3").innerHTML = urlVal;
  
  switch (step) {
    case 'first': step = 'second'; break;
    case 'second': step = 'third'; break;
    case 'third': step = 'final'; break;
    default: return;
  }
  
  location.href = `example.com/quix/${step}?urlVal=${urlVal}`;
}
.form-group { margin: 0; }
<h2>second.html</h2>

<!-- <br> is a presentational element; better just to split up lines with paragraphs -->
<p class="form-group"><b>answPre: </b><span id="demo1"></span></p>
<p class="form-group"><b>answCurrent: </b><span id="demo2"></span></p>
<p class="form-group"><b>urlVal: </b><span id="demo3"></span></p>
<!-- <p class="form-group"><b>final answNew: </b><span id="demo4"></span></p> -->

<hr>

<form id="fquiz" method="GET" action="third.html">

  <p>Who are you going with?</p>
<!-- <br> is a presentational element; better just to split up lines with paragraphs -->
<!-- Always use <label> elements to label form fields -->
<!-- IDs must be unique to a document. They did not appear relevant here. -->
  <p class="form-group"><label><input type="radio" name="q" value="1">Solo</label></p>
  <p class="form-group"><label><input type="radio" name="q" value="2">Couple</label></p>
  <p class="form-group"><label><input type="radio" name="q" value="3">Family with kids</label></p>
  <p class="form-group"><label><input type="radio" name="q" value="4">Group of friends</label></p>
  <p>(then it takes you to third.html with hopefully this url: ../third.html?q=XX where XX is urlVal)</p>
</form>

关于javascript - 用变量替换输入值并且，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58187095/

24 4 0
文章推荐： javascript - 通过可观察量将数据从组件传递到服务
文章推荐： git - 从 azure pipeline check out git 子模块
文章推荐： azure - 跳过 Azure DevOps 中的管道阶段
文章推荐： javascript - 展平嵌套数组后保留元素的索引
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com