I have a requirement of designing a form within a StringBuffer.
I have a form with one text field and one delete button. the form will we submitted to the same jsp page and the value of text field is again populated in the text field.
The button Add Additional Info functionality is to add new row in the form that too is a one text field & delete button.
This is the form.
coding done for the form is as below:
buffer.append("<TR><TD class=\"formdata1\" align=\"center\" colspan=\"1\"><input name=\"_addInfo"+ rowValue +"\" type=\"text\" class=\"formdata2\"size=\"90\" maxlength=\"100\" value="+ **tempInfoValue** + " ></input>\n");
buffer.append("<input type=\"button\" class=\"button\" onClick=\"deleteLastAddInfoLine(" + formName +",'"+ rowValue + "'," +totalNumberOfRows+ ");\" value=\"Delete\" ></input></td>\n");
buffer.append(" </TR>\n");
rowValue++;
}
buffer.append(" <TR> <TD class=\"buttonrow\" class=\"formlabel\" colspan=\"6\" ><input type=\"button\" class=\"button\" onClick=\"addInfoLine(" + formName +",'"+ actionValue + "'," +totalNumberOfRows+ ");\" value=\"Add Additional Info\" ></input>\n ");
buffer.append(" </TR>\n");
buffer.append(" </table> ");
Issue is:
If input value is: abc'xyz then after clicking on Add Additional Info button the same value should be populated.
but the output value populated is: abc
'xyz -> this content is removed.
Here, this tempInfoValue is populated again.
So it can contain anything like '(singlecode/doublecode)/:/;/./ or etc.
So how should i write the code that when again it is populated then it will not change the value of text field.
Related
I have a dropdown which consists of options retrieved from a method. The user should be able to select one of these options, and press a submit button. Upon pressing the submit button, the button executes a method that takes the selected option and stores it in some other variable.
My drop-down form looks like this currenty:
sb.append("<p>"
+ "<div style='height:200px;width:500px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;'>"
+ "<form action='/Teacher' method='get'>"
+ "<input type='submit' value='Submit' action='/sendTest' method='post'>"
+ "<input type='submit' value='Reset' action='/resetCurrentTest' method='post'>"
+ "<a>Current Test for students: " + testcont.getActiveTest() + "</a>"
+ "<fieldset><p>"
+ "<label>Select test</label>"
+ "<select id = 'selection'>"
+ currentTestOptions() // input
+ "</select></p></fieldset>"
+ "</form>"
+ "</div>"
+ "</p>");
and the method the
"<input type='submit' value='Submit' action='/sendTest' method='post'>"
button should execute is:
#PostMapping("/sendTest")
#ResponseBody
public void sendTest(#RequestParam(value = "selection") HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException{
for(Test test : testcont.showAllTests()){
if(test.getName().equals("selection")){
testcont.SetActiveTest(test);
System.out.println(testcont.getActiveTest());
}
}
}
So currently, the buttons react on the click, and "refreshes" the page. However, the method is not executed, as the field which is supposed to store the "selected" value is not updated.
I basically need the correct mapping for the method to react to the button press. Any ideas? Am I going about this the wrong way?
add 'name' attribute to your select field like name=selection
and form action='/Teacher' should be sendTest not Teacher or formaction if you want to override form destination with input
I have a form with a button that will dynamically add a group of inputs of the same form.
I already managed to get it done, except for one issue.
I couldn't pass the parameters from radio input type with the same name to the servlet for everytime I add the fields. It only passed the value to servlet once. Weird thing is I could pass the text input type successfully.
Or is there any other way to pass the value from the radio button to the servlet?
Here's the code:
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addDynamicDivs").click(function () {
var newTextBoxDiv1 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv1');
newTextBoxDiv1.attr("style",'float: left;');
var newTextBoxDiv2 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv2');
newTextBoxDiv2.attr("style",'float: left;');
var newTextBoxDiv3 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv3');
newTextBoxDiv3.attr("style",'float: left;');
var newTextBoxDiv4 = $(document.createElement('div'))
.attr("id", 'TextBoxDiv4');
newTextBoxDiv4.attr("style",'float: left;');
newTextBoxDiv1.after().html('<label>Speaker Name : </label>' +
'<input type="text" name="speakername" id="speakername" value="" >');
newTextBoxDiv2.after().html('<label>Speaker Country : </label>' +
'<input type="text" name="speakercountry" id="speakercountry" value="" >');
newTextBoxDiv3.after().html('<label>Speaker Company : </label>' +
'<input type="text" name="speakercompany" id="speakercompany" value="" >');
newTextBoxDiv4.after().html('<label>ID Type: </label>' +
'<ul name="idtype class="forms-list">'+
'<li><input type="radio" name="idtype" id="idtype" value="New ID">'+
'<label for="New ID">New ID</label></li>'+
'<li><input type="radio" name="idtype" id="idtype" value="Old ID">'+
'<label for="Old ID">Old ID</label></li></ul>');
newTextBoxDiv1.appendTo("#TextBoxesGroup");
newTextBoxDiv2.appendTo("#TextBoxesGroup");
newTextBoxDiv3.appendTo("#TextBoxesGroup");
newTextBoxDiv4.appendTo("#TextBoxesGroup");
});
});
From the servlet, the parameters are retrieved by this code:
String[] speakername = request.getParameterValues("speakername");
String[] speakercountry = request.getParameterValues("speakercountry");
String[] speakercompany = request.getParameterValues("speakercompany");
String[] idtype = request.getParameterValues("idtype");
I print out the length of each String array above, and I got 2 for each of the parameters except for idtype which the length is 1.
All the dynamic params are already included inside the form.
Radio buttons will usually only send one value out of the group with the request. By design, only one radio button can be selected out of the group. If you add more radio buttons with the same name to the form, the browser should still pass only one selected value for the group when you submit the form.
If you want to have multiple of this form passed, you will be best off differentiating between the dynamically added forms (it looks like you want all the data to be sent together, so you'll need to add a unique identifier to the name of each <input> element, but otherwise having them in separate <form>s would be preferable). I would not recommend relying on the browser passing multiple <input>s with the same name in the same <form>.
I have the following dynamically generated select option list:
<select id="select-unidadeMedida" data-mini="true">
<%
/* gera select das unidades de medida dinĂ¢micamente */
Iterator<Unidadesmedida> b = ColbrDatabase.getCollectionUnidadesmedida().iterator();
while (b.hasNext()) {
Unidadesmedida unidademedida = b.next();
out.println("<option value='" + unidademedida.getCodigoToText() + "'>" + unidademedida.getCodigoToText() + "</option>");
}
%>
I'm trying to change the value of the list with Jquery, with this code:
$("#select-unidadeMedida").val("teste");
This isn't work properly, the label of the selected option isn't changing, however, if I open the list, the selected value is the correct one that I set with the .val method...
I have tried with text() method, and with a different selector, like : $("#select-unidadeMedida option:selected") , but it isn't working too,
what am I missing ?
It looks like you should call the change() function. See the example on jQuery's API documentation under the sub-heading "Get the single value from a single select and an array of values from a multiple select and display their values.":
http://api.jquery.com/val/
I have created a simple servlet in which a user will be presented with 2 questions, answering either true or false. My problem lies in retrieving the answers selected by the user.
Code:
out.println("<FORM ACTION=\"Game\" METHOD = \"POST\">" +
"<b>Question 1: Are you over the age of 25? </b><br> <br>" +
"<input type = \"radio\" name = \"Q1rad1\" onclick = \"getAnswer('a')\"> True " +
"<input type = \"radio\" name = \"Q1rad2\" onclick = \"getAnswer('b')\"> False<br>" +
"<br><br><b>Question 2: Are you from earth?</b><br> <br>" +
"<input type = \"radio\" name = \"Q2rad1\" onclick = \"getAnswer('a')\"> True " +
"<input type = \"radio\" name = \"Q2rad2\" onclick = \"getAnswer('b')\"> False<br>" +
out.println("<Center><INPUT TYPE=\"SUBMIT\"></Center>");
);
Each question has 2 radio buttons, Q1rad1 & Q2rad2, for answering True or False. How can i know the value selected by each user when the submit button is pressed.
I understand it may be more efficient when using Javascript but for the purposes of this problem I must be using servlets.
You have to define the value you want to retrieve when the radio button is selected
The value setting defines what will be submitted if checked.
The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.
<input type="radio" name="Q2" onclick="getAnswer('b')" value="b">
<input type="radio" name="Q2" onclick="getAnswer('a')" value="a">
In your Servlet which will recieve the request you'll have something like
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// get the value of the button group
String q2 = request.getParameter("Q2");
// compare selected value
if ("a".equals(q2)) {
...
}
...
}
You haven't named your radio buttons correctly. Each radio option for the same question need the same name attribute. Also, you should have a value attribute on each <input type="radio">. I'm not sure you need the onclick handler at all. You should also have a </form> closer tag. Your form might look like this:
out.println("<form action=\"Game\" method=\"POST\">" +
"<b>Question 1: Are you over the age of 25? </b><br> <br>" +
"<input type = \"radio\" name = \"Q1\" value=\"True\"> True " +
"<input type = \"radio\" name = \"Q1\" value=\"False\"> False<br>" +
"<br><br><b>Question 2: Are you from earth?</b><br> <br>" +
"<input type = \"radio\" name = \"Q2\" value=\"True\"> True " +
"<input type = \"radio\" name = \"Q2\" value=\"False\"> False<br>" +
"<Center><INPUT TYPE=\"SUBMIT\"></Center>" +
"</form>"
);
And then in the doPost() method of servlet that handles the form submission, you can access the values using request.getParameter(). Something like this:
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String q1 = request.getParameter("Q1");
String q2 = request.getParameter("Q2");
// more processing code...
}
Give the same name to the radios of the same question, and set different values.
Look at this page.
Then in the request you will get a parameter with the name of the radio group and the value selected.
After submit the servlet the receives the post can use:
String value = request.getParameter("radioName");
For your HTML Code the below lines are enough
protected void doPost(HttpServletRequest req,HttpServletResponse res){
String q1 = request.getParameter("Q1");
String q2 = request.getParameter("Q2");`
}
For example, Considering your HTML Code.
If Q1 is pressed
"TRUE"
then it would be our "Input" in Servlet.
I have two text fields (pageField1) and pageField2) in Spring MVC where an user can input in page numbers. The javascript code retrieves the values in these textfields and sends as POST data to the controller. The code for retreiving the values and sending as POST data in javascript is exactly the same for both fields.
In the Controller, I use request.getParameter("value") to retrieve the POST data.
On Firefox and Chrome, values for both pageField1 and pageField2 are retrieved fine.
On IE8, request.getParameter("value") returns null for pageField1 but the correct value for pageField2.
This is really baffling, and I am stumped. I put an alert just before Spring MVC sends the POST data to the controller. The values are exactly the same for FireFox and IE, but when retrieved on the controller, its null on IE.
Any input would be great! I can post snippet of the code if needed.
Thanks!
Will try using HTTPtea. I already downloaded it, just have to configure it now.
Thanks!! Here is my JavaScript code:
Here is the JavaScript code:
functionPageField1(event){
if (event == null || event.keyCode == 13) {
var domain = document.getElementById('domainTextField').value;
var nameToFindExcl = document.getElementById('searchObjectsExclTextField').value;
var pageNumberExcl = document.getElementById('pageNumberExclTextField').value;
var pageCountExcl = document.getElementById('pageCountExclTextField').value;
var nameToFindIncl = document.getElementById('searchObjectsInclTextField').value;
var pageNumberIncl = document.getElementById('pageNumberInclTextField').value;
if (!isValidInput(pageNumberExcl,pageNumberIncl)){
return;
}
alert("/sysmgr/domains/viewDomainObjects.spr?domain=" + domain + "&nameToFindExcl=" + nameToFindExcl +
"&pageNumberExcl=" + pageNumberExcl + "&nameToFindIncl=" + nameToFindIncl + "&pageNumberIncl=" + pageNumberIncl);
/* Its the pageNumberExcl that is null in the controller, where as all other
values are fine.
In the above alert, I see the correct value for pageNumberExcl, but its null when I retreive it in the controller.
*/
window.location="/sysmgr/domains/viewDomainObjects.spr?domain=" + domain + "&nameToFindExcl=" + nameToFindExcl +
"&pageNumberExcl=" + pageNumberExcl + "&nameToFindIncl=" + nameToFindIncl + "&pageNumberIncl=" + pageNumberIncl;
}
}
//This is the snippet of the html code that defines the pageNumberExcl Field
<td>
<p align="right">
<fmt:message key="form.any.page"/> <input type="text" id="pageNumberExclTextField"
value="${pageNumberExcl}" size="3" onKeyPress="numberPageExcl(event)">
<fmt:message key="form.any.of"/> <input disabled type="text" style="border-style:none; background-color:white; color:black"
id="pageCountExclTextField" value="${pageCountExcl}" size="3">
</p>
</td>`