Question

在HTML页面上，您有一个带有提交按钮的文本框。我需要知道如何重定向到特定的数字，如：

如果填写1并点击提交，则会重定向到www.website/page1.html
如果填写2并点击提交，则会重定向到www.website/page2.html

依旧......

我只在网站上使用HTML / CSS。

任何人都知道如何解决这个问题？

Answer 1

首先，您可以使用一个小JS来添加输入字段和按钮：

<input type='text' id='url' />
<input type='submit' id='btn' />

然后添加你的javascript

document.getElementById("btn").addEventListener("click", goToUrl);
function goToUrl(){
  window.location = document.getElementById('url').value;
}

这将带您到任何URL，您可以修改路径名以添加/追加目的地：

window.location = 'www.website/page' + document.getElementById('url').value + '.html';

Answer 2

让我们说，你的HTML看起来像这样：

<input type="text" id="url">
<button type="button" id="redirect">Submit</button>

您想捕获用户在input字段中键入的内容，并根据该字段进行重定向。

这就是我如何做到的：

＆＃13;

// register an event listener for the button. This can also be done using element.onlick
document.getElementById("redirect").addEventListener("click", () => {
  // get the number from the input field
  let number = document.getElementById("url").value;
  
  // construct the url to redirect to using a template string
  let url = `www.website.tld/page${number}.html`;
  
  // redirect the user to the new location
  //window.location.href = url;
  
  console.log(url);
});

＆＃13;

<input type="text" id="url">
<button type="button" id="redirect">Submit</button>

＆＃13;

Answer 3

我只在网站
中使用html / css

我假设你有jQuery或者知道普通JS的一些基本概念。

＆＃13;

// gets your form by id
var formElem = document.getElementById('your-form');

// adding an event listener for submissions
formElem.addEventListener('submit', function(event) {

  // prevents the default behavior on submit
  event.preventDefault();

  // creating the variables we are going to use
  // and getting the value from the input field
  var redirectUserTo = null;
  var yourInputElemValue = document.getElementById('your-input').value;

  // checks the value and define the user destination based on the value
  // alternatively you may use a "switch case" if it fits better...
  if (yourInputElemValue == "1") {
    redirectUserTo = "page1.html";
  } else if (yourInputElemValue == "2") {
    redirectUserTo = "page2.html";
  }

  // checks if some destination was set before redirecting the user...
  if (redirectUserTo) {
    window.location.href = redirectUserTo;
  }
});

＆＃13;

<form id="your-form" action="">
  <label for="your-input">Your Input</label>
  <input type="text" id="your-input" name="your-input" />
  <button type="submit">Submit this form</button>
</form>

＆＃13;

Answer 4

你可以使用JavaScript或jQuery来实现这个目标

function gotoPage(){
  var page_val = document.getElementById('page').value;
  if(page_val){
    window.open("page" + page_val + ".html","_self");
  }
  else{
    alert("Please Enter Something!");
  }
}

  <input type='number' id='page' id='text' />
  <input type='submit' id='btn' onclick="gotoPage()" />

Answer 5

我建议你使用javascript

function goTo(){
  var inputValue = document.getElementById('input').value
  if(inputValue === '1'){
    window.open('http://www.website/page1.html');
  }
}

<input id='input'>
<br>
<button onclick='goTo()'>Submit</button>

带框输入的重定向页面

5 个答案: