I want to remove the click event from select list and from jQuery date picker.
Say if a select box contains 3 values
(Select, Yes, No) No is selected when the form is loaded then the user must not be able to change it until a satisfying condition is met.
Once the condition is met also I want to restore the selection of any option.
<html>
<head>
<title> Javascript Test </title>
<script src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").data("isOn","Remove");
});
$(document).ready(function(){
$("#b1").click(function(){
var i=0;
//alert("hi");
if($(this).data("isOn")=="Add"){
alert($(this).data("isOn"));
$(this).data("isOn",'Remove');
$("#car").on('click');
//return false;
}
else if($(this).data("isOn")=="Remove"){
alert($(this).data("isOn"));
$("#car").off("click");
$(this).data("isOn",'Add');
//return false;
}
alert(i);
i++;
});
});
</script>
</head>
<body>
<select name="carlist" form="carform" id="car">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type = "button" value="Add/Remove" id="b1"/>
</body>
</html>
Related
I have 2 comboboxes, first for Province and second for city/town.
I just wanna get the value of my second combobox (city/town) after first combobox changed and second combobox will change with ajax after user chose first the combobox.
Here is my code, but the problem is that the alert shows up twice!
jQuery('#billing_state').on('change', function() {
jQuery('#billing_city').on('change', function() {
var state = jQuery(this).val();
alert(state);
});
});
Why you made an imbrication of event ? just use change on the first combo .
Here is an example :
state = {"1":["Rome","Milan","Parma"],"2":["Paris","Lile","Nice"],"3":["Algiers","Jijel","Bejaia"],"4":["London","Manchester"]}
$(document).ready(function(){
//this if you want that changing province this alert country value
$("#billing_state").on("change",function(e){
$("#billing_town").children().remove();
var city =state[$(this).val()];
if(!city) return;
$("#billing_town").append('<option value="">- Select -</option>')
for(i=0; i< city.length;i++) {
//console.log(city[i]);
$("#billing_town").append('<option value="'+city[i]+'">'+city[i]+'</option>');
}
});
// when changing country this alert country value itself
$("#billing_town").on("change",function(e){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Province :
<select id="billing_state">
<option value="">- select -</option>
<option value="1">Italy</option>
<option value="2">France</option>
<option value="3">Algeria</option>
<option value="4">UK</option>
</select>
<br><br>
Country :
<select id="billing_town">
</select>
is this what you want. try with demo below
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>texas</option>
<option>colombo</option>
</select>
<hr>
<label>city</label>
<select id="city">
<option>colombo</option>
<option>canberra</option>
<option>silicon valley</option>
<option>ottawa</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $("#city").val(); // if there is any changes to first selection box, then at that time get the value of second selection box.
alert(thevalue); // to check the value of secod check box at the time chage put an alert.
});
</script>
</html>
or else if your want to show values according to user selection of first select box value, you can do it like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<label>Province</label>
<select id="province">
<option>california</option>
<option>austin</option>
<option>ottawa</option>
<option>western</option>
</select>
<hr>
<label>City</label>
<select id="city">
<option>--select--</option>
</select>
</body>
<script type="text/javascript">
$("#province").on('change',function(){// in this line identify if there is any changes to first select box
var thevalue = $(this).val(); // if there is any changes to first selection box, then at that time get the
$("#city").text("");
//display values according to the first value
if (thevalue == "california")
{
var cities = ["sillicon valley","st pauls","new york"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else if(thevalue="austin")
{
var cities = ["mirage","manhatten","las vegas"];
for(var i=0;i<cities.length;i++)
{
var createoption = $('<option>'+cities[i]+'</option>');
$("#city").append(createoption);
}
}
else
{
//like above you can add relevent values.
}
});
</script>
</html>
function RecupText2() {
var ajaxRequest = ajaxFunction();
ajaxRequest.open("GET","ajax2.php",true);
ajaxRequest.onreadystatechange = function(){
if( ajaxRequest.readyState==4 && ajaxRequest.status==200){
document.getElementById("remplir").innerHTML= ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
var interval = setInterval(RecupText2, 1000);
the setinterval updates the select list every second, which changes the selected value to the first option! thank you!
You could use the HTML5 Data Attribute to store the selected option.
Here; below, is an Example. This example requires & assumes the use of JQuery...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
/** THE DOM HAS FULLY LOADED & NOW JQUERY CAN INTERACT WITH IT... */
$(document).ready(function(){
//RESET THE data-selected ATTRIBUTE EACH TIME THE VALUE OF THE SELECT DROP-DOWN CHANGES
$("#options-list").on("change", function(evt){
$(this).attr("data-selected", currentElem.val());
});
// MAKE SURE TO SET THE VALUE OF THE SELECT TO THE VALUE OF THE data-selected ATTRIBUTE AT EACH INTERVAL CHANGE
// SO WITHIN THE CODE THAT UPDATES THE SELECT, DO LIKE SO
$("#options-list").val( $("#options-list").attr("data-selected") );
});
})(jQuery);
</script>
</head>
<body>
<select name="options-list" id="options-list" class="options-list" data-selected="3">
<option value="10">Ten</option>
<option value="9">Nine</option>
<option value="8">Eight</option>
<option value="7">Seven</option>
<option value="6">Six</option>
<option value="5">Five</option>
<option value="4">Four</option>
<option value="3">Three</option>
<option value="2">Two</option>
<option value="1">One</option>
</select>
</body>
</html>
Hope this helps a bit....
I'm going to create a dropdown list that contains four values (One, Two, Three, Four). When user chooses (One, Two or Three), the textbox below the dropdown list must allow user to type any text in it; but when user chooses Four, textbox should be disabled.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
</script>
<title>Choose one</title>
</head>
<body>
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="text" id="myclass"/>
</body>
</html>
The code above is not working. Can anyone help me to solve this problem?
The DOM isn't ready :
$(function() {
$('#select').on('change', function(){
$('#myclass').prop('disabled', this.value == '4');
});
});
Your JavaScript code is being executed before the DOM is rendered.
Quick fix: place your JavaScript code at the end of the <body> tag. Like this:
<!DOCTYPE html>
<html>
<head>
<title>Choose one</title>
</head>
<body>
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="text" id="myclass"/>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
</script>
</body>
</html>
Another option is making JavaScript code to be executed when document is ready, but the "Quick fix" approach is quite popular nowadays. This would be the different (classical?) approach:
<script>
$(document).ready(function () {
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
});
</script>
My ultimate goal with this is to make a dropdown that allows user input also. The best I can seem to do is an textbox next a dropdown that makes it look like they are similar, the issue I am running into is that I need the textbox to update whenever my dropdown value is changed. I have some code I've been playing with (below), but it doesn't seem to be getting me anywhere! Any pointers on how I can get this to work, or am I messing up the syntax? (fairly new to both jscript and html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<style type="text/css">
select
{
width:200px;
}
</style>
<head>
<title>Test</title>
<script type="text/JavaScript">
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
</script>
</head>
<body>
<form action="" method="">
<input name="stroke"/>
<select name="theItems" onchange="otherSelect()">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
You should execute your script in the window.onload event. The elements are not available to your script when it is being executed. Change your script to this
<script type="text/JavaScript">
window.onload = function(){
var select = document.getElementById('theItems');
var input = document.getElementById('stroke');
function otherSelect()
{
input.value = select.value;
}
}
</script>
This way the script will be executed after the HTML elements have been rendered by the browser.
Here's a simple pure JavaScript implementation of what you want. http://jsfiddle.net/24Xhn/
We're going to setup the markup so the select box and the other input box have similar name and id attributes. We'll use classes to setup/initialize the onchange events and make sure the inputs start off hidden and disabled. By toggling the "disabled" attribute, true or false we are making it so the input or select don't show up when the form is submitted, submit the form in the JSFiddle with different combinations and you'll see the output in the query string of the URL.
HTML
<select id="items1" name="items1" class="select-other">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<input id="items1-other" name="items1-other" class="input-other" />
JS
// setup
var inps = document.getElementsByClassName("input-other");
for(var i=0; i<inps.length; i++) {
var inp = inps[i];
// hide & disable the "other" input
inp.style.display = "none";
inp.disabled = true;
// set onchange, if input is empty go back to select
inp.onchange = function() {
var val = this.value;
if(val == "") {
this.style.display = "none";
this.disabled = true;
// get its associated select box
var sel = document.getElementById(this.id.replace(/-other$/i, ""));
sel.style.display = "";
sel.disabled = false;
}
};
}
var sels = document.getElementsByClassName("select-other");
for(var i=0; i<sels.length; i++) {
var sel = sels[i];
// set onchange if value is other switch to input
sel.onchange = function() {
var val = this.value;
if(val == "other") {
this.style.display = "none";
this.disabled = true;
// get associated input box
var inp = document.getElementById(this.id + "-other");
inp.style.display = "";
inp.disabled = false;
}
};
}
I just realized what was wrong. I didn't truly look at the html until I copied and pasted it into a test application and I figured out the issue.
You need to set the id tag to the stroke and theItems not the name tag. That's why it's not doing anything. There was, I'm guessing, a copy/paste issue as well because you didn't have a closing html tag, but I assumed you just missed copying that. Also, you don't really need global variables in order to retrieve the input and select you just need them inside the actual function, and you can actually pass the select into the function like so.
Your code corrected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
select
{
width:200px;
}
</style>
<script type="text/javascript">
function otherSelect(obj)
{
var input = document.getElementById('stroke');
input.value = obj.value;
}
</script>
</head>
<body>
<form action="" method="">
<input id="stroke" name="stroke"/>
<select id="theItems" name="theItems" onchange="otherSelect(this)">
<option value="item1">Item One</option>
<option value="item2">Item Two</option>
<option value="item3">Item Three</option>
<option value="item3">Item Four</option>
<option value="other">Other</option>
</select>
<div id="otherBox" style="visibility: hidden;">
If other: <input name="otherField" type="text" />
</div>
</form>
</body>
</html>
I also wanted to create a combobox with an auto-updating text field next to it for new entries, and came up with this in less than an hour, based on simple html and javascript examples from w3schools.com. It works perfectly on my IE browser.
<!DOCTYPE html>
<html>
<head>
<script>
function updateField(name, value)
{
document.getElementById(name).value = value;
}
</script>
</head>
<body>
<select name='10' onchange='updateField(this.name, this.value)'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" id="10" value="volvo">
</body>
</html>
I have google a lot but I am not able to understand how to do it.
The code is as follows:
<html>
<head>
<script src="jquery-1.8.2.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function (){
$('#emp_id').blur(function(){
alert($(this).val());
$('#emp_name').val($(this).val());
});
$('#emp_name').change(function(){
$('#emp_id').val($(this).val());
} );
});
</script>
<input type="text" id="emp_id" />
<select id="emp_name" name="emp_name">
<option value="00000" >Please Select </option>
<option value="e0001" >James Smith</option>
<option value="e0002" >Roger Sm</option>
<option value="e0003" >Elina Lobo</option>
</select>
</body>
</html>
and running jsFiddle
http://jsfiddle.net/kamleshahire/J3qLv/1/
I have two components:
Input box : user can enter employee id, once employee code entered by user the drop-down has changed based on Employee code. Employee id is part of drop-down.
Drop-down: it conatins employee id and value as Employee name.
I want to show the error message if the input value is not present in the prepopulated drop-down list.
Thanks in advance
Try it this way:
$('#emp_id').change(function(){
if($('option[value='+$(this).val()+']').length){
$('#emp_name').val($(this).val());
}
else{
alert('Employee not found.');
}
});
I edited my answer to meet your updated requirement.. Here's the fiddle!!
The complete solution is
and JSFiddle is
http://jsfiddle.net/kamleshahire/J3qLv/4/
<html>
<head>
<script src="jquery-1.8.2.min.js" type="text/javascript"><!-- required for FF3 and Opera --></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function (){
$('#emp_id').blur(function(){
//alert($(this).val());
var inputValue = $(this).val();
$('#emp_name').each(function(){
if(this.value == inputValue){
$('#emp_name').val($(this).val());
return false;
}
alert("Please iput valid value");
$('#emp_name').val('-1');
});
});
$('#emp_name').change(function(){
$('#emp_id').val($(this).val());
} );
});
</script>
<input type="text" id="emp_id" />
<select id="emp_name" name="emp_name">
<option value="-1" >Please Select </option>
<option value="e0001" >James Smith</option>
<option value="e0002" >Roger Sm</option>
<option value="e0003" >Elina Lobo</option>
</select>
</body>
</html>