Question

我有一个使用jQuery一次显示一个问题的简单表单。如果我只希望在提问过程的最后提交代码，我的代码就可以正常工作。

但是，我想让我的表单在问题得到回答时将答案提交到网址栏。

这是我的代码：

<script language="javascript">
  function displayquestion(a){
    $(".questionholder").stop().hide();
    $("#question"+a).stop().show();
  }
  function exefunction2(){
    document.forms["TheForm"].submit();
  }
</script>

<body onLoad="insertForm()">
<form id="TheForm">
<div class="questionholder" id="question1" style="display:block">
    What is your first name?<br>
    <input name="answer1"><br>
    <input type="button" class="sub" onclick="exefunction2();displayquestion(2);" id="button">
    <a onclick="displayquestion(2)">next</a>
</div>
<div class="questionholder" id="question2" style="display:none">
    What is your last name?<br>
    <input name="answer2"><br>
    <input type="button" class="sub" onclick="exefunction2();displayquestion(3);" id="button">
    <a onclick="displayquestion(3)">next</a>
</div>
</form>

<script language="javascript">
  var urlParams = new URLSearchParams(window.location.search);
  var answer1 = urlParams.get('answer1');
  var answer2 = urlParams.get('answer2');
  document.write(answer1 + ' ' + answer 2);
</script>

我无权访问服务器或PC目录中的其他文件。必须通过相同的HTML文件处理和显示所有内容。那只是我所处环境的现实，我不能以任何形式使用互联网。

因此，使用上面的代码，我在问题1弹出之前非常简短地看到了问题2，并且我有一个无限循环，其中只能回答问题1，整个表单都被提交（所有其他问题均为null或默认值），问题2很快出现并被问题1取代。

我不知道如何使我的代码停留在问题2上。

Answer 1

在没有向服务器发出任何实际请求的情况下更改url栏没有什么意义，因此任何涉及url栏的形式的常规操作通常都会导致请求也随之发送。

但是，既然您已经设定了目标，那么我可以考虑两种选择：

1）将做出的每个答案张贴在表单上，并在页面重新加载新的参数时，确定存在多少个参数，并根据该问题决定向用户显示哪个问题。但是，这将导致非常差的用户体验。

2）第二个选项是在提交答案时添加对url-bar url字符串的简单操作。我将展示这种方法。

要使用的功能是window.history.pushState()，它将为您处理url字符串。

基本上，只要有问题回答，您都可以通过在displayquestion()函数中添加一些代码来实现：

function displayquestion(a){
  $(".questionholder").stop().hide();
  $("#question"+a).stop().show();
  // Get the needed data:
  let prev = a-1;
  let key = `answer${prev}`;
  let val = $(`input[name='answer${prev}']`).val();
  // Change url with data:
  let url = 'window.location.pathname';
  if(prev===1){
    url = url + `?${key}=${val}`;
  } else {
    url = url + "&${key}=${val}";
  }
  window.history.pushState(key, key, url);
}

尝试获取一个按钮来切换问题并同时提交

1 个答案: