How to trigger JQUERY on Event? - javascript

I would like to make a selection box when clicked, the items on the left will shift to right automatically. However, using trigger I cannot achieve this.
Here is my code.
<script type="text/javascript">
$( document ).ready(function(){
$('#assignedSelected').on('click',function(){
$('#unassignedItems option:selected').clone().appendTo('#assignedItems');
$('#unassignedItems option:selected').remove();
});
$('#assignedItems').on('click','option', function(){
$('#assignedSelected').trigger('click');
});
});
</script>
<table class="selectArea">
<tr>
<td>
<select id="unassignedItems" name="unassignedItems" class="selectBox" size="8" multiple>
<option value="A">A</option>
</select>
</td>
<td class="selectButtonPanel">
<input type="button" id="assignedSelected" class="selectButton" value=">">
</td>
<td>
<select id="assignedItems" name="assignedItems" class="selectBox" size="8" multiple>
<option value="1">1</option>
</select>
</td>
</tr>
</table>

You can't bind click on select options, use .change() instead
$('#assignedItems').on('change', function(){
$('#assignedSelected').trigger('click');
});

Related

Trying to make a row show on dropdown selection via jquery

$(function() {
$('#Yes_smoke').hide();
$('#smoke').change(function() {
if ($('#smoke').val() == 'Yes') {
$('#Yes_smoke').show();
} else {
$('#Yes_smoke').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ex_smoker">
<tr>
<td class="prop">Are you an ex-smoker?</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
<tr class="Yes_smoke">
<td class="prop" width="20%">When did you last smoke?</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
</td>
</tr>
</div>
This is my jquery code as well as a part of my html form. I'm trying to make 'When did you last smoke' appear when the user selects 'Yes' from the selection above, and be hidden until then. But it is currently not working and i'm unsure why, any help would be appreciated. Thank you.
As Lelio pointed out, you have two identical select boxes doing the same thing. Removing the duplication seems to do the trick - see this JSFiddle.
Also, make sure you are loading JQuery before your custom script i.e. ensure the line
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
or similar, referencing a local library for example, is above your script in your HTML page.
It is also good practice to add your scripts just before the end of your <body> element.
you should write a function code inside window load -- for the purpose of assign change event on DOM generate
<script type="text/javascript">
$(window).load(function() {
$('#Yes_smoke').hide();
$('#smoke').change(function(){
if($('#smoke').val() == 'Yes') {
$('#Yes_smoke').show();
} else {
$('#Yes_smoke').hide();
}
});
});
</script>
You are duplicating the id's.
<div class="ex_smoker">
<tr>
<td class="prop">Are you an ex-smoker?</td>
<td>
<select name="smoke" id="smoke">
<option value="" selected="selected">Choose</option>
<option VALUE=""> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</tr>
</div>
<div class="ex_smoker" id="Yes_smoke">
<tr class="Yes_smoke">
<td class="prop" width="20%">When did you last smoke?</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_when" VALUE="">
</td>
<td>
<INPUT TYPE="date" NAME="medical_smoker_es_whenb" VALUE="">
</td>
</tr>
</div>

When I change dropdown value get nearest input textbox value

I have to display list of values in table format. I pass id in input textbox value future I will hide it, and my question is how to get textbox value when I changed the dropdown value.When I changed dropdown it's will update on particular id. Here I have attached my screenshot. Thanks in Advance. i have tried this below code but its will take first id only.
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
$(document).ready(function() {
var type_val;
$('#type').on('change', function() {
var fav = $('#comp_id').val();
alert(fav);
type_val = $('#type').val();
console.log(type_val);
});
});
</script>
expected output
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id" value="<?php echo $row['company_id']; ?>">
</td>
<script>
$(document).ready(function() {
var type_val;
$('#type').on('change', function() {
// find parent tr then find #comp_id inside it
var fav = $(this).closest('tr').find('#comp_id').val();
alert(fav);
type_val = $('#type').val();
console.log(type_val);
});
</script>
You can use parent and next like this.
$(document).ready(function() {
$('#type').on('change', function() {
$(this).parent().next('td').find('input').val()
});
});
Note: Don't use repeated ID. Its a rule violation. Use class instead
of id to find input.Its take only 1st id because duplicate id is not allowed.
Working snippet.
$('#type').on('change', function() {
console.log($(this).parent().next('td').find('input').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="type" id="type" class="form-control">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" class="comp_class" value="Your Value From Php">
</td>
</tr>
</table>
Never use multiple id's of same name on single page.
Generate your id's dynamically like type1, type2 ... and comp1, comp2 ...
<table>
<tr>
<td>
<select name="type1" id="type1" class="form-control sel">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id1" value="1">
</td>
</tr>
<tr>
<td>
<select name="type2" id="type2" class="form-control sel">
<option value="general">General</option>
<option value="coin">Coin</option>
<option value="token">Token</option>
</select>
</td>
<td>
<input type="hidden" id="comp_id2" value="2">
</td>
</tr>
</table>
<script>
$('.sel').change(function(){
var select_id = $(this).attr('id');
var offset = select_id.substring(4);
var type = $(this).val();
alert(type);
var comp = $('#comp_id'+offset).val();
alert(comp);
});
</script>
Here is jsfiddle link:
jsFiddle

How do I add multiple values from a select listbox to another listbox on click of a button using javascript function?

I want to select multiple values from first list and on clicking button those values are added to second list. How do I write such function?
function Add() {
//function here
}
<table border="1" align="center">
<tr>Add multiple items at once:</tr>
<tr>
<td>
<select id="li1" size="5" multiple>
<option value="Item1">I1</option>
<option value="Item2">I2</option>
<option value="Item3">I3</option>
<option value="Item4">I4</option>
<option value="Item5">I5</option>
</select>
</td>
<td>
<select id="li2" size="5" multiple>
<!-- add items in here -->
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" onclick="Add()">Add</button>
</td>
</tr>
</table>
What did you try ? :-)
var src = document.getElementById("src");
var dst = document.getElementById("dst");
// you can replace the "change" event with any event,
// the related action remains the same (i.e. copy the
// selected options to the second list)
src.addEventListener("change", function () {
// empty the second list
while (dst.firstChild) {
dst.removeChild(dst.firstChild);
}
// copy selected options to the second list
for (var i = 0; i < src.options.length; i++) {
if (src.options[i].selected) {
dst.appendChild(src.options[i].cloneNode(true));
}
}
});
<select id="src" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
<select id="dst" multiple></select>
If you worry about browsers compatibility, here is an equivalent using JQuery :
var src = $("#src");
var dst = $("#dst");
src.change(function () {
dst.empty().append(
src.find(":selected").clone()
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="src" multiple>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
</select>
<select id="dst" multiple></select>
try this code for add and remove from one select box to another
$().ready(function() {
$('#add_btn').click(function() {
return !$('#li1 option:selected').remove().appendTo('#li2');
});
$('#remove_btn').click(function() {
return !$('#li2 option:selected').remove().appendTo('#li1');
});
});
if you use jquery:
function add(){
//move from 1 to 2
//$('#li2').append($('#li1').find('option:selected'));
//copy from 1 to 2
$('#li2').append($('#li1').find('option:selected').clone());
}
$('#btnAdd').on('click', add);
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<table border="1" align="center">
<tr>Add multiple items at once:</tr>
<tr>
<td>
<select id="li1" size="5" multiple>
<option value="Item1">I1</option>
<option value="Item2">I2</option>
<option value="Item3">I3</option>
<option value="Item4">I4</option>
<option value="Item5">I5</option>
</select>
</td>
<td>
<select id="li2" size="5" multiple>
<!-- add items in here -->
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" id='btnAdd'>Add</button>
</td>
</tr>
</table>

Unable to post tag returned through document.getElementById('div').innerHTML

I am working on this form with several select elements with options Yes, No or Not applicable. It was required that whenever the user select yes option a separate date field appears next to it. I used HTML DOM document.getElementById("id").innerHTML for this date field. Everything went well but I was not able to pass the value of date to the form action page using POST method. Check this code:
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2"> </div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3"> </div></td>
</tr>
</form>
</table>
Demo - Change function credit_check(name) to window.credit_check = function(name)
window.credit_check = function(name){
if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div2').innerHTML='';
}
window.employment_check = function (name){
if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
else document.getElementById('div3').innerHTML='';
}
You're script wasn't loading properly,
Uncaught ReferenceError: credit_check is not defined in your console shows the error. The functions were not being defined. You can set your functions like above or reposition your code.
Put the inputs into the HTML at loading, then simply hide/show them.
<!-- javascript code -->
<script type="text/javascript">
function credit_check(name){
if(name=='YES')document.getElementById('div2').style.display = 'block';
else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
if(name=='YES')document.getElementById('div3').style.display = 'block';
else document.getElementById('div3').style.display = 'none';
}
</script>
</head>
<body>
<?php include("menu.inc"); ?>
<div id="main">
<table>
<form method="post" action="checkinfo.php">
<tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>
</tr>
<tr align="center">
<td><b>Credit Check </b></td>
<td>
<select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div2" style="display: none;">
Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
<tr align="center">
<td><b>Employment Check :<font color='red'>*</font></b></td>
<td>
<select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
<option value="NA">Not Applicable</option>
</select>
</td>
<td> <div id ="div3" style="display: none;">
Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
</div></td>
</tr>
</form>
</table>
It's also a good idea to check out jQuery, it makes this kind of stuff a lot easier to do.
Your code is already working. See http://jsfiddle.net/2wg4u6ut/
Make sure your JavaScript is in the head section of your document.
There were some minor issues in your formatting where the <form> tag belongs around the table.
You also were missing the submit button, but then it's already working.

Enabling a text box depending upon the selected value in a drop down

Hi I have an HTML page which has a text box and a dropdown box. When the page is loading for the first time, then depending upon the value in the drop down(Selected) the text box needs to be enabled or disabled. I want to do this using javascript or jquery. I need a little help.
<table>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type1" id="field_type">
<option value="TEXT" SELECTED="">TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" >DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type2" id="field_type">
<option value="TEXT" >TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" SELECTED="">DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
</table>
Now what I want is, when the page loads, for the row where the drop down is having TEXT selected, the text box will get enabled. But not for the other. I would really appreciate any kind of help.
In jQuery:
$(document).ready(function(){
$('select').on('change',function(){
if($('select').val() == "TEXT") {
$(this).parents('td').siblings('td').children('input').removeAttr('disabled');
}
});
});
Changed Scott's code a bit so that it works on your load:
$(document).ready(function() {
$('select').each(function() {
var comboBox = $(this);
checkValue(comboBox);
comboBox.on('change', function() {
checkValue(comboBox);
});
});
});
function checkValue(comboBox) {
if (comboBox.val() == "TEXT") {
comboBox.parents('td').siblings('td').children('input').removeAttr('disabled');
}
else {
comboBox.parents('td').siblings('td').children('input').attr('disabled','disabled');
}
}​
Here's a fiddle btw: http://jsfiddle.net/BbStP/1

Categories