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();
});
Related
I'm trying to make a drop down that links to the option once the user presses the submit button, but I'm getting weird results. It's worth mentioning that this is in Wordpress so I'm not sure if its affecting the results at all.
<form id="select-id">
<select name="page">
<option >Select Area</option>
<option value="/condo/etobicoke/">Etobicoke</option>
<option value="/condo/toronto/">Toronto</option>
<option value="/condo/north-york/">North York</option>
</select>
<input type="submit" value="Submit"">
</form>
<script>
$('#select-id').submit(function(e) {
e.preventDefault();
url = $('#select-id').val();
window.open(url);
});
</script>
The result for the first option is domainname.com?page=%2Fcondo%2Fetobicoke%2F
but I want domainname.com/condo/etobicoke/
You're grabbing the wrong value in your JavaScript. You need the field value, not the form value
$('#select-id').submit(function(e) {
e.preventDefault();
var url = $('[name="page"]').val();
window.open(url);
});
Check out this pen: https://codepen.io/xhynk/pen/VXePqM?editors=1111
I've changed it to console.log instead of window opening for demonstration purposes
The %2F is the same as a / character it's just been converted. Also if your domain is as domainname.com?page=%2Fcondo%2Fetobicoke%2F then you need to change your permalink structure in wordpress and maybe add rewrite functions if the link contains custom parameters.
https://codex.wordpress.org/Settings_Permalinks_Screen
https://codex.wordpress.org/Rewrite_API/add_rewrite_rule
Been working on this issue for a while now and I just cant get my head around it. There are a few similar answers but nothing that seems to tackle my exact issue.
So I have a form. The values from this are all going to be numbers. I want to capture the values inside an array to perform calculations on them before sending a seperate AJAX call with the new variables. Im really surprised at how hard this seems to be to get working.
My code should be outputting the values of the form into key/value pairs within array x, however this array just seems to be empty (contains {object Object} pairs for every form name/value pair.
Any ideas? If there is a better method to achieving this, i'm all ears (or eyes, whatever!). I guess an easy way would be to just bind this to a click rather than submit event, but I dont want to lose all the other user form submission abilities (pressing enter etc).
Javascript:
$('#zombieForm').submit(function(event) {
event.preventDefault()
var x = $(":input").serializeArray();
alert(x); //currently using a sandbox without console for this
});
HTML:
<form id="zombieForm" method="post">
<select name="multi2" required>
<option value=""></option>
<option value="100">placeholder value 4</option>
<option value="50">placeholder value 3</option>
<option value="25">placeholder value 2</option>
<option value="0">placeholder value 1</option>
</select>
<input type="submit" value="Submit" id="formButton" />
</form>
You could do something like this. Is this what you're after? Fiddle
$('#zombieForm').submit(function(event) {
event.preventDefault();
var yourArray = {};
$.each($(this).serializeArray(), function() {
yourArray[this.name] = this.value;
});
console.log(yourArray);
});
There is built-in autocomplete function as a part of the input element in all major browsers. It usually drops down when user starts typing. Is there a way of controlling the list? I mean something like
<input id="abc" type="text" />
<script>
//this does not work, obviously
var cars=["Saab","Volvo","BMW"];
document.getElementById("abc").autocomplete.list=cars;
</script>
... without using JQuery ... It's probably dream-of feature, isn't it?
Nobody said it is not possible so far :)
As suggested in comments try HTML5's datalist
<input type="text" id="country" list="someCountries" />
<datalist id="someCountries">
<option label="United Stated" value="USA"></option>
<option label="United Kingdom" value="UK"></option>
<option label="Uruguay" value="URU"></option>
<option label="Brazil" value="BRA"></option>
<option label="Russia" value="RUS"></option>
</datalist>
More here
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.
I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?
<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.
Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp
<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>
You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>