javascript go to URL from input on button press or return key

Question

I have a page with an input field where I'd like to send the user to the URL they enter in the input, with -.html appended at the end. My HTML is as follows:

<form name="codeform"> 
<input type="text" id="code" name="code" autofocus>
</form>

<a href="#" class="button" id="submit">SUBMIT</a>

And my javascript:

$('#submit').click(function () { location.href = window.document.codeform.code.value + '.html'; });

When the user clicks the button, the script works as intended and the user goes to the page. But I'd also like the script to execute when the return key is pressed. Right now, when the return key is pressed, it tries to submit the form and I end up with a query string.

What is the best way to send the user to the page whether the button or return key is pressed?

Instead of having $('$submit').click(....), add the 'action' attribute to the form. — Riya
– Riya, Commented Jan 25, 2017 at 3:23
Thanks Riya! Seems obvious now but I couldn't figure it out for the life of me! — deanboysupreme
– deanboysupreme, Commented Jan 25, 2017 at 3:39
why u don't use submit button inside the form? w3schools.com/html/html_forms.asp — eapo
– eapo, Commented Jan 25, 2017 at 3:42

eapo · Accepted Answer · 2017-01-25 03:49:31Z

2

Because your a.button is outside from the form, you need to add trigger to the form and the a.button too. Then just detect the Enter keycode, and done.

$('form').submit(function(e) {
  e.preventDefault();
  console.log(window.document.codeform.code.value + '.html')
});
$('form').keydown(function(e) {
  if (e.which == 13) {
    console.log(window.document.codeform.code.value + '.html')
  }
});
$('#submit.button').click(function() {
  console.log(window.document.codeform.code.value + '.html')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form name="codeform" id="codeform"> 
    <input type="text" id="code" name="code" autofocus>
</form>

<a href="#" class="button" id="submit">SUBMIT</a>

answered Jan 25, 2017 at 3:49

eapo

1,0911 gold badge19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

C L K Kissane · Accepted Answer · 2017-01-25 03:43:28Z

0

You can add a keydown listener that only runs on enter (keycode 13), and then prevents the default form submission action:

$('#submit').click(function () { location.href = window.document.codeform.code.value + '.html'; });
$('#code').keydown(function (event) {
    if(event.which==13){
        event.preventDefault();//prevents form submission
        location.href = window.document.codeform.code.value + '.html';
    }
});

answered Jan 25, 2017 at 3:43

C L K Kissane

341 silver badge5 bronze badges

Comments

ClintFoo · Accepted Answer · 2017-01-25 03:55:59Z

0

Since you have the logic attached to the button click() event, you can simply attach a keypress() event to the input box to subsequently execute the button click.

$("#code").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        $('#submit').click();       
    }
});

However, for tidiness I usually prefer to move the logic from the click event into a separate function and call that one function from both the click() and keypress() events.

answered Jan 25, 2017 at 3:55

ClintFoo

412 bronze badges

Collectives™ on Stack Overflow

javascript go to URL from input on button press or return key

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related