Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The correct way to handle this is to escape the HTML in your JSP file, and also bind the event unobtrusively. The values from the database can be put in <code>data-*</code> attributes. For example, your HTML would be something like the following. Include this at the top of your JSP:</p> <pre><code>&lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt; </code></pre> <p>Using <code>&lt;c:out /&gt;</code> will encode special characters for correctly outputting into HTML, such as <code>'</code>, <code>"</code>, and <code>&amp;</code> (among others).</p> <p>And then change your HTML to be:</p> <pre><code>&lt;input type="button" id="btnSubmit" value="Edit" data-question-id="&lt;c:out value="${QuestionId}" /&gt;" data-question="&lt;c:out value="${Question}" /&gt;" data-question-data-type="&lt;c:out value="${QuestionDataType}" /&gt;" data-audio-path="&lt;c:out value="${AudioPath}" /&gt;" data-security-question-type="&lt;c:out value="${securityQuestionType}" /&gt;" /&gt; </code></pre> <p>And your JavaScript:</p> <pre><code>window.onload = function () { document.getElementById("btnSubmit").onclick = function () { var questionId = this.getAttribute("data-question-id"), question = this.getAttribute("data-question"), questionDataType = this.getAttribute("data-question-type"), audioPath = this.getAttribute("data-audio-path"), securityQuestionType = this.getAttribute("data-security-question-type"); editSeqQuestion(questionId, question, questionDataType, audioPath, securityQuestionType); }; }; </code></pre> <p>Of course, it is "better" to use <code>addEventListener</code>, instead of setting <code>onload</code> and <code>onclick</code>. So you might use this:</p> <pre><code>function addEvent(element, eventName, callback) { if (element.addEventListener) { element.addEventListener(eventName, callback, false); } else if (element.attachEvent) { element.attachEvent("on" + eventName, callback); } } </code></pre> <p>and then bind events like:</p> <pre><code>addEvent(window, "load", function () { addEvent(document.getElementById("btnSubmit"), "click", function () { // The code from above }); }); </code></pre> <p>Reference:</p> <ul> <li><code>addEventListener</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener</a></li> </ul>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload