Guide individuals towards two distinct web addresses depending on the information provided

Question

Guide individuals towards two distinct web addresses depending on the information provided

I am currently working on a website for my upcoming wedding, which consists of 2 separate events with different sets of information regarding when and where they will take place. I would like to create a system where users can input some kind of prompt, such as a password, and depending on their response, be directed to the appropriate event page. For example, if they click "guest information," they will be prompted to enter a password and based on that either be redirected to site.com/page1 or site.com/page2.

While I have some knowledge in front-end technologies like JavaScript and jQuery, I'm not well-versed in server-side scripts. Is there an easy way to achieve this functionality without too much involvement of complex back-end development? Any help or suggestions would be greatly appreciated! Thank you!

javascript jquery html css

Answer 1

Answer №1

When it comes to web development best practices, it is highly recommended not to expose passwords on the client side. However, for websites with a private nature, this might be acceptable. It's important to note that the following code snippet does not utilize jQuery, but could easily incorporate it.

Below is an example of how you can achieve the desired functionality (although it has not been tested):

<html>
  <body>
    <form>
      <input id="passwordForNextPage" type="password">
      <button onclick="checkDestination();">Submit</button>
    </form>
    <script>
        function checkDestination() {
          if (document.getElementById("passwordForNextPage") == "password1") {
            window.location.href = "/nextpage1.html";
          } else if (document.getElementById("passwordForNextPage") == "password2") {
            window.location.href = "/nextpage2.html";
          } else {
            alert("Please retype the password!");
          }
    </script>
   </body>
 </html>

Answer 2

When it comes to web development best practices, it is highly recommended not to expose passwords on the client side. However, for websites with a private nature, this might be acceptable. It's important to note that the following code snippet does not utilize jQuery, but could easily incorporate it.

Below is an example of how you can achieve the desired functionality (although it has not been tested):

<html>
  <body>
    <form>
      <input id="passwordForNextPage" type="password">
      <button onclick="checkDestination();">Submit</button>
    </form>
    <script>
        function checkDestination() {
          if (document.getElementById("passwordForNextPage") == "password1") {
            window.location.href = "/nextpage1.html";
          } else if (document.getElementById("passwordForNextPage") == "password2") {
            window.location.href = "/nextpage2.html";
          } else {
            alert("Please retype the password!");
          }
    </script>
   </body>
 </html>

Answer 3

Answer №2

Create a new form that includes an input box. Once the form is submitted, validate the value entered in the field and set it as the destination for window.location.href.

Answer 4

Create a new form that includes an input box. Once the form is submitted, validate the value entered in the field and set it as the destination for window.location.href.

Answer 5

Answer №3

While this method may not provide the highest level of security, it should suffice for your needs. You can implement the following code to create a simple password authentication system:

HTML:

Enter Password: <input type="password" id="pwd">
<input type="submit" id="submit" value="Submit">

JavaScript:

$('#submit').on('click', function(e) {
    e.preventDefault();
    var password = $('#pwd').val();
    if (password == 'pass1') {
        window.location.href = "http://www.google.com";
    } else if (password == 'pass2') {
        window.location.href = "http://www.bing.com";
    }
})

Answer 6

While this method may not provide the highest level of security, it should suffice for your needs. You can implement the following code to create a simple password authentication system:

HTML:

Enter Password: <input type="password" id="pwd">
<input type="submit" id="submit" value="Submit">

JavaScript:

$('#submit').on('click', function(e) {
    e.preventDefault();
    var password = $('#pwd').val();
    if (password == 'pass1') {
        window.location.href = "http://www.google.com";
    } else if (password == 'pass2') {
        window.location.href = "http://www.bing.com";
    }
})

Answer 7

Answer №4

If you want to open a link in a new window, you can utilize the window.location.href property along with the window.open() method.

For example, you can use window.open(''); // This code snippet will launch the provided link in a new browser window.

Answer 8

If you want to open a link in a new window, you can utilize the window.location.href property along with the window.open() method.

For example, you can use window.open(''); // This code snippet will launch the provided link in a new browser window.

Guide individuals towards two distinct web addresses depending on the information provided

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Verifying the presence of a value among various documents and retrieving the document containing it

Show the button only if the checkbox is selected

Utilizing a function to populate an attribute using .attr() in d3

Filter WordPress posts using Ajax on a specific page

Location of the search bar

The directive stops functioning properly following the minification process

Media queries do not trigger the execution of CSS code

"Sorry, the getJSON function did not return any

How can I customize index.html to display specific elements for different users?

Encountered an unhandled exception: Unable to identify a GraphQL output type for the "anticipatedInvestmentSupportInfo"

JavaScript Event Listener not Working Properly

Perform calculations using the provided input values or null values in Javascript/Jquery

seize the cursor on chrome for windows

Altering the content of a span within a list item using AngularJS

Ensure that any portion of a child DIV becomes visible only if it falls within the confines of the parent DIV, even if the overflow:hidden property is

Optimal viewing experience with organized sections in full-screen layouts

Is it recommended to apply a FLOAT attribute to DIV elements with a width of 100%?

Removing a modal div element in React after navigating

What is the best way to retrieve a JSON-formatted array through an AJAX call?

Your program has encountered a crash and is currently on standby for any file modifications