Noob at javascript etc. here. I’m a php/core Java programmer tasked with maintaining a bunch of JS code in JSPs using Struts. What I need to do is simple, but I can’t figure out an easy solution. Given the following code excerpt for a struts’ed HTML form and a JS submit function, I need to modify the text field “query”’s data after the “Submit” button is pressed, but before the data is submitted (tacked on to the page URI). When “submit” is pressed, the page reloads with ?search=whatever_was_typed_in_the_text_box appended to the URL. I need to modify that value: for example, a simple character-replace function: if the user types “apple”, a function replacing all “a” characters with “b” would do the trick, so that when “submit” is pressed with “apple” in the text field, the page redirects to (original-URL)?search=bpple.
I can write the text processing function myself, (I know enough JS for that at least), but I don’t know how to get the input out of the form and modify it after the button is clicked, but before submission. I’ve tried adding “document.forms[SEARCH_FORM_NAME].query.value = replaceChars(document.forms[SEARCH_FORM_NAME].query.value)” to the JS “submitSearch” method, before the actual submission line (with replaceChars as a handwritten simple character-replace method), but it hasn’t changed the data submitted into the URL. I’ve also tried document.getElementById(‘query’).value=..., with the same result.
How would I modify the data from the text field in the form below after the submit button is clicked, but before the form is submitted to the URL?
Code Excerpt:
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<head>
<script type="text/javascript" defer="defer">
var SEARCH_FORM_NAME = "searchForm";
function submitSearch() {
$("sort").value = "filePath";
$("dir").value = "asc";
document.forms[SEARCH_FORM_NAME].submit();
return false;
}
</script>
</head>
<html:form styleId="searchForm" action="/search" method="get" onsubmit="return submitSearch();">
<table width="100%">
<tr>
<td style="width:10%;"><tiles:insert page="/WEB-INF/tiles/logo.jsp" /></td>
<td class = "search-cell" style="width:10%; white-space:nowrap;">
<html:text property="query" styleId="query" size="50"/>
<html:submit onclick="return submitSearch();">
Search
</html:submit>
</td>
</tr>
</table>