Question

我正在构建一个包含多个页面的HTML表单，每个问题一个（由于布局原因）。我使用'GET'方法将表单输入的参数传递给下一页，如下所示：

<form action="example.html" method="GET">
    <input type="number" step="0.1" name="Machine" id="Machine" placeholder="Machine">
    <input type="image" value="Submit" src="images/button.svg" alt="Forward"/>
</form>

这很好用，并引导我到URL

/example1.html?Machine=Input

在下一页上，我使用与上面提到的相同的代码（输入只有不同的名称和ID），但是当我提交该页面时，第一页的参数将不会被重定向（当然）。因此URL看起来像这样：

/example2.html?Amount=Input

我也需要有第一页的参数。基本上看起来像这样

/example2.html?Machine=Input&Amount=Input

有没有一种简单的方法可以用很少的Javascript甚至没有Javascript来做到这一点？谢谢你的帮助

Answer 1

您可以尝试使用javascript动态地向表单添加隐藏的input元素，使用name中的GET参数中的value和document.location.search对创建。

Answer 2

使用此位获取参数 How can I get query string values in JavaScript?

然后这一点将隐藏的表单字段添加到表单中，以便在下一次提交时传递

Create a hidden field in JavaScript

这样的事情

＆＃13;

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var Amount= getParameterByName('Amount'); 
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "Amount");
input.setAttribute("value", Amount);
document.getElementById("example2").appendChild(input);

＆＃13;

<form action="example1.html" method="GET" id="example1">
    <input type="number" step="0.1" name="Amount" id="Amount" placeholder="Amount">
    <input type="image" value="Submit" src="images/button.svg" alt="Forward"/>
</form>

<form action="example2.html" method="GET" id="example2">
    <input type="number" step="0.1" name="Machine" id="Machine" placeholder="Machine">
    <input type="image" value="Submit" src="images/button.svg" alt="Forward"/>
</form>

＆＃13;

Answer 3

点击下面的运行代码段，查看工作示例。

您可以使用JavaScript隐藏和显示表单的部分（步骤），而不是传递结果并转到下一步。

像AngularJS这样的框架可以使用声明性指令非常简单。但是一个普通的JavaScript就足够了。

此方法的另一个优点是您可以将表单POST到Web服务器。

function goTo(step) {
  
  var steps = document.querySelectorAll('[step]'),
      formStep,
      formStepNo,
      i;
  
  for (i = 0; i < steps.length; i++) {
   
    formStep = steps[i];
    
    formStepNo = formStep.getAttribute('step');
    
    if (step == formStepNo) {
      formStep.style.display = 'block';
    } else {
      formStep.style.display = 'none';  
    }
  }
}

var step = 1;
goTo(step);

function nextStep() {
  step++;
  goTo(step);
}

function backStep() {
  step--;
  goTo(step);
}

<form action="example.html" method="POST">
    <div step="1">
      <p>Step 1</p>
      <input type="number" name="Machine" id="Machine" placeholder="Machine" />
      <button onclick="nextStep()" type="button">Forward</button>
    </div>
    <div step="2">
      <p>Step 2</p>
      <input type="string" name="foo" placeholder="foo"/> 
      <button type="button" onclick="backStep()">Back</button>
      <button type="button" onclick="nextStep()">Forward</button>
    </div>
    <div step="3">
      <p>Step 3</p>
      <input type="string" name="bar" placeholder="bar"/> 
      <button type="button" onclick="backStep()">Back</button>
      <button type="submit">Submit</button>
    </div>
</form>

将GET参数转发到下一个URL

3 个答案: