I saw a sample code in this website to dynamically populate second dropdown men based on a selection of first dropdown. I have account number dropdown and based on the selection, I need to populate second dropdown with corresponding email-id.
code is here :Populating Child Dropdown (second option using java script).
But can someone let me know how to populate the values inthe second dropdown ?
<script>
var dd2options = ${dd2optionsAsJSObject};
var dd3options = ${dd3optionsAsJSObject};
function dd1change(dd1) {
// Fill dd2 options based on selected dd1 value.
var selected = dd1.options[dd1.selectedIndex].value; ... }
</script>
My code is as below- how to change the code to do this ?
<td>
1. Member Account Number
<span class="bodyCopy">
<font color="#ff0000"> * </font>
</span>:
<html:select
name="DataForm"
property="Member.accountNumber"
styleClass="formContent"
style="width:80px">
<html:options collection="<%= WorkConstants.RENewDropdowns.PACCT %>"
property="value"
labelProperty="label"
styleClass="formContent"/>
</html:select>
</td>
My second dropdown is as below:
<td>
3. Member <br>E-mail Address:<br />
<span class="bodyCopy"></span>
<html:select
name="DataForm"
property="Member.emailAddress.emailAddress"
style = "width:150px"
styleClass="formContent">
<html:options collection="<%= WorkConstants.RENewDropdowns.PEMAIL %>"
property="value"
labelProperty="label"
styleClass="formContent"/>
</html:select>
</td>
Appreciate your help on this as I'm new to java script.
Problem can be solved in following ways
Using onchange event of select element, on first box submit form and populate data in second select box.
Use ajax to fetch data in the same way instead of submitting form
Fetch all the main and related data, store them in arrays. Call them according to key. You can use JSON to solve
Related
I have a variable that is obtain inside each block in thymeleaf. I want to send that variable to a certain method in my controller. The limitation is that the variable is obtain inside a block which makes it local, not accessible global.Hence I get an error while trying to use it. How can I move inside the scope to get the variable so as I can use it global in thymeleaf.
<form th:action="#{/masomo/somo(date=${dateMpya.date})}" method="POST">
<select id="date" name="date" required="true">
<option value="none" selected disabled hidden >
Select a Date
</option>
<th:block th:each="somoChagua : ${masomoChagua}">
<option th:each="dateMpya: ${somoChagua}" th:value="${dateMpya}" th:text="${dateMpya.date}" ></option>
</th:block>
</select>
<button type="submit"><i class="fa fa-search"></i> </button>
</form>
There can be many different "dateMpya" objects for each "somoChagua".
But there is only one submit button.
So which "dateMpya" should be used for the submit button value?
I think what you are actually trying to do here is get the value of the "dateMpya" which the user selected in the drop-down. Is that right?
If that's the case there is no need to add any attributes to the submit button. You would access that value by using the name of the select element, which is "date".
EDIT: For the same reason you also need to remove the (date=${dateMpya.date}) part of the form action as well. The value selected in the drop-down will automatically be submitted under the name of the select element "date", it does not need to be specified.
So the question is like we manipulate the values of the form fields through servlets by using request.getParameter() can we do the other way round i.e set the form feild values fromthe servlet itself?
Basically what I am trying to do is to create a dropdown and some textboxes. the dropdown gets the ids from the database , when user selects a particular id, the text boxes should get filled with the other values from database for that id so the user can either edit them or leave unchanged accordingly.
For ex: The html code is:
<form action="GetValues">
<select name="ids"><option>1</option><option>2</option></select>
<input type="submit" value="Edit">
</form>
<form action="Save">
Product name:<input type="text" name="name" id="tb1"/></br>
Price:<input type="text" name="price" id="tb1"/>
<input type="submit" value="Save">
</form>
The Getvalues servlet establishes the database connection and gets the values of name and price from the datbase which I can do, but how to display those values in the two textboxes?
I can than make the Save.java servlet to get the values from textfields and update into the database.
I am not at all comfortable using JSP scriptlets. I want to do this using servlets only.
I know I could have created textboxes using the servlet itself but that won't work for me because that makes my jquery on the form die.
Like we do in javascript:
var x="hii";
document.getElementById("tb1").value=x;
Is there anything like this in Java too?
I know you requested no scriptlets, but IMO this is the easiest way to do it.
In your servlet, set a request attribute as such:
request.setAttribute("attributeName", attributeValue);
Then in your jsp, you can access the attributeValue like this:
<%= request.getAttribute("attributeName") >
Edit: For the followup question in the comment, here is how you can show the IDs in the select box using scriptlets:
First, set the list of IDs in the servlet:
List<String> idList = ...;
request.setAttribute("idList", list);
Then in your JSP, construct the select field as follows:
<select name="ids">
<%
List<String> idList = request.getAttribute("idList");
for(String id : idList) {
%>
<option><%=id></option>
<%
}
%>
</select>
. the dropdown gets the ids from the database , when user selects a particular id, the text boxes should get filled with the other values from database for that id so the user can either edit them or leave unchanged accordingly.
That is the perfect place to use a AJAX call. Please fire a AJAX request and get the values from Database.
I have a situation where I need to get the current selection from the drop down as a text or String and compare it for further assertion, but when I try the getText(), I get the complete list of items in the drop down, how can I get the currently selected item from drop down.
<form id="MODIFY_ATTRIBUTES" class="formList" method="post" action="jfn?ctxcontractId=L4%3A2274&mfunc=30&ctxnavCtx=C&cfunc=228&ctxaccountId=L4%3A1877&oid=L4%3A2042&ctx=L&octx=110&jfnRC=1">
<hr/>
<div class="formListTab">
<fieldset>
<div>
<label class="mandatory" for="p-param-L4:80000">Language</label>
<select id="p-param-L4:80000" name="p-param-L4:80000">
<option value="p-param-L4:80000-L4:12610">English</option>
<option selected="selected" value="p-param-L4:80000-L4:12600">French (Standard)</option>
<option value="p-param-L4:80000-L4:12830">Dutch</option>
</select>
</div>
I used the below XPATH, but it returns the complete list of items from the drop-down.
driver.findElement(By.xpath("//form[#id='MODIFY_ATTRIBUTES']/fieldset[1]/div/select")).getText();
You are fetching the text of whole Select element instead of just the selected option. You may use the inbuilt function to fetch selected option then fetch the text from this. Use Following:
String selectedOption = new Select(driver.findElement(By.id("p-param-L4:80000"))).getFirstSelectedOption().getText();
However if you want to use xpath. You may try following:
String selectedOption = driver.findElement(By.xpath("//select[#id='p-param-L4:80000']/option[#selected='selected']")).getText();
I would recommend Id to fetch your required text.
I am new to JSP for 1 month.I wants to dynamically create dropdownlist whenever user click "Add" button in JSP. But, after searching for hours in the internet, there are no such articles. Previously I had tried to do the same thing (but with textbox in C#) and it works. Is it possible to dynamically create dropdownlist in JSP too? Or I have to send to servlet to create another dropdownlist?
<form>
<select>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
</select>
<input type="Add" name="Add">
<form>
You could either use javascript to add element to select item or you can submit form and render new list with element you added after reload
I'd like to know if you can display more than one div or table content of same id from onchange value. Like if I select an option from drop down and it displays its content but i want to display another content from elsewhere in my page when same option is selected.
My code is as follows:
<select name="debitOrderType" id = "debitOrderType"
onChange="display(this,'BANK','CARD','INVOICE');">
<option>Please select...</option>
<option value="BANK" selected>Debit Order (Monthly)</option>
<option value="CARD">Credit Card (Monthly)</option>
<option value="INVOICE">Invoice (Yearly)</option>
</select>
Then when selecting Invoice from dropdown it displays the following:
<tbody id="INVOICE" style="display: none;">
<tr>
<td class="field">Thank you for selecting to pay yearly in advance. By doing so you
are receiving one month's free listing.
</td></tr>
</tbody>
But now i want to display the following ALSO when Invoice is selected but in another part of the page:
<tbody id="INVOICE" style="display: none;">
<tr><td height="5"></td></tr>
<tr><td align="right">This is your discounted yearly price</td></tr>
</tbody>
But only the first part is showing and not both. It looks like you can't display more than one content from same Id.
Hope you can help me?
Thanks in advance!
You mustn't define two elements with the same id in HTML, it's meant to be a unique identifier. Classes can be used multiple times, so use that!
First of all it is bed practice to assign same id to more than one element, although DOM will never find 2nd element of same id. Assign class to both table and make it visible on onChange event of combo box, then it will work.
If you want to display or apply css on single object then you should use ID. And if you want to display or apply css on multiple object then you should use CLASS.
In your example you should avoid ID and use class.
avoid this
id="INVOICE"
Use this
class="INVOICE"
Hope it will help you.