How to link a page using submit button?

<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
This is the sample code from bootstrap, how can I add a link in this button while keep the data validation?

Link to another html file after clicked.

  • 2

    Can you show the form the button is in? What is the current action of the form/button

    – 

  • Please add your form complete code sample

    – 

To add a link to a submit button in HTML while maintaining data validation, you can use JavaScript or jQuery to achieve the desired functionality. Here are a few options you can consider:

  1. Using JavaScript:

    • Add an onclick event handler to the button and use window.location.href to redirect to the desired HTML file.
    • Example code:
      <button class="w-100 btn btn-lg btn-primary" type="submit" onclick="window.location.href="https://stackoverflow.com/questions/77590681/path/to/your/file.html"">Sign in</button>
      
  2. Using jQuery:

    • Attach a click event handler to the button using jQuery and use window.location.href to redirect to the desired HTML file.
    • Example code:
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script>
        $(document).ready(function() {
          $('.btn-primary').click(function() {
            window.location.href="https://stackoverflow.com/questions/77590681/path/to/your/file.html";
          });
        });
      </script>
      <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
      

Please note that these solutions will redirect the user to another HTML file upon clicking the button. However, it’s important to mention that using a submit button for navigation purposes may not be semantically correct according to HTML standards. The purpose of a form is typically to collect and submit user data, whereas using a submit button for navigation goes against this convention.

If you want to maintain data validation while navigating to another page, you may need to handle the validation logic separately. You can use JavaScript or jQuery to validate the form fields before redirecting the user to another page.

Remember to replace "https://stackoverflow.com/questions/77590681/path/to/your/file.html" with the actual path of the HTML file you want to link to.

I hope this helps!

Leave a Comment