CODEWITHSUNDEEP
javascriptjavahtmljspmethods
Clown
Clown

Reputation: 291

How can i make use of two methods, one from Java Servlet and other from js file on Input button

Hello I have a Java Servlet "AddEmployeeServlet" which is called whenever my button is clicked, so we can say that button is the one which submits all the fields values of my form to the servlet.

However I want to use this button to implement a JavaScript method, which valids that all form fields are not empty before it submits the values to the servlet. But I dont know how to achieve this, it seems like the JS method is not being called and the empty info goes through into the servlet without any validation. Ill be grateful to any suggestion about it.

My JSP:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
 <head>
 <style><%@include file="/css/addEmployeeStyle2.css"%></style>
 <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8">
 <title> Add Employee Form</title>
 </head>
 <body>
<h1 class = "h1-title">ADD EMPLOYEE</h1>
 <hr class = "hr-line"> 
 <div class = "wrapper">
 <form class = "form" action="AddEmployeeServlet" method="post">
 <script type="text/javascript" src="js/addEmployeeScripts.js"></script>
 <input type="text" name="emp_id" placeholder = "ID"class = "input" 
 onkeypress="return isNumber(event)">
 <div id= "error" class="alert-danger" ${loginError eq 1 ? '' : 'hidden'} role="alert">
 <h4>Complete this field please</h4>
 </div>
<input type="text" name="emp_name" placeholder="Name" class="input" onkeypress="return (event.charCode > 64 && 
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
<input type="text" name="emp_email" placeholder = "Email" class = "input">
 <input type="text" name="emp_phone" placeholder ="Phone" class = "input"
  onkeypress = "return event.charCode > 47 && event.charCode < 58">
 <input class = "btn" type="submit" value="ADD" onsubmit="return voidFieldsValidator()">
 </form>
 </div>
 </body>
 <a class = "home-link" href="index.jsp"> Employee APP </a>
</html>

My JavaScript Method from JS file:

function voidFieldsValidator() {
    var flag = true;
    var formFields = [document.getElementsByName("emp_id").value, document.getElementsByName("emp_name").value,
    document.getElementsByName("emp_email").value,  document.getElementsByName("emp_phone").value]
    for(i = 0; i < formFields.length; i++) {
        if(formFields[i] === "") {
            console.log(formFiels[i].value)
            flag = false;
        }
    }
    return flag;
}

My Form:

Im really new on this kind of web projects, I dont know if my calling the servlet method is interfering with the "onclick..." property of my button. I dont think the way im calling the js method is wrong, since i already call another one from a different input (the emp_id one) and it works correctly.

Upvotes: 0

Views: 60

Answers (1)

Swati
Swati

Reputation: 28522

You need to put onsubmit inside your form tag so this will get called when you click on submit button and if flag return is true then form will submit else it will not submit .Also, as you have use getElementsByName this will return you collection of Nodelist with same name so to access any element you need to specify index i.e : 0,1.etc.

Demo Code :

function voidFieldsValidator() {
  var flag = true;
  //use [0] to get first element with that name
  var formFields = [document.getElementsByName("emp_id")[0].value, document.getElementsByName("emp_name")[0].value,
    document.getElementsByName("emp_email")[0].value, document.getElementsByName("emp_phone")[0].value
  ]
  for (i = 0; i < formFields.length; i++) {
    if (formFields[i] === "") {
      flag = false;
    }
    console.log(formFields[i])
  }
  return flag;
}
<!--add onsubmit here-->
<form class="form" action="AddEmployeeServlet" method="post" onsubmit="return voidFieldsValidator()">
  <script type="text/javascript" src="js/addEmployeeScripts.js"></script>
  <input type="text" name="emp_id" placeholder="ID" class="input" onkeypress="return isNumber(event)">
  <div id="error" class="alert-danger" ${loginError eq 1 ? '' : 'hidden'} role="alert">
    <h4>Complete this field please</h4>
  </div>
  <input type="text" name="emp_name" placeholder="Name" class="input" onkeypress="return (event.charCode > 64 && 
event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)">
  <input type="text" name="emp_email" placeholder="Email" class="input">
  <input type="text" name="emp_phone" placeholder="Phone" class="input" onkeypress="return event.charCode > 47 && event.charCode < 58">
  <input class="btn" type="submit" value="ADD">
</form>

Upvotes: 1

Related Questions