Here's what I'm trying to do. When the page loads, the option "Self" will be selected and there will be no text area next to it. When the user chooses "Other" then the text area will show up next to it. Any help would be much appreciated. I've been stuck on this for a bit and I'm about to pull out what hair I have left.
Here is my code.
HTML
<select name="employee_choice" id="employee_choice" data-role="slider" data-theme="c"data-track-theme="a">
<option value="0">Self</option>
<option value="1">Other</option>
</select>
<input type="text" id="pernr" name="pernr" width="12em" />
JS
$('#employee_choice').change(function(){
var pernrField = $('#pernr');
var empSelect = $('#employee_choice').val();
pernrField.hide();
if (empSelect == '1'){
pernrField.show();
}
if (empSelect == '0'){
pernrField.hide();
}
});
Just toggle the input's visiblity based on the selects value :
$('#employee_choice').on('change', function() {
$('#pernr').toggle(this.value==='1');
});
FIDDLE
you need to check on the selected value.
var empSelect =$('select[name="employee_choice"]').val()
and instead of multiple if you can use else too
You need to run it first when the page loads. As seen in this jsFiddle, your code does work if you change the JavaScript to the following:
function showOrHidePernr() {
var pernrField = $('#pernr');
var empSelect = $('#employee_choice').val();
pernrField.hide();
if (empSelect == '1') {
pernrField.show();
}
if (empSelect == '0') {
pernrField.hide();
}
}
$('#employee_choice').change(showOrHidePernr);
$(function() {
showOrHidePernr();
});
First initialize the status, and also on the change() event:
show_pernrfield();
$('#employee_choice').change(function(){
show_pernrfield();
});
function show_pernrfield() {
var pernrField = $('#pernr');
var empSelect = $('#employee_choice').val();
if (empSelect === '1') {
pernrField.show();
}
else {
pernrField.hide();
}
}
Take a look: http://jsfiddle.net/YhaCh/1/
Try using console.log() to examine values of your variables - then it will become apparent which actions your script takes.
Related
So I Want my page to redirect to different page when a specific value of select is chosen. Whether it changes the value or not. If the value is already some other value the on Change works fine but if the value is already selected as the value which redirects the page it doesn't works for example
<script>
$("select").on('change', function() {
if ($(this).val() == 'option2') {
var data = $(this).attr("data_val");
var sid = $(this).parent().parent().children()[3];
var sid_value = $(sid).children()[0].value;
window.location = 'new.php?data=' + data + '&sid=' + sid_value;
}});
</script>
if the select is set to option1 and i select option2 from the dropdown then the page redirects but when the option2 is already selected in the select and i open the dropdown again & click on option2 it doesn't redirect, please help me to achieve this.
Well i found a Workaround for this problem i'll post it here if anyone faces the same problem. Here's the code
<Script>
var click1Done = false;
$("select").on('click', function() {
customSelect($(this));
click1Done = true;
});
function customSelect(obj) {
el = obj[0];
if (click1Done && el.value === 'option2') {
click1Done = false;
//your code here to perform any extra task
window.location = 'new.php';
}
}</script>
Here i am seeing the no. of click on select if it is the second click on the desired option ('here option2') i redirect to the 2nd page else i don't.
consider this
$("select option").on('click', function () {
// your code here
});
I have a drop down box as shown :
When I change the subject, the alert box shown below appears:
Code :
$("#createquiz_subject").bind("change", (function() {
if(quiz.length !== 0){
var r = confirm("The questions selected will be cleared");
if (r === true) {
$("#leftValues").empty();
} else {
}
}
}));
If I click on OK, then the topic and lesson changes. The same happens when I click on cancel.
When the user clicks on cancel, I want the subject to remain the same which was present before changing it.
How do I carry out this functionality.
You can work around this by first remembering the currently selected section and then manually reverting to it.
var subject = $('#creatquiz_subject');
var currentSubj = subject.val();
subject.bind("change", (function() {
if (!quiz.length) { return; } // Better to just short-circuit here?
if (confirm("The questions selected will be cleared")) {
$("#leftValues").empty();
currentSubj = subject.val(); // Update the current subject var
} else {
subject.val(currentSubj); // Reset to current subject
}
}));
Only one way . Pseudocode is :
<script>
var lastvalue = null;
</script>
<select .... onmousedown="lastvalue = this.index">
....
</select>
oncancel
select.index = lastvalue
tweak the code as per your implementation and jquery used(if used)
What i'm trying to do here is if the selection is equal to value 10 the click function to be available only if selection is equal to 10. But when i change to other ex. category with different value the radio click function is still available. ?
I have 6 radio boxes with value 1,2,3,4,5,6 so what i want to do if value == 4 to slidedown another div while i'm in category with value 10.(selection).
How can i fix this problem ? Here is my sample code.
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
if(selection == '10'){
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown'+selection).slideUp();
} else {
$('#slidedown'+selection).slideDown();
}
});
});
Thanks, any help will be appreciated.
EDIT : I want to slideUp the currect div which is slided down by the category value if radio box with value 4 is checked.
You should have another selection var inside the click callback:
$('#category').on('change', function () {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
});
$("input:radio[name='checkbox']").click(function() {
var selection = $('#category').val(); //This does the trick
var radio = $(this).val();
if(radio == '4' && selection == '10') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Also, callbacks must be separated for not binding a new listener each time
Hope this helps. Cheers
Use the disabled property to enable and disable the radio buttons.
$('#category').change(function() {
var selection = $(this).val();
$('#slidedown'+selection).slideDown(200);
$('input:radio[name=checkbox]').prop('disabled', selection != '10');
});
$("input:radio[name='checkbox']").click(function() {
var radio = $(this).val();
if(radio == '4') {
$('#slidedown_another').slideUp();
} else {
$('#slidedown_another').slideDown();
}
});
Your code is adding a handler when the select has the correct value, but it never removes the handler when the select changes to a different value. Also, every time they select 10 it was adding another handler, so the handler would then run multiple times.
In a table, I have a row with two inputs - one select and one text. What I want to achieve is that if one has a value, then the other (on the same row) should disable. This works correctly onload when there is a value in the textbox, but doesn't seem to work when there is a value in only the select box.
As you can see in the example here: http://jsfiddle.net/anAgent/UBUhn/1/ the "change" event works correctly, but it doesn't work onload.
Any help would greatly be appreciated!
I'm working with jQuery 1.5.2 and with both Google Chrome and IE9
Update With Final Code
Thanks #scoopseven and #eicto for your input. Based on these two answers, here's the final code. I hope it helps someone else.
$(document).ready(function() {
$(".validation-compare").change(runRowValidation);
$(".validation-compare").each(runRowValidation);
});
function runRowValidation() {
var $me = $(this),
$other = $('.validation-compare',$me.closest("tr")).not($me),
mVal = $me.val(),
oVal =$other.val();
if(mVal != "" && oVal == "") {
$me.removeAttr('disabled');
$other.attr('disabled',1);
} else if(mVal == "" && oVal != "") {
$other.removeAttr('disabled');
$me.attr('disabled',1);
} else {
$other.removeAttr('disabled');
$me.removeAttr('disabled');
}
}
You can see it in action at: http://jsfiddle.net/anAgent/UBUhn/24/
i don't think that you you need to set the class valid, all you have to do is replacing
var $otherInput = $('.validation-compare', $parent).not('.valid');
by
var $otherInput = $('.validation-compare', $parent).not($me);
And this will resolve your problem on onload. Here is an example
var validme=function() {
var me=$(this);
me.removeClass('validation-compare');
if (me.val()) {
console.log(me);
me.addClass('valid');
me.parent().parent().find('.validation-compare').attr('disabled',1);
me.addClass('validation-compare');
return;
}
me.removeClass('valid');
if (me.parent().parent().find('.validation-compare.valid').length<1) {
me.parent().parent().find('.validation-compare').removeAttr('disabled'); }
me.addClass('validation-compare');
}
$('.validation-compare').each(validme);
$('.validation-compare').change(validme)
http://jsfiddle.net/UBUhn/22/
You need to separate out the function and call it on the click event and on page load. Something like this:
jQuery(function($){
function myFunction() {
// do somestuff
}
// myFunction needs to be called when select is clicked and when page is loaded
$('#someelement').click(myFunction);
$(document).ready(myFunction);
});
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to get the text of the selected option of a select using jquery?
I have the following script:
<select id = "people">
<option value = "0">Choose</option>
<option value = "1">John</option>
<option value = "2">David</option>
</select>
How Can I use jQuery to detect the value of the option that is currently selected?
i.e. (pseudo-ish code)
if(people.option.text == "Choose"){
//Alert - Please make a selection
}else{
//Valid - do something
}
EDIT: code not working
echo("<script>");
echo("$(document).ready(function(){");
echo("$(\"#go\").click(function(e){");
echo("var selText = $(\"#people option:selected\").text();");
echo("if(selText == \"Choose\"){");
echo("}else{");
echo("window.location.href = \"viewprofile.php\";");
echo("}");
echo("});");
echo("});");
echo("</script>");
It constantly triggers the else statement and navigates away...
EDIT: Got it working -> changed .text() and val()
From your example looks like you want to get the selected text, not value.
So have this:
var selText = $("#people option:selected").text();
if(selText == "Choose") {
//Alert - Please make a selection
} else {
//Valid - do something
}
To get selected value and check it, have such code:
var selValue = parseInt($("#people").val(), 10);
if (selValue == 0) {
//Alert - Please make a selection
} else {
//Valid - do something
}
if (jQuery('#people option:selected').val()=="Choose"){
}
else{
}
Check the value that is selected using val, then take the appropriate action. Shown below in a form submission handler to prevent form submission. You might also want to consider using the validate plugin for this particular case, making the field required, and having the default option have no value.
$(function() {
$('form').submit( function() {
var selectedPerson = $('#people').val();
if (!selectedPerson || selectedPerson == '0') {
alert('you must choose an option for people');
return false;
}
// continue form validation and submission
});
});
To get the value of the selected <option>, use:
$('select').val()
To get the HTML content of the selected <option>, use:
$'select :selected').html()
And to check if a certain <option> is selected, use:
if ($('option').is(':selected')) ...
How about this:
$("select option:selected").each(function () {
if($(this).text()=="Choose") ...
else ...
});
if ($('#people [value!=0]:selected').length > 0){
//selected
} else {
//not selected
}