I am using a selectbox:
<select name="priority" id="priority">
<option value="4">Low</option>
<option value="3" selected="selected">Normal</option>
<option value="2">High</option>
<option value="1">Emergency</option>
</select>
When user select "Emergency", then a confirmation box opens and if user confirm, then "Emergency" is selected. Otherwise "Normal" should be selected. For This, I am using jquery:
$(document).ready(function() {
$('#priority').change(function(){
if($(this).val()=='1'){
if(confirm("Are you sure this is emergency?")){
return true;
}
else{
//here some code is needed to select "Normal".
}
}
});
});
Now, How can I do that?
Since you're just returning in the confirmation case, you can shorten your logic down to this:
$(function() {
$('#priority').change(function(){
if($(this).val()=='1' && !confirm("Are you sure this is emergency?")){
$(this).val('3');
}
});
});
You can give it a try here.
else{
$(this).find("option[value=3]").attr("selected","selected");
//and trigger change after that if you need it
$(this).change();
}
The following code snippet should do what you are after - it selects the priority select element by ID and then sets the selected value to 3.
else
{
$('#priority').val(3);
}
Related
I am working on a form. One of my colleagues have used the are_you_sure.js which confirms to leave before saving a form.
Now the problem is if I have a dropdown say like this
<script type="text/javascript">
function get_cpc(cst_type)
{
if(cst_type==0 || cst_type==1)
{
$("#camp_cpc").show();
$("#camp_cpc").val("'.(!empty( $html['camp_cpc'] )?(double)$html['camp_cpc']:'').'");
}
else
{
$("#camp_cpc").hide();
$("#camp_cpc").val("0");
}
}
</script>
<select name="cost_type" id="cost_type" onchange="get_cpc(this.value);" class="ultra-select">
<option value="0">CPC</option>
<option value="1" selected="selected">CPA</option>
<option value="2">Do Not Track</option>
</select>
When I am switching from non-selected options to selected option, then the change of state takes too much time
This means if I am selecting CPC/Do Not Track from CPA, then the dropdown works fast. But if I am selecting CPA from CPC/Do Not Track, then the state change takes almost 4 seconds..
That's due to the jquery.are-you-sure.js. So, I need to remove the select from the dropdown. How can I achieve this?
I put this code, $("select option").prop("selected", false);
but it doesn't even let me select any other option.
I'm not sure what you mean exacly, but can you share the are_you_sure.js file?¿
Also I have change your code maybe it helps and it´s a better way to do it. because it´s not a good practice use onchange(), so remove onchange from your html and do this, link: http://jsfiddle.net/hg5nz1w6/1/
js:
$(document).ready(function(){
$('#cost_type').on('change', function(){
var cst_type = $(this).val();
if(cst_type==0 || cst_type==1)
{
$("#camp_cpc").val("'.(!empty( $html['camp_cpc'] )?(double)$html['camp_cpc']:'').'");
$("#camp_cpc").show();
}
else
{
$("#camp_cpc").hide();
$("#camp_cpc").val("0");
}
});
});
html:
<select name="cost_type" id="cost_type" class="ultra-select">
<option value="0">CPC</option>
<option value="1" selected="selected">CPA</option>
<option value="2">Do Not Track</option>
</select>
Below you can see some examples to remove the selected:
document.getElementById('myselect').selectedIndex = -1;
you can deselect all the options:
$("select").val([]);
or
$("select option").prop("selected", false);
Hope it´s helps!
I have a dropdown list,
<select id="bi_tool_y_axis" name="bi_tool[y_axis]">
<option value="0">Vote Count</option>
<option selected="selected" value="1">Choices of Poll</option>
<option value="2">Location</option>
</select>
and a jquery function to change option text of value 2 in the above dropdown list
function change_text_of_value_2(new_text){
// I want to change text "Location" with new_text in the dropdown list
}
How can I do this? Please help..
why not simply
$("#bi_tool_y_axis option[value='2']").text("anything else");
And this you call into function (your function and put the parameter into text function);
Or
function change_text(optionValue, new_text){
$("#bi_tool_y_axis option[value='"+optionValue+"']").text(new_text);
}
try this
function change_text_of_value_2(new_text){
$("#bi_tool_y_axis option[value='2']").text(new_text);
}
Try this
$(function() {
$('#bi_tool_y_axis').on('change', function() {
if ($(this).val() == '2') {
change_text_of_value_2($(this), "New_Text_Added")
}
});
});
function change_text_of_value_2($elem, new_text) {
$elem.find("option[value='2']").text(new_text);
}
Check FIDDLE
I have a drop-down menu in my page, it's something like this:
<select id="my_dropdown" name="my_dropdown">
<option value="one">ONE</option>
<option value="two">TWO</option>
<option value="three">THREE</option>
</select>
<input type="text" size="10" id="foobar" value="0" />
And my jQuery code is:
$('#foobar').keyup(function(){
notOptionOne();
}
function notOptionOne() {
if ( !$('#my_dropdown').val('one') ) {
alert('Option ONE was not selected');
}
}
No matter what is the selection on my dropdown, when I enter any text on the input box, it will show up the alert box and will reset my dropdown selection back to one. I want to keep my selection on where I leave when I close the alert box or do anything else. What is causing this behaviour?
function notOptionOne() {
if ( $('#my_dropdown').val()!='one' ) {
alert('Option ONE was not selected');
}
}
The val() function in jQuery can both get a value or set a value. when you pass a parameter to it, what jQuery do is to set the value of the control. If no parameter, get value.
Try this:
$('#my_dropdown').val() !== 'one'
$('#my_dropdown').val('one') is jquery wrapper, array-like object. That is why !$('#my_dropdown').val('one') is always false and you don't get an alert.
$('#my_dropdown').val('one') will set #my_dropdown's value as one (even in if construction).
You should get the value of #my_dropdown element and compare it with string one:
function notOptionOne() {
if ($('#my_dropdown').val() != "one") {
alert('Option ONE was not selected');
}
}
try this:
$('#my_dropdown').change(function(){
if ($(this).val() != 'one') {
alert('Option ONE was not selected');
}
})
I'm trying to get an alert message with Yes/No option, where clicking on 'Yes' reloads a another drop-down option, and 'No' would revert back to the previous selection. Here is what I'm trying to say (obviously doesn't work):
<select size="1" name="m" id="m">
<option selected value="1">apple</option>
<option value="2">ball</option>
<option value="3">cat</option>
<option value="4">dog</option>
<option value="5">egg</option>
</select>
$('#m').change(function() {
var answer = confirm("this will change your selection.");
if (answer) { // ie, if i click 'OK'
location.reload(); // reload the <select> option below to "selected"
} else {
break; // revert back to the previous selection
}
});
<select size="1" name="a" id="a">
<option selected value="1">aaa</option>
<option value="2">bbb</option>
<option value="3">ccc</option>
</select>
Many thanks in advance. Feel free to click, and edit.
I'm not too sure what you are trying to accomplish... is it this?
var _selected = $('#m').val();
$('#m').change(function() {
var answer = confirm("this will change your selection.");
if (answer) { // ie, if i click 'OK'
_selected = $(this).val();
$('#a').val(_selected);
} else {
$(this).val(_selected);
}
});
JavaScript's confirm() only displays OK and Cancel, not Yes or No.
Could you return false instead of break, because you are in a function?
Also, returning false does not cancel the change event. What you will need to do is store the previous selectedIndex, and if you have the confirm() return false, then set the selectedIndex back to the previous one.
Also, I hope you are wrapping that jQuery inside script elements and inside a $(document).ready().
Try removing the
break;
I tried to run the code and Firebug halts the code when it gets to that part
Best regards,
So I want to enable a submit button whenever an option in my select box (#purchase) is selected (so long as the selection is not the default value.
Here is the jquery code I put together, which is apparently not very good. :)
$(document).ready(function(){
$('input[type=\"submit\"]').attr('disabled','disabled');
$('#purchase').change(function(){
$('input[type=\"submit\"]').attr('disabled', 'enabled');
});
});
Here is my simple little form...
<input type='submit' id='submit' value='Purchase'>
<select name='purchase' id='purchase'>
<OPTION value='default' DEFAULT>default</OPTION>
<OPTION value='small'>11 x 14" Print - $17.00</OPTION>
<OPTION value='big'>20 x 30" Print - $40.00</OPTION>
</select>
Can anybody give me a push in the right direction? :)
Thanks!
To disable you can use
$('#submit').attr('disabled', 'disabled');
and for enabling
$('#submit').removeAttr('disabled');
$(document).ready(function(){
$('input[type=\"submit\"]').attr('disabled','disabled');
$('#purchase').change(function(){
if($('#purchase').val() != 'default') {
$('input[type=\"submit\"]').removeAttr('disabled');
}
});
});
Although, you could probably split the method out into it's own function, and set the button disabled from the start without using document ready.
$(document).ready(function(){ $('#purchase').bind('change', 'EnableSubmit'); });
function EnableSubmit() {
if($('#purchase').val() != 'default') {
$('input[type=submit]').removeAttr('disabled');
}
}