Invoke a JSP page using JavaScript

Question

Invoke a JSP page using JavaScript

Hello, I'm new to web development and I have a question about calling JSP from a JavaScript file. My project consists of an html file with JavaScript (home.html) and a JSP file (login.jsp). In the home.html file, there are 2 textboxes and 2 buttons - one for login and another for reset. When the login button is clicked, I want to call a JavaScript function for textbox field validation. If either of the textboxes is empty, I want to show an alert message saying "text fields should not be empty" to the user. If both textboxes have values, then it should redirect to the login.jsp page. Thank you in advance!

javascript jsp

Answer 1

Answer №1

<script language="JavaScript">
function val(){
    var username=...
    var password=...
    if(username==" "||password==" ")
    {
    alert("Please fill in all fields");
    }
    else{
    var redirectPage = "login.jsp?param1=value1&param2=value2";
    window.location.href = redirectPage;
    }
}
    </script>

Answer 2

<script language="JavaScript">
function val(){
    var username=...
    var password=...
    if(username==" "||password==" ")
    {
    alert("Please fill in all fields");
    }
    else{
    var redirectPage = "login.jsp?param1=value1&param2=value2";
    window.location.href = redirectPage;
    }
}
    </script>

Answer 3

Answer №2

<form id="myLogin" action="checkUser.php" method="post">
<input name="username" id="userInput"> Enter Username<br>
<input name="password" id="passInput" type="password"> Enter Password
</form>
<script>
document.getElementById('myLogin').addEventListener('submit', function(e) {
if (!document.getElementById('userInput').value || !document.getElementById('passInput').value)
e.preventDefault();
}, false);
</script>

Answer 4

<form id="myLogin" action="checkUser.php" method="post">
<input name="username" id="userInput"> Enter Username<br>
<input name="password" id="passInput" type="password"> Enter Password
</form>
<script>
document.getElementById('myLogin').addEventListener('submit', function(e) {
if (!document.getElementById('userInput').value || !document.getElementById('passInput').value)
e.preventDefault();
}, false);
</script>

Answer 5

Answer №3

Consider utilizing JavaScript

fetch("login.php", {
   method: "POST",
   body: JSON.stringify({ username: "Jane", password: "12345" })
})
.then(response => response.json())
.then(data => console.log(data));

ref: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Answer 6

Consider utilizing JavaScript

fetch("login.php", {
   method: "POST",
   body: JSON.stringify({ username: "Jane", password: "12345" })
})
.then(response => response.json())
.then(data => console.log(data));

ref: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Invoke a JSP page using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

The legends on the Google chart are having trouble being displayed accurately

Display a collection of pictures from a directory on a website using JavaScript

What is the best way to utilize mapping and filtering distinct values in an array using TypeScript?

Issues with the audio on ExpressJS video streaming can be quite vexing

Is there a way to prompt WebAPI to receive a complicated object as its argument for a DELETE HTTP request without relying on C# attributes?

Using AngularJS and SpringMVC for uploading multiple files at once

What is the process to retrieve a function from a router javascript file using node.js?

Retrieve information in JSON format using AngularJS by fetching data from SQL through PHP

Cracking the code of the @ symbol within this particular context

The method JSON.stringify is not properly converting the entire object to a string

Using app.use in Express/node.js for routing causes the client to experience excessive delays

React - Refreshing a component with the help of another component

Creating a hierarchical tree structure in AngularJS by recursively traversing JSON data

Leveraging partials on their own

Dynamic Bootstrap Modal Widget

Steps for displaying a pop-up window and showcasing a JSF Response

Discover various ways to encapsulate Vue.js components

Managing the layout with React Native Flexbox to evenly distribute items

Utilizing the .data() method for establishing a variable

What is the process for dynamically looping through a table and adding form data to the table?