I am currently working on a page that has a date picker for one of the field.
One of the requirements by my client is to prevent the user from editing the field manually. Only the date picker would be possible to be used. (jQuery DatePicker)
I had in mind to disable the field and use an hidden field to store the data (disabled from object ton send data on post). This sounds a bit wacky for something that could be done by javascript I'm pretty sure.
So the big question, in javascript is it possible to prevent manual edition of a field without stopping datepicker plugin?
Instead of disabling the field, just add the readonly attribute. It will have a similar effect as disabling the field, but without the need to store the value to a hidden field.
You can also access this property with javascript if needed:
document.getElementById("myTextBoxID").readOnly = true;
Related
When a input textbox is disabled, you can not enter any values into the Inputbox.
However if you use google chrome and right click on the inputbox then click on inspect, you can change the values.
How do you stop people from editing a disabled inputbox?
You can't. The only thing you can (and always should) do is validate user's input on server.
There is no way you can stop people from changing its state and sending the data. There are two way you can do this
Do not display the disabled input at all. Just like what Zend_Form does.
Check the field when the form was submitted and remove it.
As I known, the disabled input value won't be posted to server side. So if someone change the value using tools, the modified data will not be posted.
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 form on my website that uses spry validation widgets. I have recently added a date feature that uses 3 drop down boxes (day, month, year). I've used the onchange feature of the selection boxes to update a text field with the date and used spry validation on that input box to make sure its a valid date.
The JavaScript update function works but the spry does not consider the input text field changed. If I manually input the same date in the same format into the field the validation works, it's just when the field is changed dynamically via JavaScript that it does not work.
Any ideas why this is happening and how to fix it?
Here's what worked for me:
Say you have sprytextfield1 as the variable for your validation text field. Then use
sprytextfield1.removeHint()
sprytextfield1.setValue('your value goes here')
sprytextfield1.validate()
I figured it out. When I finish updating the input field via javascript I needed to add this line of text to trigger the spry validation.
spryNameofSpry.validate();
Hope this helps someone someday.
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 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).