This is my code: http://jsfiddle.net/47apf/
It should submit the form on select change but it doesnt do anything
$(function() {
$('#candidate_filter').change(function() {
this.form.submit();
});
});
Can anyone please explain why this code doesn't work?
Well, you don't need the .form in this case.
$(function() {
$('#candidate_filter').change(function() {
this.submit();
});
});
Here, this itself is the form.
Write this:
$('#candidate_filter').change(function() {
$(this).trigger('submit');
});
Updated fiddle here.
Try this
$('#candidate_filter').change(function() {
//alert("hii");
this.submit();
});
Fiddle: fiddle
You need to assign id of drop down as below:
<form id="candidate_filter">
<select name="vacancy" id="candidate_filter1">
<option value="all">Any Vacancy</option>
<option value="1">Engineering lk;lk;</option>
</select>
<select name="status" id="candidate_filter2">
<option value="all">Any Status</option>
<option value="open">Open for applications</option>
<option value="closed">Closed for applications</option>
<option value="inactive">Inactive</option>
</select>
<select name="date">
<option value="all">Any Date</option>
<option value="today">Today</option>
<option value="3">3 days</option>
<option value="7">This week</option>
</select>
<select name="consideration" id="candidate_filter3">
<option value="all">Any Consideration</option>
<option value="qualified">Qualified</option>
<option value="rejected">Rejected</option>
</select>
<input type="submit">
</form>
JS
$(function() {
$('select[id^="candidate_filter"]').change(function() {
this.form.submit();
});
});
DEMO
You have to submit the form like this: $('#candidate_filter').submit();
Here is a working JSFiddle: http://jsfiddle.net/47apf/5/
JQuery
$(function() {
$('#candidate_filter').change(function() {
alert("change event catched");
$('#candidate_filter').submit();
});
});
You can do like this in jQuery.
Put a class on your select, and bind the event onchange
$('.candidateList').on('change', function(evt){
$('#candidate_filter').submit();
});
http://jsfiddle.net/darksioul/4ygAg/2/
Try:
$(function() {
$('#candidate_filter select[name="vacancy"]').change(function() {
$('#candidate_filter').submit();
});
});
Inside jQuery selectors, the this word references to the selected element on DOM, in you original code, $('#candidate_filter') represents the FORM element. Adding a second reference you have a better approach to what you desire $('#candidate_filter select[name="vacancy"]'). And to submit the form, you need to point especifically to the FORM element.
Related
I am trying to display select box when user input some values in the textbox , I tried using onchange property of jquery but its not working.
Below is my code
$(document).ready(function() {
$("#total_enter").change(function() {
$(".gst_sel_wrap").css("display", "block");
});
})
.gst_sel_wrap {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
Try using the jQuery keydown method: https://api.jquery.com/keydown/
I also added some code to hide the dropdown in the beginning, so the effect becomes obvious.
$(document).ready(function(){
$(".gst_sel_wrap").hide();
$("#total_enter").keydown(function(){
$(".gst_sel_wrap").show();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
You can use either keyup or keydown or both as I do here:
$(document).ready(function() {
$("#total_enter").on("keyup keydown",function() {
$(".gst_sel_wrap").css("display", "block");
});
})
.gst_sel_wrap {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
To achieve this you can use the input event, as it fires when a key is pressed and also when a value is copy/pasted in. You should also check the value of the element to ensure that it isn't empty, as the value can be deleted, when I would assume your select should be hidden again.
Finally, note that you can use toggle() to hide or show the select based on the given value, in a more succinct way. Try this:
$(document).ready(function() {
$("#total_enter").on('input', function() {
$(".gst_sel_wrap").toggle(this.value.trim() != '');
});
})
.gst_sel_wrap {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap_box">
<input type="text" name="total_enter" id="total_enter">
<select class="gst_sel_wrap">
<option>GST SLABS</option>
<option value="">0%</option>
<option value="">5%</option>
<option value="">12%</option>
<option value="">18%</option>
<option value="">28%</option>
</select>
</div>
Here is the simple code which I am trying on js fiddle:
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
$(function () {
$(document).on('click', '.pid', function () {
alert('here');
});
});
Click on http://jsfiddle.net/QRVSw/16/
The click event applies to the whole select element, not to the individual options. Also it's better to use the change event which triggers after making a selection, in contrast to the click event, which triggers as soon as you click.
In addition, you don't need to wrap your code to prepare it for OnReady. With this on call, you bind the event to the document, which is already available, even if the select object itself isn't yet.
So, your code could be simplified (and made working) like this:
$(document).on('change', '#test', function () {
alert('here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
You could try to make use of the onchange event for select elements:
$(function () {
$(document).on('change', '#test', function () {
alert('here');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
I want the user to click the select box and when have selected any option redirect to index.php?id={variableId}&itemId={secondVariableId}
Like:
<select name="select">
<option value="id=1&itemId=2">One</option>
<option value="id=1&itemId=3">One</option>
<option value="id=2&itemId=1">One</option>
[...]
</select>
But, I can not imagine where to start
<select name="select" onchange="window.location='index.php?' + this.value;">
<option value="default">- select -</option>
<option value="id=1&itemId=2">One</option>
<option value="id=1&itemId=3">One</option>
<option value="id=2&itemId=1">One</option>
[...]
</select>
You can use the "onChange()" function, but does not work properly in some versions of IE, as I remember.
I think this is what you want (if i'm understanding correctly and assuming jquery is being used).
$("select").on("change", function() {
window.location = 'index.php?' + $(this).val();
});
What you can do is add the option multiple=yes to your select tag. When this is posted back, it will be in an array. Here's a good sample that you can test with: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple
Hiya this might help: sample demo http://jsfiddle.net/5NCQg/34/
Jquery COde
$(document).ready(function () {
var url = "http://forum.jquery.com?" // in this case your URL
$("select#foobar").change(function() {
alert('change');
url= url + $(this).val();
alert(url);
window.location = url;
});
});
HTML
<form id="temp1">
<select id="foobar">
<option value="nothing"> --select-- </option>
<option value="id=foo&itemid=bar"> click1 </option>
<option value="id=foo&itemid=bar"> click2 </option>
</select>
</form>
CHeers!
I have
<div id="myselect">
<select>
<option value="0">1</option>
<option value="1">2</option>
</select>
</div>
Im trying to get the value of the select on blur.
So far I have:
Event.observe('#myselect select', 'blur', function(event) {
//get value
});
Please advise!
try this
$('myselect').down('select').observe('blur', function(e){
alert('blur');
});