When the user selects an autocomplete item from an input element, I can't seem to get the form to submit the selected value. Instead, it submits the partially typed text. I'm using the select: feature of autocomplete to no avail. #scustnm is my input element and #a_comp is the form surrounding it. Thanks!
if(vsvcus != "")
{
$( "#scustnm" ).autocomplete(
{
source: "S205ai.pgm?task=autoacustfil&WCODE=" + vscmpy + "&vcustnm=" + vsvcus,
minLength: 1,
select: function() {$("#a_comp").submit();}
});
}
I would suggest using a $.post() request instead of a form submit. So instead of having:
select: function(){$("a_comp").submit();} you would write something like:
select: function() { $.post("urlToPostDataTo"), {dataID1: $("#dataID1"), dataID2: $("#dataID2")}, function(data, callback){ //do stuff with the output of the page}}
I believe when you submit the form, the form most likely uses just the input text field instead of the autocomplete suggestion. By using a $.post() request you have total control of exactly what data is posted when the user clicks on the select option of autocomplete. Hope this helps.
You would need to assign the value back to the input that has the autocomplete on it in order for the form to read it in.
Inside of your select function, you would need something like this:
$( "#scustnm" ).val( /*Return Value Here*/ );
The form doesn't know what you've selected, it's selecting the value from the input box which never gets updated by your AJAX call. Because it only knows what you've typed in the box, that is the value that gets submitted with the form.
Related
In my program, I have a table which I filter with an input field. You type something in the search/input field and the table gets filtered immediately without pressing enter.
Now I wanted to add autocomplete to this input field and it works but there is one problem. When I start typing something into the input field, I get suggestions. Now I can click on a suggestion and it gets written in the input field. That works just fine. But my table doesn't get filtered until I press enter and that's my problem. How do I make it that it automatically submits it/filters the table without pressing enter after selecting a suggestion?
Here are my two functions for the filtering and the autocomplete.
$("#searchInput").autocomplete({
source: availableTags, //array with all possible search results of the table
});
$(document).ready(function(){
$("#searchInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#contractTable tr").filter(function(){
$(this).toggle($(this).find(".target").text().toLowerCase().indexOf(value) > -1) // I only want to search for two specific cells of every row thats why I use find(".target")
});
});
});
I hope you get what I'm trying to achieve and on a side note I'm pretty new to JavaScript and jQuery so please have mercy with me :)
Here I fixed that for you:
https://jsfiddle.net/eakumopw/1/
Your Problem is you only hooked the filtering event to "keyup". But selecting a autocomplete suggestions is no key-up event. Adding another event won't solve the problem either because the suggestions-box is a different element.
I check which events jquery-autocomplete supports (http://tutorialspark.com/jqueryUI/jQuery_UI_AutoComplete_Events.php) and found the close() event to be the solution for me.
I outsourced the filtering process into a new function doFilter( value ) and made a call to that function on the close event of jquery-autcomplete.
$("#myInput").autocomplete({
source: availableTags,
close: function(event, ui) {
console.log("close");
doFilter($("#myInput").val().toLowerCase());
}
});
I have a scenario where, on select of an option in select drop down, the form should submit.
For that I have written a Jquery function
function xxx(val) {
$("#form").submit();}
And the tag is as follows
<input type="text" name="xxx_txt" id="id_xxx" title="xxx" placeholder="xxx" value="$!{query}" ">
And I am populating my text field dynamically with values
$("#id_xxx").autocomplete({
source: sourcedata,
minLength: 1
})
But on select, nothing happens because, the field is not a select dropdown, but a normal text field , to which values are assigned, thus making it a select dropdown.
Basically I am writing a search function similar to google, where the search triggers , on a selection.
Kindly suggest.
try onChange event on your input element
$("input#id_xxx").change(function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
This will trigger when input element lost focus
for every change on input element:
$("input#id_xxx").on("input", function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
I have an AJAX callback:
HTML:
<a onCLick="loadXMLDoc(id1,id2)">(Add)</a>
This calls an AJAX function that calls back a basic html input field in place of the above "(Add)"
onChange in this input field performs another AJAX callback that loads user input into a database.
What I am trying to do is once the field is filled out (or not filled out) and the field is blurred, it either goes back to the original or the newly updated value (but not any longer an input field).
I have searched around for a while and have come up with nothing. I am also new to javascript and AJAX. If it helps, I am using PHP mainly in this application.
Thanks
ADDITION
This is what I am trying to achieve:
The page lists different entries in table format.
There is a specific field that either has an id (stored in the database), or if field is null (in database) that field will display a button to add the id.
When pressed, the button calls a function which calls back an input field, the this replaces the previous "add" button. The AJAX callback places the input field in place of the "add" button.
This is where I need the help: After the user inputs the ID (or decides not to) and once the field no longer has focus, it changes from an input field back to what it was or the newly enter id. I am trying to do all this without refreshing the page.
I still don't follow exactly, but hopefully this will show you a means of creating/changing DOM elements in response to events like you've mentioned:
$(document).ready(function() {
$("#container").on("blur", ".name", function(e) {
var val = $(this).val();
if (!val) {
$(this).closest(".row").html("<button class='add'>Add</button>");
} else {
$(this).closest(".row").html("<span class='label'>Name: </span><span>" + val + "</span>");
}
});
$("#container").on("click", ".add", function(e) {
var html = "<span class='label'>New Name: </span><input class='name' type='text' />";
var row = $(this).closest(".row").html(html);
row.find("input").focus();
});
});
Working demo: http://jsfiddle.net/jfriend00/01ajd0y9/
I used JQuery Autocomplete component to show the values from database. In this, the user can select the item by typing some text. In case, if the user not select any of the options shown below, the field is filled with value which user typed. But I want make that field such way that user can only select the value listed in Autocomplete. It should not contain any typed text. Is there any possible way to do it?
Yes possible.
1) Using change event you can clear the textbox values if no options are selected.
$("#tags").autocomplete({
source: availableTags,
change: function (event, ui) {
if (!ui.item) {
$(this).val("");
// Handle the error
}
}
});
JSFiddle
2) Not sure, have you been aware of [autocomplete-combo], this suits for your issue.(http://jqueryui.com/autocomplete/#combobox)
Why dont you try out Selectize
on that site Search for "Max Items" this will fulfill your requirment
It allow you to only select from whatever in the list
I have a form with multiple inputs, select boxes, and a textarea. I would like to have the submit button be disabled until all of the fields that I designate as required are filled with a value. And after they are all filled, should a field that WAS field get erased by the user, I would like the submit button to turn back to disabled again.
How can I accomplish this with jQuery?
Guess my first instinct would be to run a function whenever the user starts modifying any of the inputs. Something like this:
$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
inspectAllInputFields();
});
We then would have a function that checks every input and if they're validated then enable the submit button...
function inspectAllInputFields(){
var count = 0;
$('.requiredInput').each(function(i){
if( $(this).val() === '') {
//show a warning?
count++;
}
if(count == 0){
$('#submitBtn').prop('disabled', false);
}else {
$('#submitBtn').prop('disabled', true);
}
});
}
You may also want to add a call to the inspect function on page-load that way if the input values are stored or your other code is populating the data it will still work correctly.
inspectAllInputFields();
Hope this helps,
~Matt
Here's something comprehensive, just because:
$(document).ready(function() {
$form = $('#formid'); // cache
$form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
$form.find(':input').change(function() { // monitor all inputs for changes
var disable = false;
$form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
if ($.trim(el.value) === '') {
disable = true; // disable submit if any of them are still blank
}
});
$form.find(':input[type="submit"]').prop('disabled', disable);
});
});
http://jsfiddle.net/mblase75/xtPhk/1/
Set the disabled attribute on the submit button. Like:
$('input:submit').attr('disabled', 'disabled');
And use the .change() event on your form fields.
Start with the button disabled (obviously). Bind an onkeyup event to each required text input, and an onchange or onclick to the select boxes (and any radio buttons/checkboxes), and when it fires, check whether all required inputs are filled. If so, enable the button. If not, disable it.
There is one loophole here, though. Users can delete the value of a text field without triggering the onkeyup event by using the mouse to "cut" the text out, or by holding down the delete/backspace key once they have deleted it all, and clicking the button before deleting it.
You can get around the second by either
disabling the button with onkeydown and checking if it is ok on onkeyup
checking for validity when the button is clicked
An idea from me:
Define a variable -with global scope- and add the value true- Write a submit function within your check the value above varibale. Evalue the the submit event only, if the value is true.
Write a function which ckecks all value from input fields and select fields. Checking the length of value to zero. if the value length of one field zero then change the value of the global variable to false.
After that, add to all input fields the event 'onKeydown' or 'onKeyUp' and to all select boxes the event 'onChange'.
I recommend taking a slightly different approach and using jquery's validation http://docs.jquery.com/Plugins/validation. The tactic you are suggesting is prone to security holes. The user could easily using firebug enable that button and then submit the form.
Using jquery validation is clean and it allows you to show error messages under the required fields if so desired on submit.