I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?
Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.
If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.
Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.
Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).
Related
I hope someone can help me out with this issue. I have a jquery autocomplete box populated via AJAX. What the PHP on the server side does is lookup a specific client's contact number, based (obviously) on what you entered. If it doesn't find the contact number, it returns with "Continue typing to add the new client contact number".
Now this is working fine, I only want to know whether there is some way where, when that text is displayed, if the user hits tab, the option won't be selected and overwrite what has already been entered into the textbox, but simply move onto the next field.
Thanks for any help!
Look at the categories example for Autocomplete.
You can make your message a type of category header, and as such it wouldn't be selectable by the user.
http://jqueryui.com/autocomplete/#categories
The example works by implement their own _renderMenu method. I've done this and it wasn't too hard, but it did require a newer version of jQuery to work.
I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.
On a Jsp page I have some select elements which were disabled after a value was selected (Disabled them in javascript). Now when the form is submitted, I can not access those selected values in the action class.
I know for sure that this is caused by the select elements being disabled because, when I tried the same without making them disabled, it worked fine.
Now I don't understand why is this so. I thought maybe I should enable them before the form is submitted, but it does not seem a good idea.
I faced this problem while implementing this : Creating struts 2 forms dynamically on jsp using java script .
(You can find the code there. Although I don't think you will need the code, because it is clear where the problem is.)
Here I am able to access the values of text fields but I can not access the values of select elements.
I asked this question separately because I thought this is a different topic.
Thanks!!
Disabled fields by W3 specifications will not get posted on the server side so this issue is not related to the Struts2 but in generic an HTML way to go
Disabled controls
i am not sure why you want to use disabled control for your form.things can be done using readOnly attribute or use hidden fields
You can set them in hidden field through java script and pass it to action
I have a checkout form that will display a pop-up survey to ask why they haven't started filling out the form after 5 seconds. However, I need to be able to check whether the user has actually entered data as opposed to data entered by the browser's auto-fill feature (any pre-populated data set in the markup I specifically ignore in the javascript or jQuery).
Right now my solution is to have the setTimeout run a function which checks a variable (true or false) that is set to false on a jQuery .focus or .change event on the input types (input, select, textarea). However, since the javascript may load after the user is able to use the form elements, I have to check whether the user has entered data before the survey pops up.
Is it possible to differentiate between user-inputted data and browser-inputted data if the javascript loads after the user has done anything to the form fields?
If you really want to tell browser not to autofill it at all, you could use autocomplete attribute, but this is unfortunately an invalid attribute and thus will not validate. If you really need your HTML to validate, you can use jQuery to do just that for you:
$(your_form_selector).attr('autocomplete', 'off');
More discussion about autocomplete here
What about .keyup event for form?
var isFilledByUser = false;
$("#input").keyup(function(){
var isFilledByUser = true;
});
ok... this was mildly entertaining, but I definitely agree... this feature would be so annoying XD
http://jsfiddle.net/NTvrN/1/
but there you go... now type, foo!
I'm working on a project using Zend Framework.
I'm creating a form on which users can add a set of elements by pressing a + sign.
Zend framework uses subforms and decorators to get array of values from a form.
These will show when the page is displayed
How does the new fields created with Javascript integrate in that model?
The best demo of dynamically adding fields on the client to a Zend_Form with which I am familiar comes from Jeremy Kendall:
http://jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/
The upshot of the technique is to add/call a preValidation() method on the form to check the post for fields missing in the form. If it finds any such fields, then they are added to the form object. By the time isValid() and getValues() are called, all the Zend_Form_Element objects have already been attached to the form, so processing runs as normal.
One suggestion would be to define all input fields that you want to provide using zend form.
But when the form is displayed you could hide certain fields and make them visible by clicking on +.
I think this is the most simple approach because for adding decorators and stuff you would need to change php files on client side and this is not possible.
Another suggestion, you could define several forms. Clicking on + redirectes the user to another form with an added field.