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.
Related
The problem is quite simple to understand but quite hard to execute. I am currently facing some clients that turn off their browser Javascript by default and this screw up my website a bit. Since my website send ajax requests on form submit, stop the form submit using Javascript, turning JS off means the form will be sent through and that's unexpectedly.
What I am trying to ask and achieve is whether it is possible to just using html purely to stop a form from submitting?
I think the best answer is; to have the original form action point to an error page, asking the user to turn on javascript.
Then let your javascript code fill in the form action parameter, once the ajax state is complete.
Alternatively or additionally, you could use a <noscript> tag as suggested in the comments, to generate a message on the original page.
I think you can simply change your submit button tag to an input and style it to look like a button and remove the type="submit" that's all. with out ajax it will not respond.
I am working on a multi part form that is composed of three views.
The user will have to fill the first part, click next, fill the second part, next again, the third part and finally submit the form.
However I would like to add validation to each part to ensure the user have filled all required fields before reaching the next part.
For simplicity and consistency with the rest of the website I would like to use the browser validation system, which is triggered at form submission by default.
Is there any way to use callback that detect invalid fields and highlight them when the form is submitted without a call to submit ?
So I'm working on a chat system and even though I know it works in a pretty lame way - submitting messages in a new window () - I'm interested if there's any way to reset the textarea's content after sending the message.
Now, the problem is, I've even actually found ways to do so via JavaScript (editing the textarea's value), but I don't know how to "launch" the javascript after submitting the form.
Obviously, I can just use onSubmit(), but that delete's the value BEFORE sending the data. So it works, but sends an empty text.
Any ideas?
Thanks!
A common solution is to copy the values of your <form> into an object which you can then convert to JSON. That way, you have a copy of the values which doesn't change when you reset the fields of the form. jQuery will make this very simple. See also: serializing and submitting a form with jQuery POST and php
The second solution is to submit the form and as the last thing, add a timeout which resets the form. But there will be a small gap and a user might be able to type while your handler is clearing the form.
Okay, so I've used a JavaScript timer to run the clearing function 300 ms after clicking the submit button. Works. Thanks all :)
I have a form that has hidden elements in it to create a pseudo-array of comma-separated values that will be submitted to the server through post, where the hidden elements will then be decoded into arrays and processed for storage. To fill the hidden elements, I use visible elements and a button that javascript handles to add values to the hidden elements, clearing the form every time the button is pressed.
Here is the question: How do I get the visible elements NOT to be submitted to the server and only submit the hidden elements in an effort to save bandwidth? Is there a way to create a text entry field that doesn't get submitted with the rest of the form, but that javascript and normal form controls can still access? The goal here is to prevent unnecessary repeats of the same data being sent when the submit button is clicked, AFTER javascript has filled the pseudo-arrays with the data I need.
EDIT: Thanks for the help. The first two answers I got were good, but I chose as an answer the one I thought was a little more detailed and helpful to myself and anyone else who may be looking for the same solutions.
PLAN: I'll have an onsubmit script that disables unneeded fields just before submit so that they don't get sent to the server, thereby saving (a tiny bit of) bandwidth and reducing the amount of information my server-side script needs to do. This keeps it possible to easily use javascript to clear the fields I want cleared while constantly keeping the hidden fields loaded with the CSV's I need.
There are two provabilities that I can think of now:
Put visible input elements outside form tag, leave only submit button and hidden fields inside.
Create an event onsubmit on form element to set disabled property on visible fields. On some browser that may require to additionally remove that event, return false and trigger form submission manually.
You can set the "disabled" property of the elements to true in order to prevent them from being submitted.
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?