Question

表单按预期创建URL，我想在最后添加一个提交按钮，以便单击并转到我刚刚使用表单创建的新URL。对不起，如果愚蠢的问题，但我新手和困惑...谢谢！

HTML

<select id="queryid">
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>  
</select>

<br>

<select id="cid" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>

<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>

<input type="text" id="result" placeholder="placeholder" readonly><br>

JAVASCRIPT

function createUrl() {
var google = "http://www.google.com/";
document.getElementById("result").value = google +    document.getElementById("queryid").value +  document.getElementById("cid").value;
}

Answer 1

最简单的答案：

<input type="button" value="GO!" onclick="location.href = document.getElementById('result').value">

组织得更好：

<强> HTML

<input type="button" id="go-btn" value="GO!">

<强>的Javascript ：

document.getElementById("go-btn").addEventListener("click", function() {
  location.href = document.getElementById("result").value;
});

如果您想打开包含该页面的新窗口，只需使用window.open(document.getElementById("result").value)代替location.href = ...

Answer 2

这里我们去（在jsfiddle中尝试，stackoverflow将阻止新窗口）：

http://jsfiddle.net/g6U4a/94/

＆＃13;

function createUrl() {
    var google = "http://www.google.com/";
    document.getElementById("result").value = google + document.getElementById("Ultra").value +  document.getElementById("landing").value;
}

function goTo(){
window.open(document.getElementById("result").value);
}

＆＃13;

#result {
    width:500px;
}

＆＃13;

<select id="Ultra"> <!--Call run() function-->
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>  
</select><br><br>
<select id="landing" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>


<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>
<input type="text" id="result" placeholder="placeholder" ><br>
<button id="go" onclick="goTo();">Go!
</button>

＆＃13;

Answer 3

你已经到了一半了。

如果您在Js中添加额外的步骤来存储网址和参数，则可以将其发送到新功能以显示用户可以导航到的链接。

如果愿意，您可以选择将此链接设置为与按钮类似。

我已将链接设为visibility: hidden，直到用户第一次点击您的按钮，然后显示该按钮。

＆＃13;

function createUrl() {
var google = "http://www.google.com/";
var params = document.getElementById("queryid").value +  document.getElementById("cid").value;

var url = google + params

document.getElementById("result").value = url
showGotoUrl(url)
}

function showGotoUrl(url) {
  var button = document.getElementById("gotoUrl");
  button.href = url;
  button.style.visibility = "visible";
}

＆＃13;

#result {
    width:500px;
}

＆＃13;

<select id="queryid">
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>  
</select>

<br>

<select id="cid" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>

<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>


<input type="text" id="result" placeholder="placeholder" readonly><br>

<a href="#" id="gotoUrl" style="visibility: hidden;">Go to url</a>

＆＃13;

如何添加提交按钮以转到我刚刚使用javascript

3 个答案: