Question

我对html有点熟悉，但我不熟悉java脚本我想知道是否有办法让一个表格例如一个名称字段，并根据输入到该字段的名称使用java脚本重定向到那个人的html页面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Redirect Form</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <form>
            <p>Name:</p><input type="name" id="name">
            <p>E-mail</p><input type="email" id="inputEmail"><br>
            <br>
            <button type="button">Redirect</button>
        </form>
    </body>

所以我有这个，我想在名称字段中输入名称“John”并将其重定向到名为john.html的页面，或者如果我输入名称“mary”，则将其重定向到名为“mary”的页面玛丽。我不希望为每个名称生成页面，这将是预先创建其页面的两个特定名称。我如何创建java脚本来处理这个问题？

Answer 1

不是一个干净的解决方案，但可以告诉你如何做到这一点。

＆＃13;

var input_link;
function fetchInput() {
  input_link = $('#name').val();
}

function redirect() {
  fetchInput();
  window.location.href = 'http://example.com/'+input_link+'.html';
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Name:</p><input type="name" id="name">
<p>E-mail</p><input type="email" id="inputEmail"><br>
<br>
<button type="button" onclick="redirect();">Redirect</button>

＆＃13;

Answer 2

你可以将onclick连接到按钮上，就像这样。

document.getElementById("{buttonID}").onclick = function () {
    location.href = "www.yoursite.com/" + 
        document.getElementById('textbox_id').value;
};

确保为HTML按钮元素指定一个id，然后将代码中的“{buttonID}”替换为该id值。对名称输入字段执行相同的操作（给它一个id并将“textbox_id”替换为该输入id值）。

另外，请勿将<p>用于输入标签。为此目的有一个特定的元素，<label>。并且您不需要按钮元素上的type=button（这是多余的）。所以完整的html看起来像：

<label for="name">Name:<input type="text" name="name" id="name"></label>
<label for="email">Email:<input type="text" name="email" id="inputEmail"></label>
<button id="submit">Redirect</button>

基于输入的Java脚本多重定向

2 个答案: