Redirect to another page with Multiple parameters using jQuery

I have previously shared an article showing how to redirect to another page using multiple parameters using JavaScript. Now here in this article, I am going to show you how to redirect using jQuery with multiple parameters.

You can use the window.location.href property in jQuery to redirect. In-fact, the same property is used in JavaScript.

The procedure to redirect page with multiple parameters is quite similar in both JS and jQuery.

Here's the example.

The parameters for the URL is extracted from a two textboxes. You can hardcode the values. Once the values are extracted, it will redirect to another page with multiple parameters.

To insert multiple parameters to the URL, you’ll have to define parameters with values using the ? (Question mark) and & (ampersand) symbols before redirecting.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
<style>
  * { font-family: calibri }
  input, p { font-size: 18px; }
  input { padding: 3px 5px; border-radius: 5px; border:solid 1px #999; }
</style>
</head>

<body>
  <p><input type='text' id='book' value='001' placeholder='enter book id' /></p>
  <p><input type='text' id='b_name' value='jQuery' placeholder='enter book name' /></p>
  <p><input type='button' id='bt' value='Click to redirect!' style='cursor:pointer;' /></p>
</body>
<script>
  $(document).ready(function () {
    $('#bt').click(function () {
      const url = "https://www.encodedna.com/javascript/demo/check-if-url-contains-a-given-string-using-javascript.htm?book=" + 
            $('#book').val() + "&name=" + $('#b_name').val();
      window.location.href = url;   // open url with parameter.
    });
  });
</script>
</html>

Try it.

Click the button below to redirect to another page. See the URL after the page redirects.

Book id:

Book Name:

← Previous

How to redirect to another page with Multiple parameters using jQuery