Variations of this questions have been asked before, but I haven't been able to fix it for the way I set my website up.
Basically, I have a website where the user can create a project. The user can add as many tasks to this project as he wants to, and each task has a number that adds to a total sum at the end. Usually, the Javascript function (TotalSum()) that I developed for this calculation works perfectly, but some users want to be able to use the Enter key to submit the form. While it does indeed submit the form as you'd expect, it doesn't launch the calculation function and instead skips straight to the submission of the form. This leads to numbers being submitted that may no longer be accurate to calculations.
TotalSum() is launched after a number input field is altered and the user either clicks out, clicks on the 'Submit' button or whatever else you'd expect – all except for the automatic submission via the Enter key.
My intent is to only allow submission of the form after the function has finished calculating and filled all the input fields with the new numbers. How could I best go about doing that?
I've tried various ways to go about this, but usually preventing the form from submitting also seems to stop me from submitting it again.
$('#form_project').submit(function (e) {
TotalSum();
// TotalSum(); is done calculating, proceed with submitting the form away!
});
I could also use PHP to just do the calculation after the form is submitted, but coding in PHP what Javascript is already doing fine by itself, if it was properly allowed to finish calculating by the Enter key, just seems like a messy solution.
jQuery is absolutely an option. How could I best go about doing this?
You can use jQuery for this purpose and check if the enter key is pressed using
$(document).keypress(function(key) {
if(key.which == 13) { // 13 is ascii for enter key
//Use your totalSum function
TotalSum();
}
});
Related
I am using Adobe Livecycle ES2. My code is fine but all my validations are being displayed as a list in one single message box and that's not what I want. I want them to display after the user leave each field that's being validated. I tried solution like File>Form Properties> Form Validation but I don't have the Form validation option. I am wondering if I can get it to work by javascript coding.
You can add field-specific JavaScript code to the exit event for each field. If the user enters a value that doesn't pass the validation, you can then script something (a messagebox, an alert popup or some text) to appear as the user tries to leave the field.
You may want to use softer coded validation (which warns the user that the field isn't correctly completed but still allows them to move elsewhere in the form) in the exit event and use harder/stricter validation at the end of the form, for example, before the form is submitted) so that the user can't submit the form without completing the necessary fields but they can still progress with later fields even if the earlier fields aren't complete.
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();
});
I have a form that I'm validating with JavaScript before allowing the form to POST. The validations are done using the LiveValidation library, which I'm having defer doing the validations until the user attempts to submit the form. So, the Javascript is executing on the form's onsubmit event, returning false if the form is invalid to stop submission. The form also has multiple submit buttons to determine which action to take with the information on the server's side. The problem that I'm running into is that if the user clicks on one submit button, fails validation, and then successfully submits again, the first button clicked is also part of the POST, so the action taken on the server's side sometimes isn't the desired one. I thought that perhaps the problem was with the validation library, but now I'm starting to wonder if it isn't deeper. If a form's onsubmit returns false, does the set of POSTed variables get cleared or cached for the next submit?
Edit: OK, so this is an instance of the "I'm a dumbass" bug. I had added a hidden field with this name/value pair through JavaScript earlier, because of some funky business rules on the page. I just had to remove that, and it's all fine again.
Had to wait for some time to pass before it would let me answer my own question. Solution reproduced below:
OK, so this is an instance of the "I'm a dumbass" bug. I had added a hidden field with this name/value pair through JavaScript earlier, because of some funky business rules on the page. I just had to remove that, and it's all fine again.
I have a JavaScript click event bound to an anchor link that submits user data on click via Ajax. This link doesn't actually go anywhere, it's just an Ajax post.
The problem is that the user can write a script to rapidly spam submission. Is there a way to disallow JavaScript from triggering the click event.
I can put a flood control on it, bit I can't use one that's too egregious without destroying the chat room functionality.
The problem is that the user can write
a script to rapidly spam submission
AFAIK you will not be able to differentiate between a javascript click and user click.
The best thing will be to validate the data that is getting submitted.
If you really want to have some validation to stop automation submissions you can add the image checks which all websites does.
User has to enter the image which he sees to proceed furthur, i don't know the techincal name for that image.
It can stop the user automated jobs
If your intention is to prevent users from doing harmful things, it's a very bad idea to do the checks on the client side. There's always a way around it. The only reliable way is to check on the server.
You could simply have two variables per user: a spam score and a timestamp of the last post. Whenever the user posts a new message, calculate how much time has passed since his last message and lower the score a bit for each second, but increase it by a fixed value for every message sent. Once it reaches a threshold, deny new messages until it decreases again.
You could check the event.which property, which should contain a key (for mouse, it is usually 1, 2 or 3) code for the key pressed. If that property does not exist, then it is likely that it is a JavaScript click event instead of a user mouse click.
if (event.which != null) {
// likely was user click
}
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?