Develop Reference

How to retrieve data from the database when an option in a select tag in the jsp is selected

I want to be able to choose a program code from the drop down list in the jsp and without submitting get the corresponding program description from the database and display it in a textbox on the webpage. If anyone could let me know how to go about this, or what I need to look into that would be great, thanks.
<tr>
<td><strong>Program Code</strong></td>
<td>
<select name="ProgramCode">
<option value="-1" selected>[choose your program]</option>
<option value="1">CPA</option>
<option value="2">HSH</option>
<option value="3">CP</option>
<option value="4">RPN</option>
<option value="5">CSTC</option>
<option value="6">CFND</option>
</select>
</td>
</tr>
<tr>
<td><strong>Program Description</strong></td>
<td><input type="text" name="ProgramDescription" value="<%/*= programDescription */%>" size=20></td>
</tr>

You need to use and onchange eventhandler. Set an program ID:
<select name="ProgramCode", ID="ProgramCode">
Then you need selection from the menu.
<input type="text" name="ProgramDescription" id="<%/*= programDescription */%>" size=20>
And integrate the below eventhandler:
var select = document.getElementById('ProgramCode');
var input = document.getElementById('<%/*= programDescription */%>');
select.onchange = function() {
input.value = select.value;
}
Note: check if I have added a working ID for you (based on your value tag).

Assigning id to two elements present in a single column

I am facing some issue in assigning id to two elements present in a single column. One element is dropdown and other is a text element. Actually I achieved this in first scenario but i am facing some issues in second scenario. Please help me guys..
Scenario 1:
<td>
<select name="fmeaEntityForm[0].subSystem.id" id="subSystem0" onchange="getsubSystemFunction(this)">
<option value="-1">
<spring:message code="label.fmea.select.subSystem" />
</option>
<c:forEach items="${subSystemList}" var="ss">
<option value="${ss.id}">${ss.subSystem}</option>
</c:forEach>
<option value="0">
<spring:message code="label.fmea.select.other" /></option>
</select>
<input type="text" name="fmeaEntityForm[0].subSystem.subSystem" id="subSystemText0" placeholder="Enter Sub-system if selected other"/>
</td>
In scenario one i can easily access first element by : table.rows[rowCount].cells[cellNumber].childNodes[0] and second element by table.rows[rowCount].cells[cellNumber].lastChild .
Scenario 2: I need to align this dropdown and text box so i used two classes to align both of the elements parallel. Now both elements are aligned properly but I am not able to access both these elements
<td>
<div class="element1">
<select name="fmeaEntityForm[0].subSystem.id" id="subSystem0" onchange="getsubSystemFunction(this)">
<option value="-1">
<spring:message code="label.fmea.select.subSystem" />
</option>
<c:forEach items="${subSystemList}" var="ss">
<option value="${ss.id}">${ss.subSystem}</option>
</c:forEach>
<option value="0">
<spring:message code="label.fmea.select.other" />
</option>
</select>
</div>
<div class="element2">
<input type="text" name="fmeaEntityForm[0].subSystem.subSystem" id="subSystemText0" placeholder="Enter Sub-system if selected other"/>
</div>
</td>
css
.element1
{
display:in-line;
float:left;
}
.element2
{
margin-left:5px;
display:in-line;
float:left;
}

in "scenario 2" use..
table.rows[rowCount].cells[cellNumber].childNodes[0].childNodes[0] to get the select element, and
table.rows[rowCount].cells[cellNumber].lastChild.childNodes[0] to get the input element

Enabling & disabling form's field based on the choice of radio button & select option together

In the above form, when the users choose No radio button of Want it? field the following select menu of If yes, how? field & text input area of Address field should be disabled.
If the users choose Yes both the following fields should be enabled where users shall have the preference to choose delivery method in the selection menu of If yes, how? field which are:
home_delivery
pos_delivery
If the users select pos_delivery the text input area of Address field should be disabled.
The html & jQuery codes are as following:
<table>
<tr>
<td>Want it?</td>
<td><input type="radio" name="choose" id="yes" value="Yes" />Yes</td>
<td><input type="radio" name="choose" id="no" value="No" />No</td>
</tr>
<tr>
<td>If yes, how?</td>
<td>
<select name="delivery_method" id="delivery_method">
<option value="" selected="selected">Select Delivery Method</option>
<option value="home_delivery">Home Delivery</option>
<option value="pos_delivery">Point of Sale Delivery</option>
</select>
</td>
</tr>
<tr>
<td>Address:</td>
<td><input name="address" id="address" type="text" value="" size="30" />
</td>
</tr>
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="choose"]').on('click', function() {
if ($(this).val() === 'Yes') {
$('#delivery_method,#address').removeProp("disabled");
}else{
$('#delivery_method,#address').prop("disabled", "disabled");
}
});disabled
});
</script>
</script>-->
<script type="text/javascript">
jQuery(document).ready(function($){
$('#address').attr('disabled','disabled');
$('select[name="delivery_method"]').on('change',function(){
var option = $(this).val();
if(option === "home_delivery"){
$('#address').removeAttr('disabled');
}else{
$('#address').attr('disabled','disabled');
}
});
});
</script>
The following blocks of jQuery code serve the purpose individually but when these are combined together, it seems that the following two blocks of jQuery code are conflicting with each other.
How can I combined these two block of code together in this case?

Just replace this...
$('#delivery_method,#address').removeProp("disabled", "disabled");
...with this...
$('#delivery_method,#address').prop("disabled", false);
Additionally you somehow left a disabled function or statement there for some reason:
jQuery(document).ready(function($){
$('input[name="choose"]').on('click', function() {
if ($(this).val() === 'Yes') {
$('#delivery_method,#address').prop("disabled", false);
}else{
$('#delivery_method,#address').prop("disabled", "disabled");
}
});disabled /* <-- this one */
});
...just remove that and you should be good to go.
EDITED: A little explanation: removeProp takes one property only, so you either use that properly...
$('#delivery_method,#address').removeProp("disabled");
... or use prop to do the same, as shown above.
Here is a fiddle demo

Javascript onchange select list

Please can someone help?
I have the below select list:
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
</td>
When the user selects "Transfer from EE Agent" I need four new input boxes to appear but not appear when any of the other options are selected?
So I assume it's an onchange code it needs?
I'm just not sure how
Thanks in advance for your help
Padders

You will require some javascript code to display other fields when a specific value is selected in combo box. I have used simple javacript code so that everyone can understand it quickly.
First add the other fileds within the table and hide them with style property display:none
<tr id="other_fields" style="display:none">
<td>Other Fields</td>
<td>
<input type="text" value="field1"/>
<input type="text" value="field2"/>
<input type="text" value="field3"/>
<input type="text" value="field4"/>
</td>
</tr>
I have assigned this row an id other_fields, so in onchange event if the value matches with the required one then we will show it otherwise hide it.
Secondly, Add the following javascript function and call it in on load function. This will attach an ebent handler to this select box.
<script type="text/javascript">
function onload() {
document.getElementById("CallLeadType").onchange = function (e) {
if (this.value == 'Transfer from EE Agent') {
document.getElementById("other_fields").style.display="";
} else {
document.getElementById("other_fields").style.display="none";
}
};
}
</script>
Finally in body tag call this function:
<body onload="onload()">
See the working example at:
http://jsfiddle.net/YpVGE/1/
Hope this helps

$('#CallLeadType').on('change', function()
{
if ( $('.CallLeadType option:selected').val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});

you can use jquery
$('select[name=CallLeadType]').on('change',function(){
if ( $(this).val() == 'Transfer from EE Agent' )
{
//create inputs here
}
});

$('#CallLeadType').live("change",function(){
var Id=document.getElementById("CallLeadType");
var value = Id.options[Id.selectedIndex].text;
if(value=="Transfer from EE Agent"){
// your code to add textboxes
}
});

You could use this, this should be fired even you click on dropdown list and before blur event get fired (compared to simple onchange event):
{oninput event support: http://help.dottoro.com/ljhxklln.php}
var timeoutChange;
$('#CallLeadType').on('change input paste propertychange', function()
{
clearTimeout(timeoutChange);
timeoutChange = setTimeout(function(){
//code your logic here
},0);
});

<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
<input type="text" class="transferInput"/>
<input type="text" class="transferInput"/>
</td>
$(function(){
$('.transferInput').hide();
$('#CallLeadType').on('change', function(){
$('.transferInput').hide();
if ( $('#CallLeadType').val() == 'Transfer from EE Agent' ){
$('.transferInput').show();
}
});
});

You need basically two things, an event (.change) which you can trigger when you change the value of the element 'select' and a pseudo-class (:selected) that permit to get the current value of your select, so you can create the correct condition that show the four inputs when you choose 'Transfer from EE Agent' and hide when you not select that option.
Change your Html in this way:
<td>Call Lead Type: </td>
<td>
<select name="CallLeadType" id="CallLeadType">
<option value=""></option>
<option value="LSG Service warm transfer from Claims">LSG Service warm transfer from Claims</option>
<option value="IVR Direct Call">IVR Direct Call</option>
<option value="Transfer from EE Agent">Transfer from EE Agent</option>
<option value="Dropped Line">Dropped Line</option>
<option value="Test Call from EE">Test Call from EE</option>
</select>
<!-- add the inputs and hide them -->
<div id="inputsTEEA" style="disply:hide">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
</td>
javaScript:
$(function(){
var $inputsTEEA = $('#inputsTEEA');
// every time that you choose a different item in the select, this event is triggered
$('#CallLeadType').change(function(){
var
$select = $(this),
//pseudo class selected, you get the value of the currently option selected
valSelect = $select.find('option:selected').val();
if(valSelect == 'Transfer from EE Agent'){
$inputsTEEA.show();
}
else{
$inputsTEEA.hide();
}
});
});

Javascript replace "other" value with input from text field

I have the following form that I am working on...
When a user choses an option from a radio group a div is displayed with a multiple selection list. If one of those selections is "other" a text box is dislayed allowing the user to input the information.
How do I get the form to return the selections from the multiple selection list while replacing the "other" value with the value of the text input field??
I'vespent countless hours searching google and this website and while I've found some similar solutions, none are for multiple selections and none fit my needs.
This is what I have so far for the form:
<form method="post" action="send_email.asp" onsubmit="return Form_Validator (this)"
name="form2" id="form2" >
<tr>
<td>Product Type: <br />
<input name="ProductType" type="radio" value="Network" tabindex="1"
onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','none');"/>
Network<br />
<input name="ProductType" type="radio" value="Network and CPE" tabindex="2"
onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','inline');"/>
Network and CPE<br />
<input name="ProductType" type="radio" value="CPE Only" tabindex="3"
onclick="setVisibility('NetworkProducts','none'); setVisibility
('CPEProducts','inline');"/>
CPE Only<br/>
<div id="NetworkProducts" align="left">
Network Product Sold <span class="style2">*</span>
<select name="NetProductSold" size="3" multiple="MULTIPLE"
id="NetProductSold" onchange="showothernet(this.form);">
<option value="Prod1">Prod1</option>
<option value="Prod2">Prod2</option>
<option value="Prod3">Prod3</option>
<option value="Prod4">Prod4</option>
<option value="Prod5">Prod5</option>
<option value="Prod6">Prod6</option>
<option value="Prod7">Prod7</option>
<option value="Prod8">Prod8</option>
<option value="Prod9">Prod9</option>
<option value="Prod10">Prod10</option>
<option value="Other">Other</option>
</select>
</div>
<blockquote>
<div id="OtherNetworkProducts" align="left" >
If other, Please specify: <input name="OtherNetProductSold"
type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >
</div>
</blockquote>
<div id="CPEProducts" align="left">
CPE Product Sold <span class="style2">*</span>
<select name="CPEProductSold" size="3" multiple="multiple"
id="CPEProductSold" onchange="showothernet(this.form);" >
<option value="CPE1">CPE1</option>
<option value="CPE2">CPE2</option>
<option value="CPE3">CPE3</option>
<option value="CPE4">CPE4</option>
<option value="CPE5">CPE5</option>
<option value="CPE6">CPE6</option>
<option value="CPE7">CPE7</option>
<option value="Other">Other</option>
</select>
</div>
<blockquote>
<div id="OtherCPEProducts">
If other, Please specify: <input name="OtherCPEProductSold" type="text"
id="OtherCPEProductSold" size="50" >
</div>
</blockquote>
</form>
And this is what I have for the javascript:
<script Language="JavaScript"><!--
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function showothernet (form)
{
for (var j = 0; j < form.NetProductSold.length; j++)
{
if (form.NetProductSold.options[j].selected)
{
if(form.NetProductSold.options[j].value == "Other")
{
setVisibility('OtherNetworkProducts','inline');
}
else
{
setVisibility('OtherNetworkProducts','none');
}
}
}
for (var i = 0; i < form.CPEProductSold.length; i++)
{
if (form.CPEProductSold.options[i].selected)
{
if(form.CPEProductSold.options[i].value == "Other")
{
setVisibility('OtherCPEProducts','inline');
}
else
{
setVisibility('OtherCPEProducts','none');
}
}
}
}
function setFocus(form)
{
var process = form.OtherNetProductSold.value;
form.NetProductSold.options[10].value = process
alert (form.NetProductSold.options[10].value);
}
//--></script>
The form functions the way I want it to, when the user clicks "Network" or "Network and CPE" and list appears for the Network products, then if the "other" option is one of the selected options, the text field for other is displayed.
The problem is how to replace that "other" value from the multiple selection with the input from the text field.
PLEASE HELP!
Thanks in advance!

The text showed to the user is between <option> and </option>. So, set it as .innerHTML instead (it changes the text between):
form.NetProductSold.options[10].innerHTML = process;
Secondly, you have:
<input name="OtherNetProductSold"
type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >
while your setFocus accepts a form. So, setFocus(this.form) you should use.
http://jsfiddle.net/pimvdb/nMkvb/