Here is the situation. I have a drop down menu. The option sin this drop down menu are being populated by fetching some values from the database. To do this following is what i have done.. :-
<select name="product_list" onchange="selectProduct(this.value)">
<option value="none">Select one</option>
<%
List<String> options = new ArrayList<String>();
DynamicCombo comboBox = new DynamicCombo();
options = comboBox.generateComboBox();
Collections.sort(options);
int tempVar = 0;
while (tempVar < options.size()) {
out.print("<option value=\"");
out.print(options.get(tempVar));
out.print("\">");
out.print(options.get(tempVar));
out.print("</option>");
tempVar++;
}
%>
</select>
DynamicCombo is a class that has a method called 'generateComboBox()'. This method simply returns an array list containing all the values that are fetched from the database, which is what i need to show in my drop down box in the front end (jsp page). On my jsp page i simply iterate through this list and print it as options appropriately.
This works absolutely fine.
Now i have another text box on my form, say 'textbox1'. Now the requirement is that this text box value should be updated depending on what the user has selected from the above drop down box.
So for example if the user selects 'prod1'(which is a primary key in the backend database table) option from the drop down box, then the corresponding value ( the product name) should be fetched from the database table and should be updated in the textbox named 'textbox1'.
The other thing is this entire thing is contained in a form which is supposed to be finally submitted to the servlet for further processing.
So how can i achieve this.
i figured out the solution to my own problem. It might not be the most elegant way of doing it, but it does the job pretty well.
So as per my requirement, what i exactly wanted to do was.... insert a value (that will be fetched from the database) into a text box on my form depending on what the user chooses from the drop down box that is already present on my form.
To achieve this, i went about and thought if some how i could nest a form withing my main form, it'd solve my issue. But i discovered that nesting of forms is not allowed. So the next option i thought of was to some how submit the same form without the user clicking on the submit button and also handle it appropriately as an 'incomplete' submit (in the sense that the form is still to be submitted manually by the user by clicking on the submit button) on the server.
So i simply made use of the 'onChange' event of a drop down box. I created an additional hidden field on my form.I wrote a simple javascript function that would simply set the value of the hidden field to the string-"partial Submit" and would submit my main form (say named 'form1') as :-
document.getElementById("hidden_id").setAttribute("value","partial submit");
form1.submit;
The function that does the above will be called whenever (and everytime) the onchange event of the drop down box gets fired.
When the user finally clicks on the submit button on the form to submit the finally completed form, then another javascript function is called that simply sets the value of the hidden field on the form to the string, "final submit" and would submit the form as :-
document.getElementById("hidden_id").setAttribute("value","final submit");
form1.submit;
Now on my server, i checked for the value of this hidden field as :-
if(request.getParameter("hidden_id").equals("partial Submit"))
{
// make a database connection, pass the value user selected from the drop down box
// to a prepared statement that does the query for getting the 'productName' from
// the database, collect the returned string in a variable and set a
// request attribute with this returned value. This value can simply be used in the
// jsp to fill in the value part of the textbox1.
}
else
{
if(request.getParameter("hidden_id").equals("final Submit"))
{
// do the rest of the final processing that needs to be done when user finally
// submits the completed form.
}
else
{
// throw an exception to take care of the possibility that the user might send
// in a 3rd value as a value for the hidden field.
}
}
Since you havent provided the code for selectProduct(this.value) , i presume that it submits the jsp page as when you change the value in the drop down.
If that the case in the servelt, set the value that you want to show in jsp in request object
request.setAttribute("valuetodisplay" ,valuetodisplay);
and now in jsp
<input type="text" value ='<%= request.getAttribute("valuetodisplay")%>' />
Related
Scenario1: I have two fields in the screen district and territory. For some user it has default value selected and the drop down is disabled.
PFB code for reference.
<select id="abcd" name="xyz" class="12234" style="ghfhgfhfh">
<option class="hide" value="4541ghj" selected="">valley
none</option>
</select>.
I am trying to get the "valley none" as the output if the drop down is disabled.
Scenario 2: I have two fields in the screen district and territory. For some user it has default value selected and the drop down is enabled.
At this time I want to select the option from the drop down now.
For this I am trying to make a common code.
What I am doing now:-
I am making a select type element and them I am trying to get the default value by getfirstselectedvalue() and then saving it in the webelement and then I am doing .gettext(). to get the option selected.
other wise if the null is returned from thr firstselectvalue() function then I am trying to select the value by visible text.
Error:-
if the default value is selected and the drop down is disbaled The getfirstselectedvalue() function is returning null ,if the element type is select but if I make it as webelement and then doing gettext it gives me the value in the field but this cannot be done if the drop down is senabled as at that time the type to element should be select to select the value from enabled drop down. At both the scenario the class is select for the fields
Please help....
As mentioned by Greg we need the html and the code you tried for better understanding. However, this is the simple logic that you can use.
//get the listBox Element
WebElement list = driver.findElement(By.xpath("//select[#id='abcd']"));
// check if it's disabled
if (!list.isEnabled()) {
// get value from option 1 as listbox is disabled.
System.out.println(list.findElement(By.tagName("option")).getText());
}else {
// select value as listbox is enabled. (Chnage 'Scenario2' with desired list item
list.findElement(By.xpath(".//option[.='scenario2']")).click();
}
I have a jsp page with a number of selects that are populated using jQuery i.e. they have the <option> tags, they just get it via a function. Each select has some 30 options each.
<form id="target" name="target" action="/project/myservlet" method="get">
<select class="myClass" id="sel1" name="sel1" ></select>
<select class="myClass" id="sel2" name="sel2"></select>
...
</form>
I received these values in my servlet using request.getParameter("sel1") but I'm getting null for the selects that are changed. As in, say I select values from the 2nd, 4th and 5th selects, then these selects get null values in the servlet. Others get the 0th value (default and unchanged) - which is okay.
This can help explain my question. I'm getting null in the next page when I modify the select.
According to this, if I use onload in select, it helps take the updated values to the next page for ONE select. But the problem is that I don't just have one select on the page. I want the updated values to go the next page without a page refresh/going to another page, unless submit for them is clicked. I think the request is not getting updated when the change takes place? Even the url in "get" doesn't get the changed selects.
There is no error as such, just that I am getting the values if the selects are unmodified (defaults). It sends the default values to the next page. When I select another option from the drop down, I get null on the servlet unless I use onchangeto submit the form. But that doesn't work for me since I have many selects. I can't keep submitting the form and going to the next page on every select change.
EDIT:
If it helps, here is my jQuery code:
$(document).ready(function() {
$('select').change(function(){
var v = $(this).val();
$('select option[value="'+$(this).data('old-val')+'"]').prop('disabled', false);
$(this).data('old-val',v);
if(v != "0"){
$('select option[value="'+v+'"]').not(this).prop('disabled',true);
}
});
$('select').each(function(idx,select){
var stateArray = ["Preference No. "+(idx+1),"Bill", "Sally", "Alice"];
$.each(stateArray, function(iIdx, iItem){
$(select).append('<option value="'+iIdx+'">'+iItem+'</option>');
});
});
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
});
});
EDIT 2: Servlet:
public class Preference extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/html;charset=UTF-8");
try {
PrintWriter out = response.getWriter();
String sel = request.getParameter("sel1");
}catch(Exception e){ }
}
}
You need to add <option> tags into your <select> tags.
Each <option> must have value attribute like this:
<option value="3">Apple</option>
Value from the value attribute of the selected option will be value of your <select>. You will get it on server-side by name as usual.
The selected options were disabled from all the select elements in my jQuery. I had to modify the jQuery a little. Disabled elements are not carried forward in a form. On modifying the jQuery to not disable the options, the problem was resolved. Had to take a bit of a help to recognize and correct that.
In my Struts2/Java application, I am allowing the user to send in data to the application from JQGrid. I am using the "saverow" function to loop through each selected row and submit the edited cells. This function is in a separate js file which is included in my JSP.
function editRows(){
for (...){
...
...
...
jQuery('#myGrid').jqGrid('saveRow,rowID,false,null,null,aftersavefunc);
}
getResponse();
}
After the data is submitted from this function, a number of class variables in my action class are updated. I use the aftersavefunc to set the value of hidden jqgrid cells (jqgrid 'setCell') so I can recall them later from the grid.
I have additional values which are simply displayed in a div. These values are also updated within the application after it has been executed. At the time that I'm executing the editRows() function mentioned above, the following div is already visible and displaying a value for each of the fields within the div. These initial div values are the result of a previous form being submitted. Here's what the div looks like in my JSP.
<div id="headerBar">
<table>
<tr>
<td>Total Items: <s:property value="strutsActionName.totalItems</td>
...
...
...
</tr>
</table>
</div>
So for instance, when my function editRows is being executed, the div is already showing a value for "totalItems" on the webpage. It would just look something like this:
Total Items: 5
After function editRows has executed, the value of "totalItems" has been updated within the application. The java action class has the latest value for totalRows.
The editRows function is calling another function getResponse() when the loop has finished. The getResponse function is for obtaining the hidden jqgrid values that I set using the "aftersavefunc" parameter of "saverow". It uses the jqGrid('getCell') to get the updated value of those hidden jqGrid cells.
I want to have the getResponse() function to also refresh the value of "totalItems". This value is not in a jqGrid. I need to refresh the individual field and obtain the updated value. For instance, after editRows() has completed, the value of "totalItems" could have been doubled to 10 from 5.
Within my getResponse() function, I've tried updating this value by using the following, but it hasn't worked.
document.getElementById('headerBar').reload
I just need to update the values in this div without submitting a form.
The property tag is processed on the server side so it would not be updated until request is sent to the server.
As i see it the best way for doing this would be to put the property value inside an element with an id like span or p and then use document.getElemenrById to retrieve that element element and change its content from javascript after retrieving its new value.
There are two select boxes ,both of them are populating from database.second select box should be populate based on the value selected from the first select box.first select box is already populated but i am unable to populate the second select box
<select id="country_obj" name="custCountry" class="field_size_e">
<%
Iterator contryIter = countries.iterator();
Lookup lookup = null;
while(contryIter.hasNext()) {
lookup = (Lookup)contryIter.next();
if(bbForm.getCircuit().getCustCountry().equalsIgnoreCase(lookup.getLabel())){
out.print("<option selected=\"selected\" value='"+lookup.getValue()+"'");
out.print(">");
out.print(lookup.getLabel());
out.println("</option>");
}else{
out.print("<option value='"+lookup.getValue()+"'");
out.print(">");
out.print(lookup.getLabel());
out.println("</option>");
}
}
%>
</select>
how do i populate the second select box based on the value of first select box
You can have a function in javascript to populate options for your second select tag.
function populate(val)
{
//val is a string similar to "<option value='new_option'>new option</option><option...</option>..."
$('#my_select2').append(val);
}
//below method is triggered whenever you select a value for your first select box
$("#country_obj").change(function(){
var selected_str = $("#country_obj option:selected").text();
//now pass this selected_str to a php page where options generation method is present using $.ajax (refer http://api.jquery.com/jQuery.ajax/)
//or you can implement the method here (in javascript) to generate options for your new select tag.
}
})
Note: This is just for guidance. You can have implementations of both methods in one or you can have multiple methods. I'll leave that for you to decide.
EDIT: you can't have options generated for your second select tag in the same php page (like in your question) because, by the time your page is loaded and a user selects a value for first select tag your php code is already executed.
I have a bunch of select tags in my page where some of them allows the user to use the dropdown and some of them will be disabled at a given time. so I have a select tag in my jsp such as:
<html:select name="myobject" property="myfield" disabled="$(isDisabled ? 'disabled' : '')"/>
I wanted to set as readonly a select tag on my jsp but apparently is not possible so I had to put disable. Since disabled values are not passed back to the application when a user submits the action I created a hidden object of it to pass it as it's suggested everywhere to work around that...
<html:hidden name="myobject" property="myfield" indexed="true"/>
The problem is.. when the form is submited I don't get the new dropdown value selected by the user, I debug into my java code and what I receive is the value that was originally sent to the page instead of what the user picked. It works if I removed the hidden field but if I do so then the disabled selections won't displayed when refreshed cause disabled fields don't pass back the values and i'll receive null at my end... how do I fix this problem?
Thanks,
There may be a duplicate of name or property of the html hidden component.