JavaScript - JSP - 如何正确地将函数附加到现有表单中的按钮？答案

【问题标题】：JavaScript - JSP - How correctly attach a function to a button in an existing form?JavaScript - JSP - 如何正确地将函数附加到现有表单中的按钮？
【发布时间】：2012-06-28 09:32:59
【问题描述】：

我正在编写几个 JSP 页面，我需要将一个函数附加到现有表单中的按钮。在此表单中，提交按钮执行到另一个 jsp 视图的导航（我在 Google AppEngine 上使用带有 Slim3 框架的 MVC 模式），并且我需要另一个按钮（在提交按钮旁边）执行到另一个不同 JSP 视图的导航.因此，为了实现这一点，我在现有表单中创建了另一个“按钮”类型的按钮，创建了一个 .js 文件，在其中放置我的 JavaScript 代码以执行“替代”导航，并将 .js 包含在 JSP 视图中。但是，它不起作用._。代码如下：

包含表单的JSP页面：

...
<body>
    <%@ include file="script.js" %>
    <%@ include file="../header.jsp" %>
    <%@ include file="sidebar.jsp" %> 

    <div id="content">
        <div id="main">
            <p>Hello main admin testimonials edit Index !!!</p>
            <h2><b>Modifica Testimonial</b></h2>
            <form action="update" method="post">
                <h3>Nome: </h3>
                <textarea name="name">${f:h(testimonial.name)}</textarea><br />
                <h3>Cognome: </h3>
                <textarea name="surname">${f:h(testimonial.surname)}</textarea><br />
                <h3>Dettagli: </h3>
                <textarea name="details">${f:h(testimonial.details)}</textarea><br />
                <h3>Progetto:</h3>
                <select name="projectKey" selected="${f:h(testimonial.projectRef.key)}">
                    <c:forEach items="${projectsList}" var="project">
                        <option value="${f:h(project.key)}">${f:h(project.name)}</option>
                    </c:forEach>
                </select>
                <br />
                <input type="submit" value="Aggiorna"/>
                <input type="button" value="Elimina" onclick="delete()"/>
                <input type="hidden" ${f:hidden("key")}/>
            </form>
        </div>
    </div>
</body>
</html>

script.js:

<script type="text/javascript"> 
        function delete()
        {
            if (confirm('Ask navigation confirm'))
            {
                window.navigate("bla bla new view url");
            }
            else
            {
                return;
            }
        }
</script>

编辑：我更改了函数的名称，替换为原始代码中的真实名称。

【问题讨论】：

如何不起作用。会发生什么？
我点击按钮并没有出现确认对话框，没有任何反应！
页面源是否包含您的 JavaScript 代码？错误控制台是否指示任何错误？如果您使用 Firbug 或 Chrome 开发者工具来调试您的 JavaScript 代码会发生什么？
如果我理解您的问题，JavaScript 代码位于“script.js”文件中。这是我的第一个 JS 代码，我如何找到错误控制台（我使用的是 Firefox）？第三个问题也一样，第一次听到 Firebug 等。xD
在页面中右击并选择“页面的源代码”（或类似的，我使用的是法语 Firefox），查看生成的 HTML 是否符合您的要求。选择“工具 - Web 开发人员 - 错误控制台”以获取错误控制台。安装 Firebug 并查看getfirebug.com/wiki/index.php/Script_Panel 了解如何使用脚本面板。

标签： javascript model-view-controller google-app-engine jsp button

【解决方案1】：

好的，效果很好，把 script.js 中的代码放在 page 中。现在，它工作正常！我更改了函数名称，从“delete()”传递到“fdelete()”，似乎“delete”名称会产生问题，我在想是因为我试图直接在页面中编写 JavaScript（一个非常简单警报）并从按钮调用它，使用“delete（）”函数名称脚本没有运行！我不明白为什么，但就是这样。

编辑：经过多年的网络开发，我再次进入了这个问题。当然一个名为“delete”的函数不能工作，因为“delete”是一个JavaScript保留字！

JavaScript 大神，请原谅我的罪过，我年少无知 :(

【讨论】：