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();
}
});
});
Related
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).
here's my javascript
function disp(s)
{
var st=document.getElementById("stats");
st=st.options[st.selectedIndex].text;
document.getElementById("sp").innerHTML="this is changing :"+s;
if(st=="Other")
{
document.getElementById(s).style.display="inline";
}
else
document.getElementById(s).style.display="none";
}
and here's my front end
Rain Guage Status
<select id="stats" onchange="disp('oth')"><option>
Good
</option>
<option>
Bad
</option>
<option>
Other
</option></select>
<input type="text" placeholder="Please enter the status briefly" style="display:none" id="oth">
Exposure
</td>
<td><select id="expo" onchange="disp('othe')"><option>
Good
</option>
<option>
Bad
</option>
<option>
Other
</option></select>
<input type="text" placeholder="Please enter the exposure briefly" style="display:none" id="othe">
the problem i'm facing is that exposure texbox opens up only when rainguage textbox is displayed... there's no relation to both of dropdowns except for the function which takes the id of textbox to display.
like if rainguage tb is displayed and exposure tb is displayed, i cannot hide exposure tb unless i hide rainguage tb. please help
It's because you are getting the element by id stats. Instead you can pass the element with your function.
<select id="stats" onchange="disp(this, 'oth')">
<select id="expo" onchange="disp(this, 'othe')">
and Update your function like this :
function disp(ele,s)
{
//var st=document.getElementById("stats"); No need for this line
var st=ele.options[ele.selectedIndex].text; //use ele from here
document.getElementById("sp").innerHTML="this is changing :"+s;
if(st=="Other")
{
document.getElementById(s).style.display="inline";
}
else
document.getElementById(s).style.display="none";
}
use onchange event for multiple select as follows.
1.give same class name for all select as below.
<select id="stats" class='select-box">
<select id="expo" class='select-box">
2.use jquery onchange function
$( ".select-box" ).change(function() {
alert( "option selected" );
});
I have the following html radio tags. Basiclly, it has 3 radio button and the user can only pick one and I want the jquery code to pick up the value from the checked radio.
There is 3 radio button, one for all day, one for N/A and one for time. And once user click time, it can selected the time between 12:00 to 20:00 in the tag.
I know that using .val() for extract the value for the other two options, but I am figuring out how to extract the values on the times when the time radio button is selected.
I am using Meteor framework for this project, but i guess this is a jQuery question.
html
<tr>
<td>Monday</td>
<td><input type="radio" name="mon" value="all">all day</td>
<td>
<input type="radio" name="mon" value="time">between
<select name="firstTime">
<option>Time</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
</select>
to
<select name="secondTime">
<option>Time</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
</select>
</td>
<td><input type="radio" name="mon" value="n/a">N/A</td>
</tr>
You can do as below:
DEMO
$("input[name=mon]").on("change", function(){
if(this.value=="time"){
alert("First Time : " + $('select[name="firstTime"] option:selected').text());
alert("Second Time : "+$('select[name="secondTime"] option:selected').text());
}
});
UPDATE
For this demo I am trying to get values on button click:
$('.getVal').on('click',function(){
var selectedoption=$("input[name=mon]:checked").val().trim();
if(selectedoption=="time"){
var dispValue="First Time : " + $('select[name="firstTime"] option:selected').text()+ " and Second Time : "+$('select[name="secondTime"] option:selected').text();
$('.dispSelected').text(dispValue);
}
else
{
$('.dispSelected').text(selectedoption + " has been selected");
}
});
You can get their value when they change, for example:
jQuery("input[type=radio]").on("change", function(){
alert(this.value); //Will show the value of the selected radio
});
For getting the select values, you can get them, for example, when the selects change or when the radios change. Check this fiddle.
If you want to get the values when the form is submitted use the following code:
$('form').on('submit', function( e ) {
e.preventDefault();
var formData = $(this).serialize();//this holds all the form data
......
});
But to ensure that times are only included when the time radio button is selected you need the following code:
$('input[name=mon]').on('change', function() {
$('select[name=firstTime], select[name=secondTime]').prop('disabled', this.value != 'time');
});
I am creating my first Web Form and I'm looking for a little help getting this JavaScript Function to work for me.
I am trying to use a JavaScript function to specify which datalist to use for a form input list=" " based on the selected value of a separate form. As you can see below I have supplied the first form (which I intend to 'fire' the JavaScript and input the variable) and the second form which should have the input list=" " value set by the script. In the first form I have used two different events simply to figure out which is the appropriate: onselect= and onchange=.
I greatly appreciate any help or comments.
Here is my code, I have approached this quite a few different ways and at this point it exists as:
<form>
Tendon Type: <input list="tendontype">
<datalist id="tendontype">
<option value="Cantilever" onselect="locationScript('ct')">
<option value="Drape" onchange="locationScript('ut')">
<option value="Span">
</datalist>
</form>
<form name="location">
Location: <input id="loc229" list="need js to insert here"><br />
<datalist id="pier">
<option value="Pier EN-1">
<option value="Pier EN-2">
</datalist>
<datalist id="unit">
<option value="Unit EN-2">
<option value="Unit EN-3">
</datalist>
<datalist id="span">
<option value="Span EN-1">
<option value="Span EN-2">
</datalist>
</form>
<script>
function locationScript(x) {
var locationlist;
if (x == 'ct') {
locationlist = setAttribute("list","pier")
} else {
if (x == 'ut') {
locationlist = setAttribute("list","unit")
} else {
locationlist = setAttribute("list","span")
}
}
document.getElementById("loc229").locationlist;
}
</script>
Trying to figure out how I can produce text dynamically in a text box of a form using javascript.
I want to select a type of event from a dropdown list which I have made and on that selection a value be input in to the textbox of the form for eventprice.
So far this is what I have but I have no value being produced in the textbox any help appreciated.
function totalprice(){
if($('#type').val() == '3'){
$('#eventprice') == ("45");
}
}
<input type="text" disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />
If you don't mind using jQuery, it is going to be a breeze: you'll simply need to add the data attribute price to every option. What this function does is:
Compares the value of all options to the value currently visible in the select box when the value is changed.
If the values are the same, copies the data-attribute to the other input.
Working demo: http://jsbin.com/acuyux/6/edit
The HTML
<select id="type">
<option data-price="25">Party</option>
<option data-price="35">Meeting</option>
<option data-price="45">Lounge</option>
</select>
<input type="text" id="eventprice" name="eventprice" disabled="" class="form-input" />
The JS
$('#type').change(function totalprice(){
$('option').each(function() {
if($(this).val() === $('#type').val()) {
$('#eventprice').val($(this).data('price'));
}
});
});
I would recommend using jQuery due to its efficient code.
HTML:
<input type="text" disabled id="eventprice" />
<select id="select">
<option data-cost="5">Event 1</option>
<option data-cost="10">Event 2</option>
</select>
jQuery:
$('#select').change(function () {
var str = $(this).find('option:selected').data('cost');
$('#eventprice').val(str);
});
// This code can be used to run it on load
// $('#select').trigger('change');
Code in action:
http://jsfiddle.net/LkaWn/
Hope this helps :)
Modify the 3rd/4th line of your code to be $('#eventprice').val("45"); as suggested, except that the suggestion had a syntax error.