Why is a user checking a box different than doing it programmatically? - javascript

I'm playing around in the Chrome Dev Tools console and I noticed that when I physically click a checkbox with my mouse and when I call $('input.checkbox').prop('checked',true), the end result is aesthetically the same but not in the back end.
For example let's say there's a form that submits the user's gender. If I click the checkbox next to 'Male' and hit submit, the system'll record the change, but if I were to call $('input.checkbox#male').prop('checked',true) and hit submit it doesn't record the change in the back end.
Does doing it programmatically not change the state or is there something on their end that specifically was done to forbid changing the state programmatically?

That is most likely because event listeners onClick, onChange and friends are only triggered on user actions, not when you change some state programmatically.
The actual form data that gets submitted should be the identical, though, no matter how you arrived at setting the form input values, and how you trigger the submission. In your case, maybe you have some event handlers setting some hidden fields?

There's likely a click or change listener that does something necessary before submitting the results. Try using $('input.checkbox#male').click() instead of $('input.checkbox#male').prop('checked',true)

Related

preventDefault() doesn't work after AJAX request

I am using PreventDefault(), for the submit event, in case they do not find changes in my input, so far so good, the problem is that after making the AJAX request, (I do not reload the page, only DIV), the user can press the submit button if you make any changes.
I would like the PreventDefault to continue working after each registration after the AJAX request, since it is only activated again if the page is reloaded
It would be much easier if I can see your code but instead of preventDefault(), you need to manage state changes within your input and then based on the state (whether it is empty or has string or type of data you are getting), you can disable or enable your button.

Lotus Notes:Web page refresh restriction on attachment upload

I have a situation, in which I want to restrict my web page to refresh after I attach a document.
The secnerio is there is some hide when condition written on OnLoad of the Form using javascript, and as soon as the form loads the hide when is active but below that we have more hide when on the basis of selection of a drop down, that is also working, but if I attach a document the web page refreshes and the onload triggers, which further enables the first hide-whne and then again I have to select from drop-down to enable the next hide-when.
Please help if we can restrict web-page refresh after attachment upload.
It sounds like the problem might be more that you have to re-select the drop-down to get the hide-when on that to work after a refresh ? That is, the value is already selected, so there's no change, so the hide-when isn't triggered ?
If so, you probably need to package up the drop-down's hide-when code into a function (if it isn't aleready) and always call that during onload so that if the page refreshes, all hide-when is honoured.
That's assuming the hide-when resulting form the drop-down change is also in Javascript. If it isn't and you have "Refresh fields on keyword change" ticked in the Notes Designer field's properties, then that's what's causing the second refresh, and your best best would be to un-tick that peoperty and simulate the resulting hide-when using javascript, with an onchange event on the drop-down.

How to detect when browser places saved password?

I'm trying to detect when a browser places a saved username and password into the input fields. I've looked at this post , but I don't have the option to change this functionality, and the other solutions on don't work.
Basically, I have a disabled login button if the fields are empty on load. But when a browser fills in the input, it doesn't enable the button. I'm trying to find how to see if it changes.
I'm using jQuery and JS.
I've tried .change, on .ready, on .load, and all. It seems to happen after the .load event.
Does anyone know a solution to this? I would like to avoid using any sort of timeout.
I think there is no way to detect if the browser has some buil-in feature that pre-populates the fields.
You could solve the problem with the a timer that enable the button, if something is there.
Something like this:
setInterval(function (){
if($("#username").val()!=""){
$("#loginbutton").attr("enabled","enabled");
}
},1000)
The key thing is that the field will be populated without there having being any keypresses in the field.
So if you trap .keypress on the input field to know if a key is any pressed, then if you get to submitting the form and find there were no keypresses despite a value being there - then you can be somewhat sure that the browser pre-populated it.
If you want to know before submitting (soon after the page loads), you'd want to run a check on an interval that sees if the value has changed despite no key presses.
As #japrescott pointed out, you might want to check for .focus as well in case the user pastes a value in.
Haven't test this, but couldn't you simply compare the default values of each field to the values of each field after the page is loaded (or .2 seconds after the page is loaded if that's an issue)?
Give a shoot to Jquery .live() function
$('.element').live('load', function(){
enableLogin();
});

Button and onchange in html form

There is a rather simple html application.
Changing text field will cause a submit, follow by a redraw.
Pressing button will cause a submit, too.
When changing a field and leave it by pressing a button, the browser run into a conflict.
The browser starts one submit, aborts it and do the next submit.
The result is unreliable.
Is there a simple solution to get one submit with button and field without switching to some AJAX approach (say GWT)?
You could cancel any other event handler when starting to submit the form. This is similar to disabling a submit after clicking it, to prevent the form being submitted twice by impatient users.
You can send a flag that will tell if submit function has called once, if submit already called then don't call submit for this user.
OR you can disable the submit button as soon as call the function from text field change, in this way user will not be able to click on the submit button.
Might help you

Deselecting a form input and waiting for a function before submitting

I have a form with an input field where a user enters a unique identifier. I then have some jQuery code that upon the user moving away from the input field (blur) goes out and fetches details about the part and populates some fields on the page. The problem is if the user clicks the submit button before moving out of the input field the jQuery code never has a chance to load in the data and populate the necessary fields. Whats the best way to go about doing this? I thought about maybe setting the focus to body and then having an infinite loop that keeps checking the page until all fields that should be filled in have been filled in but I feel like some sort of event based solution would be better than unpredictable infinite loops. Any ideas?
Give the form an onsubmit event.
Have that event return false unless all the form fields are populated correctly.
In jQuery:
$("#formname").submit(function()
{ if (condition_not_met) return false; });
This will block the form from submitting until everything is in place.
The blocking will not work with JavaScript disabled, but seeing as you're using Ajax to fetch the correct fields, that probably won't matter.
I'm guessing you are making an ajax call in the blur function?
Could you disable the submit button (either on page load or on blur), and then enable it in the ajax callback?

Categories