Linking to another html document when a button is clicked

Question

Am trying to redirect to another html document when a button is clicked. This is my js code:

$('#getTextBoxValue').on("click", function(){
var value = $("#textbox1").val();
});

$('#getTextBoxValue').click(function() {
    window.location.href = 'view.html';
    return false;
});

And this is my html code:

<form class="col-lg-12">
            <div class="input-group" style="width:500px;text-align:center;margin:0 auto;">
            <input class="form-control input-lg" placeholder="Enter single quote-surrounded link" type="textbox" id="textbox1"></input>
              <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit" id= "getTextBoxValue">Submit</button></span>
            </div>
          </form>
    <script src="js/script.js"></script>
    <script src="js/viewer.js"></script>

Nothing happens when I click the button though, is there a better way to do this?

You have two `$$` in front of the function.. is that throwing an error? — tymeJV, Aug 07 '14 at 19:54
LOL at the comments so far... Maybe just add an action to the form? Are you trying to pass the contents of the input to the next page as well? If so, just set the form attribute action='view.html'... And change the button to input; type is already submit. — , Aug 07 '14 at 19:55
@PaulRoub whoops am very used to writing in latex and sometimes use \ instead of / for that reason. — user3089079, Aug 07 '14 at 19:57
@mark.hch yes trying to pass the content of the input to the next page (the idea is to have the user enter a link and then open the paper using pdf.js) — user3089079, Aug 07 '14 at 20:00

arielnmz · Answer 1 · 2014-08-07T20:11:06.137

An alternative that doesn't need jQuery, only vanilla javascript:

    <script type="text/javascript>
        function goToPage() {
            document.location = 'view.html';
        }
        Button.addEventListener('click', goToPage);
    </script>
    …
    <button id="Button">Go</button>

You create your button element and give it a unique id attribute (it can be any element).
Then you add a click EventListener to it, that executes the specified function goToPage.
The goToPage function changes the document's location to navigate to it.

And one that doesn't even need javascript:

    <form action="view.html">
        <input type="submit" value="Go"/>
    </form>

You only create an input element of type submit.
Then you just put it into a form element with your document's URL as the action.

The advantages of the first approach is that you can make almost any element you want clickable, there are only a few exceptions. The advantage of the second one is that you only use pure HTML.

score 0 · Answer 2 · edited May 23 '17 at 10:28

Try this html:

<input type='button' id='unique_identifier'>

And this little javascript snippet (using jQuery):

// similar behavior as an HTTP redirect
$('#unique_identifier').on('click', function () {
  window.location.replace('view.html');
});

// similar behavior as clicking on a link
$('#unique_identifier').on('click', function () {
  window.location.href = 'view.html';
});

Thanks to Ryan McGeary

score 0 · Accepted Answer · answered Aug 07 '14 at 19:56

You don't need any javascript to do this just set your action of your form as below:

<form class="col-lg-12" action="view.html">
            <div class="input-group" style="width:500px;text-align:center;margin:0 auto;">
            <input class="form-control input-lg" placeholder="Enter single quote-surrounded link" type="textbox" id="textbox1"></input>
              <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit" id= "getTextBoxValue">Submit</button></span>
            </div>
          </form>
<script src="js/script.js"><\script>
<script src="js/viewer.js"><\script>
</form>

Linking to another html document when a button is clicked

3 Answers3