CODEWITHSUNDEEP
javascripthtmlforms
Francisco
Francisco

Reputation: 183

How do I add a submit button to go to the url I just created with javascript

I created a form Following an example here

The form creates the URL as expected and I want to add a submit button at the end in order to click and go to the new URL I just created with the form. Sorry if dumb question but im newbie and confused... Thanks!

DEMO: http://jsfiddle.net/g6U4a/1/

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;
}

Upvotes: 0

Views: 112

Answers (3)

Pandelis
Pandelis

Reputation: 1968

You're already half way there.

If you put an extra step in your Js to just store the url and the parameters, you can then send that to a new function to show a link that the user can navigate to.

You can optionally style this link to look just like a button if you wish.

I've started the link as visibility: hidden until the user clicks your button the first time which will then show it.

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";
}
#result {
    width:500px;
}
<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>

Upvotes: 0

Marco Salerno
Marco Salerno

Reputation: 5203

Here we go (try it in the jsfiddle, stackoverflow will block the new window):

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

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);
}
#result {
    width:500px;
}
<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>

Upvotes: 1

Lennholm
Lennholm

Reputation: 7470

Simplest answer:

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

A bit more well-organized:

HTML

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

Javascript:

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

If you want to open a new window with the page, simply use window.open(document.getElementById("result").value) instead of location.href = ...

Upvotes: 1

Related Questions