HTML text box and button that redirects user to a page of same name not working when <form> is added

Question

Below is a code that redirects people to a page of the same name. For example, if I type in the word 'chocolate' and click 'Submit', the user should be redirected to a page of the same name called 'chocolate.html', etc.

This code only works when the <form> parameter tag is removed, and if removed involves manually clicking the [Submit] button to be redirected to the .html page of the same name (rather than redirecting when pressing [Enter] or [Return] key on the keyboard).

This code does not work when I add the <form> parameter tag; it only works if removed. I've been meddling with this for hours to get it to work with the <form> tag. Any ideas?

This is the code:

Note: If you remove the form tag, it works, but only when you click the 'Submit' button manually.

This is what I got so far, I now only need the button to automatically click when the person presses the Enter key on their keyboard. :)

---

UPDATE: Firstly, thank you so kindly for your help so far.

UPDATE: The code now successfully redirects to a .html page of the same name, but the user needs to manually clicks the [Submit] button to accomplish this. From here, I am simply needing to find a way of having the [Enter] button automatically be selected/clicked whenever the user presses [Enter] on their keyboard. :)

<input id="test" type="text" autofocus>
<button type="button" onclick="redirect()">Submit</button>

<script>
function redirect()
{
    var url=document.getElementById('test').value
    window.location = url+".html"
}
</script>

Answer 1

Add a type attribute to your button like so:

<button type="button" onclick="redirect()">Submit</button>

By default, if not set, the type of a button is assumed to be submit and will therefore submit your form to the action provided in the form's action attribute. Setting the type attribute to button prevents this default behaviour.

Seeing that you have no action attribute specified in your form, the current page is assumed as the action to redirect to so the form essentially reloads the current page.

Answer 2

This is something new. Anyway the thing is when you are keeping the form tag there it is with no action attribute keeping you in the same page. When form tag is there you can not hit the script for the redirect.

When you are removing the form tag it is hitting the JS and activating the code. Seeing the form tag I am assuming that you are trying to send some data.

It is advised that you use jquery and ajax to manipulate these data. Or you can discuss more.

Answer 3

Add this after your function:

var test_keydown = document.getElementById("test");
test_keydown.addEventListener("keydown", function (e) {
    if (e.code === "Enter") {  //checks whether the pressed key is "Enter"
        redirect();
    }
});

Answer 4

I got your problem, basically, you want to trigger redirect function when the user clicks submit button or if the user presses the ENTER key on the keyboard.
You can do this 2 ways -

1. If you want the user to redirect when he press enter key anywhere on the page, then you need to add keyup event on the document object, see below code - It will trigger redirect function when the user clicks the ENTER key on the keyboard.

<input id="test" type="text" autofocus>
<button type="button" onclick="redirect()">Submit</button>

<script>
function redirect()
{
    var url=document.getElementById('test').value
    window.location = url+".html"
}

document.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) { //13 is enter keycode
   event.preventDefault();
   redirect();
  }
});

</script>

2. Another way is to add keyup event on the input itself and then call the redirect function. This is when you don't want to trigger redirect on the whole document, but only when the user is done typing in input and then presses ENTER.

<input id="test" type="text" autofocus onkeyup="handleKeyUp(event)">
<button type="button" onclick="redirect()">Submit</button>

<script>
function redirect()
{
    var url=document.getElementById('test').value
    window.location = url+".html"
}

function handleKeyUp(event) {
  if (event.keyCode === 13) { //13 is enter keycode
   redirect();
  }
}

</script>

Answer 5

If you want to do this in form tags handle the on submit event instead. This will also handle the enter keypress at the same time as that is the default behavior in a form.

//Add the evnent listener unobtrusivly
document.getElementById("redirector").addEventListener("submit", function(event) {
  //Stops the form submitting (its' default action)
  event.preventDefault();
  //Get the location
  var redirectTo = document.getElementById('test').value + ".html"
  //bit of debugging
  console.log("Redirecting to: " + redirectTo)
  //redirect
  window.location.href = redirectTo;
})

<form id="redirector">
  <input id="test" type="text" autofocus>
  <!-- Note this will now submit -->
  <button>Submit</button>
</form>

Answer 6

You should use

document.addEventListener('keyup',function(e) {submitButton.click()})// submitButton is `document.getElementById('<idOfsubmitButton>')`