在JSP中嵌入JavaScript代碼不會調用JS函數

Question

給出以下代碼：

<%@ 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>

我正在嘗試調用JS函數verifyEmptyString() ，但JSP不會調用該函數。

知道代碼有什么問題嗎？

Answer 1

正在調用該函數（我添加了一個警告來驗證）。 但是你想在onclick事件中返回函數的值：

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

Answer 2

嘗試這樣的事情： 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")
    }         
});

Answer 3

這是解決方案：

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

對於將來可能遇到此問題的任何人，您需要更改onsubmit ...

由此：

onsubmit="verifyEmptyString()"

對此：

onsubmit="return verifyEmptyString(this)"

Answer 4

我不太明白為什么我們需要將this作為參數傳遞給函數，因為在實際的函數定義function verifyEmptyString()不接受它。 您直接引用函數內的表單元素。

另一方面，如果您的代碼類似於以下場景，

<!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>

在這種情況下，我們正在使用傳遞的參數this 。 它引用當前上下文，在我們的例子中，它是名稱為myForm的form

但在您的原始場景中，您通過調用document.forms["loginForm"]["username"].value直接引用javascript函數內的表單。

在JSP中嵌入JavaScript代碼不會調用JS函數

問題描述

4 個解決方案

解決方案1
1 已采納 2014-01-29 21:09:12

解決方案2
1 2014-01-29 21:39:30

解決方案3
0 2014-01-29 21:35:06

解決方案4
0 2014-01-29 22:33:02

在JSP中嵌入JavaScript代碼不會調用JS函數

問題描述

4 個解決方案

解決方案1 1 已采納 2014-01-29 21:09:12

解決方案2 1 2014-01-29 21:39:30

解決方案3 0 2014-01-29 21:35:06

解決方案4 0 2014-01-29 22:33:02

解決方案1
1 已采納 2014-01-29 21:09:12

解決方案2
1 2014-01-29 21:39:30

解決方案3
0 2014-01-29 21:35:06

解決方案4
0 2014-01-29 22:33:02