Develop Reference

Disable and enable function in Jquery

I have a text input in html that is affected by a function exectued by .change() events from different radios and checkboxes. I'm trying to make it so that if a user types into the input, this function will no longer run when a .change() event happens in the aforementioned radios and checkboxes (the user must still be able to use these radios and checkboxes). However, if the user leaves the input blank and clicks away, the script will run again. I hope is possible.
Here is my take on this so far:
Using.prop('diabled' isnt viable because it completely disables the input, making the user unable to type in it, so I need another solution.
$(function() {
$('#burger-navn').on('input', function() {
$("#burger-navn").prop('disabled', true);
});
//When the input (#burger-navn) is typed into it should be "disabled"
$('#burger-navn').focusout(function() {
if ($(this).val().length == 0) {
$("#burger-navn").prop('disabled', false);
}
});
//But if its clicked out of while its blank, it should be able to run again.
$("#okseinput, #laksinput, #kyllinginput, #vegetarinput").change(function() {
if (!$("#burger-navn").not(':disabled')) { //condition that tests
navngenerator();
}
});
});

To solve this I simply created a separate input tag that I could add and remove disabled attribute from, and check if it has that attribute.
So in html:
<input id="burger-navn" type="text"/>
<input id="toggle" disabled="disabled" style="display:none"/>
jQuery:
var previousValue = $("#burger-navn").val();
$("#burger-navn").keyup(function(e) {
var currentValue = $(this).val();
if(currentValue != previousValue) {
previousValue = currentValue;
$("#toggle").prop('disabled', false);
}//This function will remove disabled from #toggle, when a user types into #burger-navn
});
$('#burger-navn').focusout(function() {
if ($(this).val().length == 0) {
$("#toggle").prop('disabled', true);
}
});
if ($("#toggle").is(':disabled')) {
navngenerator();
}
$("#okseinput, #laksinput, #kyllinginput, #vegetarinput").change(function() {
if ($("#toggle").is(':disabled')) {
navngenerator();
}
});

$(selector).on('change', function(event){
event.preventDefault();
event.stopPropagation();
// the selected field no longer does anything on change
});
is that what you are looking for?

Checking value of an html select with jQuery

I have the following select box:
<select id="choose">
<option value=1>A</option>
<option value=2>B</option>
<option value=3>C</option>
</select>
<div id="hide-me">hide me!</div>
How can I hide an element when I select option "B"? I tried this:
<script type="text/javascript">
if ("#chose option:selected").val(2) {
$("#hide-me").hide();
};
</script>
I think I'm close, but nothing happens when I select option "B". Anyone have any suggestions?

You need to attach change event to select element to detect the option change. then use .toggle() with argument value not equal to 2 for making show/hide decision :
$('#choose').change(function(){
$("#hide-me").toggle($(this).val() != "2");
})
Working Demo

Listen to the change event of the #choose element, and add your conditional logic there.
Example Here
$('#choose').on('change', function () {
if (this.value === "2") {
$("#hide-me").hide();
} else {
$("#hide-me").show();
}
});
..equivalent, but perhaps less readable version:
Example Here
$('#choose').on('change', function () {
$("#hide-me").toggle(this.value !== "2");
});
As a side note, the value of the selected option is a string.
If you wanted to, you could also convert it to a number:
if (parseInt(this.value, 10) === 2) { ... }
or you could use == rather than ===: (not suggested, though. This could lead to logical errors.)
if (this.value == 2) { ... }
Without jQuery:
Example Here
document.querySelector('#choose').addEventListener('change', function () {
var element = document.getElementById('hide-me');
if (this.value === "2") {
element.style.display = 'none';
} else {
element.style.display = 'block';
}
});

The problem with your code is that:
It is not syntactilally correct — ("#chose option:selected").val(2) is an expression, which in turn should be wrapped in parentheses to be a proper condition for if, like this:
if (("#chose option:selected").val(2)) {
However, even after that your code is not correct because you're not actually using jQuery. You're calling method .val() just on a string "#chose option:selected", whereas that string should instead be a jQuery selector passed to jQuery itself:
if ($("#chose option:selected").val(2)) { // $ is the jQuery object that does all the work
However2, even that is incorrect, because you'd just be checking the value of an element right away. What you need is to wait for an element to be changed. Other answers explain very well how to do that.

CasperJS fails to set select list values

I've got a select list that looks like this:
<select id="ListingType" name="Criteria/ListingTypeID" onchange="Search.toggleListingType(this);">
<option selected="selected" value="1">RH1</option>
<option value="2">BC4</option>
<option value="3">RR3</option>
<option value="4">RH2</option>
<option value="5">RE0</option>
</select>
I'm trying to set the value to 3. I've unsuccessfully tried 3 ways to do this.
1.
this.evaluate(function(value) {
document.querySelector('select#ListingType').value = value;
return true;
}, '3');
// insure the onChange JS is run
this.evaluate(function() {
var element = document.querySelector('select#ListingType');
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);
});
This appears to work (throws no errors), but the value doesn't get changed.
2.
this.fillSelectors('select#ListingType', {
'select[name="Criteria/ListingTypeID"]' : "3"
}, true);
This throws the error message: ``CasperError: Errors encountered while filling form: no field matching css selector "select[name="Criteria/ListingTypeID"]" in form''
What's wrong with my selector?
3.
// In desperation...
this.sendKeys('select#ListingType', 'RR3');
This also seems to work (no errors), but again the value is unchanged.
Just for completeness, I've tried sending the "change" event after each of the variations. I also dump out the attributes of the selected element after each, and it never shows the value as being set.
Note the page that this selector is on has a ton of JS code on it, and this <select> element is not wrapped in a <form> element.
I'm sure I'm making some really stupid mistake, but after hacking on this code for the last several days, I've not made any progress. What's a working way to do this?

You can use slimerJS (it opens firefox) to easily check a change in value.
this.fillSelectors('form#id_form', {
'select[name="Criteria/ListingTypeID"]' : "3"
}, false);
this.wait(6000,function(){
this.echo("i saw my new value");
});
And if you want to fill the option by its text and not value (i find it easier): use this function :
casper.fillSelectOptionByText = function (selectSelector,text){
this.evaluate(function(sel,setByText) {
$(sel + " > option").each(function() {
if($(this).text() === setByText) {
$(this).attr('selected', 'selected');
}
});
},selectSelector,text);
};
And in your test :
this.fillSelectOptionByText("select[name='year of birth']","1991");
The page has to have jquery of course, or you inject it.

Jquery: Hide a link button based on contains in option

EDIT: Will be more specific with requirements see bottom for additions:
I am trying to hide an a link (button formatted as a href), however I am trying to do it based on text found with in an option drop down menu.
So for example
<form id="phonetypeform">
<select name="porting-p1" class="dropdown">
<option value="">Please select an option...</option>
<option value="1">I want to keep my current phone number</option>
<option value="2">I want to choose a new number</option>
</select>
</form>
Next Step
If the 'please select an option' is selected it hides the a link, if anything else is selected then it shows the link
here is the jquery I have which is not working
$(document).ready(function() {
$("a.nextbutton").hide()
$('.dropdown').change(function() {
if($('.dropdown option:contains'Please)') {
$('a.nextbutton',this).hide();
} else {
$("a.nextbutton")show();
}
});
});
EDIT starts here:
thanks to everyone that has given me some answers, but what I now have works, but its not ideal, and ideally would like to use the contains, simple reason is I have about 20 of these scripts I would have to create and target the value, ugly!
to show my exact requirement please see the fiddle, while this is working, as I said I have many of these scripts to put in place, ideally I would like to:
1. target the text 'select...'
2. Have it so that it stays hidden until all options no longer contain 'Select...' (the contains should take care of that right)
Here is a fiddle to make life easier for anyone that can help?
http://jsfiddle.net/p3ewE/
END EDIT

Try this instead:
$("a.nextbutton").hide();
$('.dropdown').change(function () {
if ($('.dropdown').val() == "") {
$('a.nextbutton', this).hide();
} else {
$("a.nextbutton").show();
}
});
jsFiddle example
You had a few syntax issues with missing periods and brackets.

Typo here
if($('.dropdown option:contains(Please)')
^ ^
:contains()
Use this code
DEMO
$('.dropdown').change(function () {
if (this.value == "") {
$('a.nextbutton').hide();
} else {
$("a.nextbutton").show();
}
}).change();

Here is the link http://jsfiddle.net/XXDwr/5/
have a look at it.
$(document).ready(function() {
$(".nextbutton").hide();
$('.dropdown').on('change',function() {
var h= $('.dropdown').val();
if(h=="")
{
$(".nextbutton").hide();
}
else{
$(".nextbutton").show();
}
});
});
I hope you wanted to achieve this.

$(document).ready(function() {
var btnNext = $("a.nextbutton").hide();
$('.dropdown').change(function() {
if(this.value){
btnNext.show();
} else {
btnNext.hide();
}
});
});
You had a typo right before "please".
You could/should save the button in a variable so you don't have to make that query every time.

Execute script based on which option is selected in a select box?

I've got a select box where the user selects which elements they want to see based on option 1, option 2 and option 3.
So what I'm trying to set up is have if option 1 is selected run one set of commands and if option 2 run another and so on.
I guess I just need to know how to set up the jQuery selector.

You didn't specify how the code was triggered, so here are two common ways:
$('#yourSelect').change(function() {
if ($(this).val() == 'something') {
// do this
}
if ($(this).val() == 'somethingelse') {
// do that
}
});
Note that while I used the onchange event for the select, an onclick for another element would look like this instead:
$('#somethingelse').click(function() {
if ($('#yourselect').val() == 'something') {
// do this
}
if ($('#yourselect').val() == 'somethingelse') {
// do that
}
});

<select onchange="if(this.value)window[this.value]();">
<option value="">select one...
<option value="runme1">run me 1
<option value="runme2">run me 2
</select>
<script>
function runme1() {
alert(1);
}
function runme2() {
alert(2);
}