I have a very complex form which contains multiple tabs. Each tab contains a unique Plupload instance (for uploading multiple images). The form allows a user to upload a medical image 'case' where each case is made up of multiple imaging 'studies' (e.g. CT scans) and each study contains multiple images.
When the user clicks the 'submit' button, I intercept the click with jQuery because I need to do the following:
Check the required fields are entered [easy]
Get a unique id number from my server. This id number is required by each Plupload instance to know which directory to upload to.
In my function called upon form submission I have the following code snippet:
var case_id;
// Code to check the required fields are entered
....
// Get the case id number from the server
$.get('ajax/unique-case-id').done(function(data){
case_id = data;
});
// do something with case_id and other things. MUST happen after the ajax call
....
// if there was a problem uploading the images, stop the form from submitting
if (problem_occured) {
return false;
}
With my current logic, I need the script to pause UNTIL it gets case_id. This was possible before jQuery 1.8 but the $.ajax() async : false property has been deprecated.
My question is two-fold:
Is there a way to hold up the script until I get the required case_id?
If not, any idea how I could change my logic to work around this?
You might be wondering why case_id is so important. The plupload instances do their upload before the form submits and they need a directory to upload to. I want the images being uploaded to go into a folder on my server called case_id. This will let the PHP script on the server figure out what to do with them once it gets the rest of the form POSTed data.
This is a very common 'problem' that can be solved pretty easily by using callbacks appropriately.
$("#submitButton").click(function (event) {
event.preventDefault(); //Don't submit the form, we'll submit it manually.
var case_id;
// Code to check the required fields are entered
....
// Get the case id number from the server
$.get('ajax/unique-case-id').done(function(data){
case_id = data;
// do something with case_id and other things. MUST happen after the ajax call
....
// if there was a problem uploading the images, stop the form from submitting
if (problem_occured) {
alert("something went wrong");
} else {
$("#referenceToTheForm").submit();
}
});
});
Long story short, keeping the "deal with problems or submit the form" inside of the callback to the $.get call will essentially cause the script to 'pause' until it gets the data back. Then you can use something like spin.js to give the user a good waiting experience until it's done.
Related
I have a very complex form which contains multiple tabs. Each tab contains a unique Plupload instance (for uploading multiple images). The form allows a user to upload a medical image 'case' where each case is made up of multiple imaging 'studies' (e.g. CT scans) and each study contains multiple images.
When the user clicks the 'submit' button, I intercept the click with jQuery because I need to do the following:
Check the required fields are entered [easy]
Get a unique id number from my server. This id number is required by each Plupload instance to know which directory to upload to.
In my function called upon form submission I have the following code snippet:
var case_id;
// Code to check the required fields are entered
....
// Get the case id number from the server
$.get('ajax/unique-case-id').done(function(data){
case_id = data;
});
// do something with case_id and other things. MUST happen after the ajax call
....
// if there was a problem uploading the images, stop the form from submitting
if (problem_occured) {
return false;
}
With my current logic, I need the script to pause UNTIL it gets case_id. This was possible before jQuery 1.8 but the $.ajax() async : false property has been deprecated.
My question is two-fold:
Is there a way to hold up the script until I get the required case_id?
If not, any idea how I could change my logic to work around this?
You might be wondering why case_id is so important. The plupload instances do their upload before the form submits and they need a directory to upload to. I want the images being uploaded to go into a folder on my server called case_id. This will let the PHP script on the server figure out what to do with them once it gets the rest of the form POSTed data.
This is a very common 'problem' that can be solved pretty easily by using callbacks appropriately.
$("#submitButton").click(function (event) {
event.preventDefault(); //Don't submit the form, we'll submit it manually.
var case_id;
// Code to check the required fields are entered
....
// Get the case id number from the server
$.get('ajax/unique-case-id').done(function(data){
case_id = data;
// do something with case_id and other things. MUST happen after the ajax call
....
// if there was a problem uploading the images, stop the form from submitting
if (problem_occured) {
alert("something went wrong");
} else {
$("#referenceToTheForm").submit();
}
});
});
Long story short, keeping the "deal with problems or submit the form" inside of the callback to the $.get call will essentially cause the script to 'pause' until it gets the data back. Then you can use something like spin.js to give the user a good waiting experience until it's done.
I am currently working on with Dropzonejs for uploading files. For each file I am attaching a form field. I have to do something like this, if the form field attached with that file is not empty, I want to upload. Else, I show error message below the thumbnail. I have pretty much accomplished this.
The only problem I am facing is, suppose there are 3 files selected. 1st one doesn't have the form field attached but 2nd and 3rd have form field attached. The error message is shown saying the form field is required. But the rest of the files, 2nd and 3rd are not uploaded. It only uploads when I provide the required field on the 1st one.
So, my question is how do I upload only those that have form field attached but leave the rest in the Dropzone area for the user to fill the form field?
Update:
Once the files are added, the user is required to put the values in the form field. If the form field is not filled, error message is shown and the file is not uploaded but remain in the queue. Else, if the field is filled, the file is uploaded.
You might hook into an event.
There is the accept function:
is a function that gets a file and a done function as parameter. If the done function is invoked without a parameter, the file will be processed. If you pass an error message it will be displayed and the file will not be uploaded. This function will not be called if the file is too big or doesn't match the mime types.
dz.options = {
accept: function(file, done) {
if (valid) {
done();
}
else {
done("error message");
}
}
}
Unfortunately, this seems to be called automatically and immediately after a drop.
You might find the other events more appropriate for your app e.g. send: function(file, xhr, formData).
I have a fixed-position form that can be scrolled out onto the document and filled out anywhere on the page. If they fail to fill out the form properly, the errors are currently echod out onto the form, which is the intended design for that aspect. What I don't currently know how to do is, if the form is completed and $errors[] is empty, to use jQuery scrollTop() to jump down to the bottom.
Could anyone help me out with this? Current javascript involved is:
$("#A_FORM_submit_button").click(function() {
$("#FORM_A").submit( function () {
$.post(
'ajax/FORM_A_processing.php',
$(this).serialize(),
function(data){
$("#A_errors_").html(data);
}
);
return false;
});
});
The PHP involved is simply
if (!empty($errors)){
// echo errors
} else { // echo success message} <-- would like to jump to div as well
edit-- for clarity: not looking to make the page jump happen in the php file, so much as return a value for the jq $.post function to check and then perform an if/else
I might be jumping the gun here but I believe your design is wrong which is why you are running into this problem.
The ideal way of handling form validation is to validate forms via Javascript and when users enter in their information you immediately show some indicator to ask them to correct it. As long as the validation is incorrect, you should not be accepting a form request or making any AJAX calls.
In the off-chance that they do successfully send the data, you should be doing a validation check via PHP as well which, if failed, would redirect to the original page with the form. From there you could do whatever error handling you want but ideally you would retain the information they entered and indicate why it was wrong (Javascript should catch this but I guess if it gets here the user might have JS off or your validation logic might be wrong)
If I understand correctly, it seems like you are doing your error handling with Javascript (that's fine) but showing the error via PHP. As Hydra IO said don't confuse client-side and server side. Make them handle what they need to handle.
Hope this helps.
#aug described the scenario very clearly.
In code it translates in something like this
$('form').submit(function(){
form_data = $(this).serialize();
if(!validate(form_data))
{
// deal with validation, show error messages
return false;
}
else
{
// Submit form, either via Ajax $.post() or by just returning TRUE
}
});
The validate() function is up to you to work out.
I'm interfacing with a site that implements delaying a page-load with client-side JavaScript. Basically, a form is submitted on PageA.asp, and instead of the data going to PageB.asp, it goes to PageC.asp. PageC.asp consists of a 'please wait' message along with the following JavaScript:
function OnTimer() {
window.location.replace("PageB.asp");
return;
}
setTimeout('OnTimer()', 10000);
The interesting thing here is that when PageB.asp loads, it somehow has all the information submitted from PageA.asp. Yet whenever I've looked up whether you can pass POST data along with window.location.replace, the answer has been "no".
So how does PageB.asp have the data from PageA.asp even though it was loaded from PageC.asp? Does window.location.replace load the new page with the same POST data? How would I best re-implement this in mechanize: remember the POST data from PageA.asp and submit the form with the action being PageB.asp instead of PageC.asp?
I'm working on a jQuery function that forwards form data to page without interfering with the normal submission. I can do it without any issues as long as I capture the submit using .submit(), but I would have to run my own validation on the data because it operates independently of the regular submission. Is there a way for jQuery (or any Javascript) to detect that form data has been posted and validated?
cheers,
Mike
Edit:
Workflow looks like this:
1. User enters data
2. Clicks submit
3. Site runs validation and accepts input
4. Submits data to new page
5. jQuery function detects new data was submitted and accepted so it runs.
More Edits for Clarity
I think you guys are missing the issue. I know how to detect a form is being submited (which is fine and dandy)
This is NOT what I want:
$(this).each(function(){
$(this).submit(function(){
*** Code ***
}
}
Suppose I have a validation script running independent of the code I am currently writing. How can I detect that this ran, and then go to the submit code above?
Use onsubmit="" on your <form> element, but return false. i.e.:
<form action="?" method="post" onsubmit="validate_and_submit(this);return false;">
The return false prevents the form from actually submitting so you can do stuff with AJAX.
Hope this helps!
What you need is AJAX here . So make a XHR request that goes to your server and posts data . The server's response would now go to a callback function ( your jquery function ) . If the data was validated and fine , you proceed further , else you stop .
What you are trying to do is not possible via the normal HTTP POST request .
EDIT: for the original clarification
If you want the server to only received validated data, then just make sure its not submitted to prior to the client-side validation occuring. You can do this with selectively calling event.preventDefault() based on the result of the validation.
$("#form").submit(function(event) {
//some stuff
if (validate(formdata) == false) {
event.preventDefault();
}
});
If you want a server to do the validation and submit to itself or another service, you should make that part of the server-side workflow. So it'd be like
1.) client submits to Service1
2.) Service1 validates
3.) Services1 submits to Service2 (such that service2 never receives code from elsewhere)