Using plupload jquery queue plugin as in this example, how can I submit the form on upload complete? I attempted to add a <input type="submit" /> button, and click this button without first clicking the Start upload. This triggers the uploader.start() correctly, and then $('form').submit() - however the $_POST data only contains: 'uploader_count' => string '0' (length=1). If I first click the Start upload button however, the proper POST vars are populated.
How can I trigger .submit() and be sure the correct file upload post parameters are present (E.G. $_POST['uploader_count']) ?
Turns out this is a bug in plupload, and is also present in the official example at:
http://www.plupload.com/example_queuewidget.php
(Queing files, then hit submit only sends POST data $_POST['uploader_count'] == 0) omitting any file info
We added a button which does this:
var plupload = form.find('.plupload-element'), uploader;
event.preventDefault();
if (plupload.length && plupload.pluploadQueue) {
uploader = plupload.pluploadQueue();
uploader.bind('StateChanged', function(uploader) {
// Submit the form if all the files got uploaded.
if (uploader.total && uploader.files && uploader.total.uploaded === uploader.files.length) {
form.trigger('submit');
}
Related
I'd like to know what is the difference between HTTP web form POST and button submit click, are they having totally different functioning or they are identical to each other?
I have fiddler, where I tried to emulate the incoming and ongoing POST and GET statements, POST sends the request and concatenate the input area parameters at the end of request, but that still doesn't give me clue whether, POST and sumbmit are identical or not.
HTTP POST:
It is one of the HTTP method to send your data to your respective
script path.
This is the secure method where data is not being shown
in the URL as HTTP GET method.
The data will be send to the desired script via
the headers.
SUBMIT BUTTON CLICK :
It is one of the event of web form through which the data into the
form inputs will get posted to the script path present in the
action attribute of form.
Now what will happen if the form has the two submit buttons?
First thing is that this is the rare case when we need two submit buttons because we can click one button at a time only.
Lets say we have following two buttons in some demo form as follow
<form name="profileForm" action="saveprofile.php" method = "POST">
// Your input fields go here
<button class = "any_button_name" type= "submit " name ="save_profile" value ="save_profile" >Save Profile </button>
<button class = "any_button_name" type= "submit " value="preview_profile" name ="preview_profile" >Preview Profile </button>
</form>
Here in code value attribute has been added to know which button has been clicked.
Now at PHP Side you can checked the which button has been clicked.
// code from saveprofile.php
if('save_profile' == $_POST['save_profile']) {
// save profile code
}
if('preview_profile' == $_POST['preview_profile']) {
// save profile code
}
Hope this may help to clear your doubts.
My issue is simple -
I am submitting form using jquery and ajax . When the button is clicked the data is submitted to database .
Question - If the user clicks the submit twice there are two entries in the database . how can I solve this ?
I cannot use .one() because the submit button invokes validation function if the errors happen the data will not be submitted .So , user has to call the same function again .
Obviously I can do that with a variable on .success .but what is the best solution to this issue .
Thanks for the help.
Overlaying to prevent click is one way.
If you want something plug and play blockUI.js is good. All you need is
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
or you can just use .ajaxstart() and .ajaxstop() to overlay an element yourself to enable and disable the submit button.
You can disable the submit button once you have submitted the form. Any form can be submitted only using the Submit button. So:
$(form).submit(function () {
$(this).find("input:submit").prop("disabled", true);
// You can enable it back once the AJAX request is successful.
$.ajaxSuccess(function () {
$(form).find("input:submit").prop("disabled", false);
});
});
I have a image upload form which adds an image to my server, although I'm wanting to load the information through jQuery ajax so the form doesn't refresh on submit.
At the moment I have
$('.img-form').submit(function(e) {
e.preventDefault();
$.post(document.href, $(".img-form").serialize());
});
Which seems to post the document, although i need to get it to call my ImageUpload() function from the PHP once I've pressed the submit.
My php function is called something like this,
<?php $Users->TutorialImageUpload(); ?>
If I understood correctly, you wish to upload an image without refreshing the page, and call your imageUpload() function.
As mentioned in the comments, you cannot upload in such a manner, however, what you could do
is put your upload form and code in a seperate php file and include it in the page as an iframe. This would upload your files withough refreshing the page.
I need to dynamically add form elements to an HTML form as soon as the Submit button is clicked but before the POST data is sent to a server. The new elements must be "read" from a PHP file on my server.
HISTORY:
Currently my HTML form has "hidden" fields that are submitted to another server for processing. I have no control over the other server. My problem is that anyone can edit these hidden fields.
How can I dynamically add form elements to the POST data as soon as the form is submitted?
You can try it this way:
First disable the submit by changing the submit button type from 'submit' to 'button' (or whatever)
Put in onclick on that button to a javascript routine (here i use submit_form()).
Create an empty div within your form. (here i call it with id = 'dynamic')
Using jquery, this is the submit_form().
I think you will need to give it some time for these elements to bind properly before submitting. Maybe a short time delay before $("#myForm").submit();
Here is the code for the submit_form() function:
function submit_form()
{
$("#dynamic").append("<input type='hidden' name='input1' value='whatever'>");
$("#dynamic").append("<input type='hidden' name='input2' value='whatever'>");
$("#myForm").submit();
}
You can post the data to your server and after it post again to the external server with the new elements attached.
Your job is done on server side.
See also:
php server-to-server post?
If you need any control over what is submitted to the other server, you have to do that yourself. Make the form submit to your own server, then validate it, add your data and re-submit it to the other server.
You can use the CURL extension in PHP to post data from your server.
I have a checkbox and a file upload element, they both are dependent on each other such that if on is on that other has to be off(empty in case of file upload field)
for this i have used the javascript on onclick of checkbox and onchange of file upload..
For onchange event the checkbox gets deselected in all browsers
but after i select any file using file upload element and then i click on the check box then the file upload element does not gets empty in IE, but works fine in FF
the javascript used in onclick on checkbox is as follows:
function yousend_it()
{
if(document.getElementById('yousendit').checked)
{
document.getElementById('bgimage').value = "";
window.open('https://www.yousendit.com/dropbox?dropbox=mydomain','_blank');
//return false;
}
return true;
}
Could someone tell me how can i make it work in all browser perfectly?
For security reasons you cannot set the value of the upload field using JS. Apparently FF at least lets you change it to nothing.
A better way to make the two elements "depend" on each other is to disable the upload field unless the checkbox is checked.