Redirect to a webpage after giving a code

Question

I need to redirect to a link only if the code entered is correct. So the concept is the person inputs a code like 1234 and goes to a.com, but if someone doesnt write that code, they dont go anywhere

I have tried the code below but nothing worked. I change the web names to a.com as the target and b.com as the site redirecting to a.com

<body>
<input type="text" placeholder="Enter Your Code" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Your Code'" maxlength="10" id="input-code">
<p><a href="#" class="btn" onclick="return btntest_onclick()">VERIFY  NOW</a></p>

<script>
if (document.getElementById('input-code').value == '1234'){
    function btntest_onclick(){
        window.location.href = "a.com";
    }
    btntest_onclick()
}else{
    function btntest_onclick(){
        window.location.href = "b.com";
    }
    btntest_onclick()
}

I expect to go to a.com upon giving the code 1234, but it does not happen

You need to add onchange=function() to the input element, and move the script code into a function. Note that anyone can "view source" to figure out the secret code. — Dave S, Sep 13 '19 at 18:33
The JS you posted runs when the page loads only. If you need it to run after something has been input, then you need to setup an event handler tied to the input. — j08691, Sep 13 '19 at 18:33
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick — zod, Sep 13 '19 at 18:36
Does this code has anything to do with security? If so then it is a bad idea to check it client side. — A1rPun, Sep 13 '19 at 18:36

A1rPun · Answer 1 · 2019-09-13T18:51:29.347

You can do something like this:

HTML

<a href="#" class="btn" onclick="btntest_onclick()"></a>

Move your if statement inside the function

JavaScript

function btntest_onclick(){
    if (document.getElementById('input-code').value == '1234'){
        window.location.href = "a.com";
    } else {
        window.location.href = "b.com";
    }
}

But like I said in the comments, usually you don't check something like this client side because it is easily tampered with.

And you could easily achieve a better solution by setting the href when the user inputs the correct code.

score 0 · Answer 2 · answered Sep 13 '19 at 18:43

I would suggest this approach, which avoids using the inline onclick attribute and uses the more semantic <button> element instead of a link.

const buttonEl = document.querySelector('.btn');
const inputEl = document.querySelector('#input-code');

buttonEl.addEventListener("click", evt => {
  if (inputEl.value == '1234') {
    window.location.href = 'http://a.com';
  }
});

<input id="input-code" type="text" placeholder="Enter Your Code" maxlength="10">
<p><button class="btn">Verify Now</button></p>

For more info regarding why we try to avoid using onclick see Why is using onClick() in HTML a bad practice?.

As others have mentioned, this is not a secure way of validating a form and can easily be bypassed by a savvy user. You should use server-side validation if security is a concern for your particular use case.

Redirect to a webpage after giving a code

2 Answers2