I try to replace classic input file with JqueryFileUpload widget.
Here is my context :
I can have one or more file input in the same form.
The form is meant to create server side objects (each input is a field of this object and each file is a "resource" object linked to the main created object). Those object are stored in a database.
When the final user submit the form, I'd like to :
do many validation (for other inputs)
if all is ok, then trigger the ajax upload of file(s). A server-side handler create the
needed ressource object(s).
when all the uploads are completed (I can know that by using the widget callbacks), then I submit the main form (the action form is not the widget handler but a page that do the job and display a message) to create the main object : I don't want to send the file(s) here but only the ressource objects id that the handler send me back to link them to the main object).
My problem is, when I trigger the fileUpload the form is submitted and the action form page is loaded. The handler isn't called.
I made test with a simple page : if the widget is not within a form it works fine :
<body>
<div>
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]"/>
</div>
</body>
but if I put it in a form the form is always submitted and I can't prevent this.
<body>
<form action="myPage.aspx">
<!-- The file input field used as target for the file upload widget -->
<input class="fileupload" type="file" name="files[]"/>
</form>
</body>
My questions are :
Doesn't the url option override the form action ?
Can I not use different target for the widget and the form that contains it ?
Can I put multiple widgets in a single form ?
Okay just for information it was a pretty stupid mistake from my side, I used a which default behavior is 'submit' so my form was always submitted.
Related
I am using Simple Form (getsimpleform.com) to email the HTML form contents to my email. The problem I am facing is that the HTML Form action is handled by getsimpleform so when the user clicks on submit button of the form, they are redirected to https://getsimpleform.com/ but I want them to stay be redirected to another page (i.e. contact.html).
So I want the form action to be performed but at the same time, I want the user to be redirected to another web page.
Thanks.
Just fill up your action attribute
<form action="next-page-please-url">
<button>butt</button>
</form>
You can add an action calback on your button, for example :
in yout HTML
<form>
...
<input type="submit" onclick="redirect()">
</form>
and in your javascript :
var redirect = function(){
document.location.href="contact.html"
}
First of all you need to change the action url of the form to your domain name
From
action="https://getsimpleform.com/"
To
action="https://YourDomain.com/"
and then on your php or whatever server side language you are using you can redirect e.g. I will use php example.
header('Location: http://www.YourDomain.com/OtherPage');
Based on their official page recommendation on redirect
<input type='hidden' name='redirect_to' value='https://yourdomain.com/contact.html' />
Try to insert it into the form and see whether it solves your problem.
P.S. don't forget to change [yourdomain] to your actual domain.
I wanted to know if it is possible to use a custom form for braintree payment integration. By custom i mean something like this:
<form id="payment-form" method="post" action="/checkout.php">
<div id="customField>{$customField;}</div>
<div id="customField2>{$customField2;}</div>
<input type="submit" value="PAY">
</form>
<script src="https://js.braintreegateway.com/js/braintree-2.31.0.min.js"></script>
<script>
var clientToken = "";
braintree.setup("clientToken", "dropin", {
container: "payment-form"
});
</script>
I want to post my custom fields to checkout.php but it seems the form only returns payment method nonce. I don't want to store any of these custom values in braintree's vault either. Checkout.php just adds all values together (including received payment method nonce) from previous forms in an array and passes these values to .NET server. So is there a way to pass these values to checkout.php?
It looks like this is certainly possible using Braintree's Custom Fields
It looks like, though, you are not properly formatting your form to populate the Drop-In, per your Braintree.setup. The container you are specifying in the braintree.setup will correlate to a div element that will in turn be the drop in, not the ID of the complete payment form.
So, if you have a form that looks like;
<form>
<div id="dropin-container"></div>
</form>
, you'd want your braintree.setup to look like;
braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'dropin', {container: 'dropin-container'});
in order to convert the DIV "dropin-container" into the Drop In.
Custom Fields, though, can be included in the form, but you'll want to make them simply HTML Input elements, as opposed to div elements, that will be returned to your server alongside the nonce.
Hope this helps!
I currently have a JSP page that contains two forms:
<body>
<form id="1"></form>
<form id="2"></form>
</body>
Only one form will be showing at the time when viewing the page.
There is a JS validation file that is being used to check the form integrity when submit.
To simply put, this JS file cannot be changed. Whenever the JS file is being called, the core function takes in the form.
function validateForm(formToValidate){}
The validation result alert is a JSP page id="alertMessage", being hidden at the beginning by CSS:
#alertMessage {
display: none;
}
When any validation error happens, the page turns to visible by simple jQuery: $("#alertMessage").show();
The CSS requires the id="alertMessage" to not display the alert JSP page, and the JS requires the id="alertMessage" to do validation, and show alert messages.
Since I am having two forms in the page and the forms contain different content for validation, I have to include two JSP alerts in my page.
<body>
<jsp:include page="alert for form 1">
<form id="1"></form>
<jsp:include page="alert for form 2">
<form id="2"></form>
</body>
The issue:
Not only I am having duplicate ids id="alertMessage" in one page, it is always the first JSP alert page being picked. So even I am submitting form 2, the alert for form 1 will be triggered. Combing the alerts into one JSP alert page is not an option due to my design limitation.
How do I fix this?
These slight modifications should help you.
Pass the form id in the function validateForm(formToValidate) as formToValidate parameter.
Remove the id tag from the error message containers. Add class="alertMessage" as attribute to the same.
Instead of $("#alertMessage").show(); use $("#"+formToValidate+" .alertMessage").show();. Define the style for the class .alertMessage as below
.alertMessage {
display: none;
}
I am making a form with over 35 input fields and files that need to be uploaded with the form that can be relevant to that form's reviewing later.
In order to upload multiple files I wrote this script inside the form:
<script type="text/javascript">
function cancelFile(v){
$(v).closest('.input_file').remove();
}
function addFile(){
$('#files').append('<div class="input_file"><input name="attachment\[\]" type="file" ><img class="cancel_img" src="images/delete.png" onclick="cancelFile(this)"></div> ');
}
</script>
<input type="button" onclick="addFile()" value="Add file"><br><br>
<div id="files">
</div>
It basically appends an input of type file with the name attachment[] when an add file button is clicked, and a span that allows to cancel (remove) that input when clicked.
When I add only one file, all the POST data uploads fine: text, dates, files and all. But when I add multiple files, the POST request is empty: var_dump($_POST) shows me an empty array.
The form has enctype="multipart/form-data" declared.I also tried the uploading of multiple files in a separate test and it worked fine.
Anyone knows why my post ends up empty?
I am trying to use dropzone.js (with Coldfusion 9) to upload potentially multiple files on one page. I first did this using the form tag:
<cfform name='UploadFiles' action="uploadfiles.cfm" class="dropzone">
and this worked as expected.
The problem is that I need the user to upload the files and then hit a submit button that processes the files. So I would need the information from each of the files uploaded. With this method, since each one is a separate form, I could not get all the file names on submit. Because of this, I changed the tag to a div tag inside of the form:
<cfform name='uploadfiles' action="uploadfiles.cfm">
.
.
.
<div id="my-dropzone" action="uploadfiles.cfm" class="dropzone">
</cfform>
<script>
new Dropzone(
url: "/uploadfiles.cfm" // Set the url
});
</script>
This works, as it shows the different dropzones and I can drag and drop a file or select one, but nothing ever gets uploaded to the location.
I am using the same code I used when the dropzone was a from to upload when the dropzone is a div:
<cffile action="upload" destination="#uploads#\Uploaded\#filen#" nameconflict="makeunique">
What am I missing in order for it to actually upload the file?