Embedding JavaScript code in JSP won't call the JS function

Question

Given the following code :

<%@ page language="java" 
    contentType="text/html; charset=windows-1256"
    pageEncoding="windows-1256"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>Bank application</title>
<link rel="stylesheet"
      href="./css/styles.css"
      type="text/css"/>
</head>

<body>
<table class="title">
  <tr><th>Web Bank application</th></tr>
</table>
<br/>


<script>

function verifyEmptyString()
{
  var username = document.forms["loginForm"]["username"].value;
  var password = document.forms["loginForm"]["password"].value;

  return !(username == null || username == "" || password == null || password == "");
}     
</script>


<fieldset>
  <legend>Login Page - please enter your Username and Password</legend>

  <form id="loginForm" action="loginPage" onsubmit="verifyEmptyString()" > 

    <p style="font-size:15px">  <span style="color:red;font-weight:bold;">*</span> Username: <input type="text" name="username"><br> </p>
    <p style="font-size:15px"><span style="color:red;font-weight:bold;">*</span>  Password : <input type="password" name="password"><br> </p>
    <input type="submit" value="Login">
  </form>
</fieldset>

<br/>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/>

</body></html>

I'm trying to call the JS function verifyEmptyString() , but the JSP doesn't call the function.

Any idea what's wrong with the code ?

Javasript is a client side component. JSP is a server side component. The JSP obviously won't invoke it. You'll need to submit the form for it to get invoked. Is that what you are doing? — Sotirios Delimanolis
– Sotirios Delimanolis, Commented Jan 29, 2014 at 21:06
@Sotirios Delimanolis: No . I don't want to submit the before making sure that the user didn't leave any blank fields ... in other words I want to make the user to enter something ,anything , but not an empty string . — JAN
– JAN, Commented Jan 29, 2014 at 21:07
That's what onsubmit is. You clickyour submit button. This generates an event which calls the verifyEmptyString(). If it returns true, the form submission happens. If the method returns false, submission doesn't happen. — Sotirios Delimanolis
– Sotirios Delimanolis, Commented Jan 29, 2014 at 21:08
@Sotirios Delimanolis: But it doesn't work ! The form is being forwarded anyway ,even when I submit a blank string ,it forwards me to another JSP . — JAN
– JAN, Commented Jan 29, 2014 at 21:09
What append if you add an alert() in the verifyEmptyString() function — Merlin
– Merlin, Commented Jan 29, 2014 at 21:16

JAN · Accepted Answer · 2014-01-29 21:41:36Z

1

The function is being called (I added an alert to verify). But you want to return the value of the function in the onclick event:

<form id="loginForm" action="loginPage" onsubmit="return verifyEmptyString(this)" >

edited Jan 29, 2014 at 21:41

JAN

22k68 gold badges191 silver badges341 bronze badges

answered Jan 29, 2014 at 21:09

Matt Jennings

1,1486 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sotirios Delimanolis Over a year ago

@ron Try it here. Check the value of the expression before you return it.

JAN Over a year ago

@Matt Jennings: Now it's working ... notice the this I changed in your post .

Merlin · Accepted Answer · 2014-01-29 21:39:30Z

1

Try something like this : http://jsfiddle.net/daguru/RBYnc/1/

var myForm = document.getElementById('loginForm');

myForm.addEventListener("submit", function(ev) {
    ev.preventDefault(); // to stop the form from submitting
    var username = document.forms["loginForm"]["username"].value;
    var password = document.forms["loginForm"]["password"].value;

    if(!(username == null || username == "" || password == null || password == "")){
        this.submit(); // If all the validations succeeded
        alert("submiting")
    }         
});

answered Jan 29, 2014 at 21:39

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Comments

JAN · Accepted Answer · 2014-01-29 21:35:06Z

0

Here is the solution :

<form onsubmit="return verifyEmptyString(this)" id="loginForm" action="loginPage"  >

For anyone who might encounter this problem in the future , you need to change the onsubmit ...

From this :

onsubmit="verifyEmptyString()"

To this :

onsubmit="return verifyEmptyString(this)"

answered Jan 29, 2014 at 21:35

JAN

22k68 gold badges191 silver badges341 bronze badges

Comments

spiderman · Accepted Answer · 2014-02-01 19:58:07Z

I do not quite understand why we need to pass thisas a parameter to the function, because it is not accepted in the actual function definition function verifyEmptyString() . You are directly referring the form elements inside the function.

On the otherhand, if your code is similar to the below scenario,

<!DOCTYPE html>
<html>
<head>
<script>
    function validateForm(obj) {
        var x = obj["firstname"].value;
        alert(x);
        if (x == null || x == "") {
            alert("First name must be filled out");
            return false;
        }
    }
</script>
</head>

<body>
    <form name="myForm" action="action.jsp"
        onsubmit="return validateForm(this)" method="post">
        First name: <input type="text" name="firstname"> <input
            type="submit" value="Submit">
    </form>
</body>

</html>

In this scenario, we are making use of the passed parameter this. It refers to the current context, In our case, it is the form whose name is myForm

But in your original scenario, you are directly referring the form inside the javascript function by calling document.forms["loginForm"]["username"].value.

Collectives™ on Stack Overflow

Embedding JavaScript code in JSP won't call the JS function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related