Let's say I've got a drop down like this:
<div class="selector">
<select name="perPage">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="25">25</option>
</select>
</div>
I'm know PHP and Javascript (jQuery) so a solution in either would be just fine. But I've got a submit button underneath it, and instead of that, I was wondering if there's a way to click the drop down, pick your value, then have it send that automatically with OUT having to hit a submit?
You could use the 'onchange' element of the select:
<select name="dropdown" id="dropdown" onchange="this.form.submit()">
This only uses javascript without the need of loading the whole JQuery library - unless you use JQuery for other functions on the site.
You can listen to the change event using jQuery and submit the parent form automatically. Something like this:
$('.selector select[name=perPage]').on('change', function(e) {
$(e.currentTarget).closest('form').submit();
});
Assign an id to to select, e.g. selectID, then add jQuery of the form:
$('#selectID').change(function(){
this.form.submit()
});
$('select[name="perPage"]').on('change', submitForm);
where submitForm is a function that submits the form.
Related
I am using jQuery .load to load different HTML files into my webpage using a dropdown menu. Each dropdown selection calls the corresponding file. My target div is <div id="targetPane"></div> to load the file. That works fine. I am looking to clean up the code so I dont have to write $('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );}); 50 or so times.
The naming convention is that the #f1 will call inc_1.html, #f2 will call inc_2.html and so on. Maybe a solution using a for loop or ('option:selected',this) ? Thanks
$(document).ready(function () {
$('#f1').click(function(){$('#targetPane').load( 'includes/inc_1.html' );});
$('#f2').click(function(){$('#targetPane').load( 'includes/inc_2.html' );});
..
..
..
$('#f50').click(function(){$('#targetPane').load( 'includes/inc_50.html' );});
});
HTML
<form name="courseCalc">
<select name="myCourses"
OnChange="location.href=courseCalc.myCourses.options[selectedIndex].value">
<option selected>Please Select...</option>
<option id="f1" value="#">Item 1</option>
...
<option id="f50" value="#">Item 1</option>
</select>
</form>
Firstly, note that when working with select elements you are best off using the change event of the parent select element instead of listening for click on the option. It's better practice, more widely supported in various browsers, and follows accessibility guidelines.
With regard to your question, the technique you're looking for is called 'Don't Repeat Yourself', or DRY for short. To achieve it in this case you can hook the change event handler and use get a reference to the select from the Event object passed to the handler. You can amend the HTML to store the URL in the value attribute and then provide it as the argument to load(), like this:
<form name="courseCalc">
<select name="myCourses" id="courses">
<option selected>Please Select...
<option value="includes/inc_1.html">Item 1</option>
<option value="includes/inc_2.html">Item 2</option>
<!-- ... -->
<option value="includes/inc_50.html">Item 50</option>
</select>
</form>
jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
});
});
Note that I added an id to the select element to make it easier to retrieve the element in the example, but any selector would work.
I have a dialog with multiple tabs, the first tab has a list ("SELECT") when a selection is made from the list the number of tabs may change as a result of the callback attached to the list.
In my source I the list callback is attached with:
$("#listID").bind("change", function() {
//Do something
});
In code I want to change the list selection and trigger calling of the change callback. I've tried:
$("#listID").val(3); //3 is one of the valid option values
This didn't result in the change callback being called so I added:
$("#listID").change();
After the setting of the value, this doesn't work either, if I look at the list the high light has not moved.
I've searched online and what I've done should work but it doesn't. What haven't I done?
Here is the HTML:
<select id="listID" size="11">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
Should work fine doing $("#listID").val(3).change()
Note that bind() is deprecated and you should use on()
$("#listID").on("change", function() {
console.log(`Changed value to ${this.value}`)
});
$("#listID").val(3).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="listID">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
If it's not working there is something missing in question as to why
$("#listID").val(2).trigger('change'); //to trigger the change event with value 2
I have a <select> tag on my site that when I change it submits the form and goes to the page in question where I can use the $_POST variable.
<form method='POST' action='myURL'>
<select onchange='this.form.submit();'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
</form>
This is fine and works as intended but if someone is on the page and refreshes it I don't want to have to have the warning for resubmitting the form.
So what I was trying to do is remove the form element and have something like this and I can use $_GET instead of $_POST.
<select onchange='window.location.href="myURL?var=this.value";'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
However, this redirects to the page but the $_GET variable is literally this.value.
Is there another way of getting this to work or will I need to write an external piece of JS for this?
Note JS isn't my language, the snippets above are all being rendered via PHP
You've hardcoded the string - just do this instead:
<select onchange='window.location.href=("myURL?var=" + this.value);'>
I would suggest to you to avoid the use of inline-events as onchange and use the addEventListener() method instead to attach the change event.
So first give you select tag an identifier (id or class) then attach the event using this identifier like :
<select id="my-select">
Then in the JS part it could be attached like :
document.querySelector('#my-select').addEventListener('change', function(){
window.location.href = "myURL?var=" + this.value;
})
Or if you could use jQuery it will be :
$('#my-select').change(function(){
window.location.href = "myURL?var=" + $(this).val();
})
In a HTML form, I use a drop-down list like this:
<select onchange="send()">
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c">Option C</option>
</select>
When the user changes the selected entry, send() is called, which basically uses jQuery.ajax(...) to send the new value to the server. This works fine.
When the transmission fails for some reason, the user is informed about the error. Most users will then select the same entry again to retry. Now the problem is that this will not trigger the onchange event again because the value hasn't changed. What would be the best way to deal with this?
Try this
HTML
<select id="chg">
<option>a</option>
<option selected>b</option>
<option>c</option>
</select>
Script
$("select#chg").mouseup(function() {
var open = $(this).data("isopen");
if(open) {
alert($(this).val());
}
$(this).data("isopen", !open);
});
DEMO
You can create a empty value option
<option value=''></option>
Which is by default selected as first load, When error occurs for any selection you can select 'empty' option from select box. So for next time user will need to selection option and your 'send()' function will call.
// Selection empty option by code
$('#selectBoxId').val('');
maybe you can use onclick event
How to convert the onchange="this.form.submit()" to jQuery format?
<form action="process.php" method="post">
<select name="qty" onchange="this.form.submit()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
I got a problem because some of browser will do nothing on the process.php if use onchange="this.form.submit()"
Let me know..
Like this:
$('select[name="qty"]').change(function(){
$(this).parents('form').submit();
});
You don't need to do anything. Whilst you can change this.form.submit() to $(this).closest('form').submit(), this will have no effect (apart from being slightly less readable) as all jQuery will do with that will be to call this.form.submit().
If you have a problem with submitting the form from plain JavaScript, you will still have the same problem submitting it with jQuery. What exactly is that problem?
In any case you should generally not use auto-submitting select boxes. They break keyboard accessibility (since IE fires onchange prematurely from keyboard use) and they interact poorly with the back button.
such questions always remember me of things like this. why do you want to use jquery for such a simple thing? give a name to your form and do document.myform.submit(); (which will work in IE3.0+, FF1.0+, Safari1.0+, Opera5.12+, Konqueror3.1+ ... (how about jQuery?)).
add an id to form and write:
$('#formid select[name=qty]').change(function(){
$('#formid').submit();
});