I am using Dropzone and try to combine it with normal form so I read this tutorial https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
and yeah I can do it successfully. However, I want other input text field and submit-button to be outside of form tag (outside of dropzone) so I use css position:absolute the text input to be above the form and submit-button below form
but I forgot that if I select image to upload the form dropzone's height will extend. so It fail. (see the screenshot)
<form id="my-awesome-dropzone" class="dropzone" style="position:relative">
<div class="dropzone-previews"></div>
Username : <input type="text" name="username" style="position:absolute; top:-50px; left:0px; /> <br/>
Email: <input type="text" name="email" style="position:absolute; top:-40px;left:0px; /> <br/>
<button type="submit" style="position:absolute;top:100px;left:0px;">Submit data and files!</button>
</form>
I even move the button to outside of form and use html5 attribute form="my-awesome-dropzone" but it's not work. How could I do?
You could do it this way, a padding of 20px to the form at bottom, and append button to absolute, bottom: 0px, and it will be at end of form, even if there's uploaded images.
$(function(){
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", { url: "/file/post"});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script>
<link href="http://www.dropzonejs.com/css/dropzone.css" rel="stylesheet"/>
<form id="my-awesome-dropzone" class="dropzone" style="position:relative; padding-bottom: 30px;">
<input type="email" name="username" /><br>
<input type="password" name="password" /><br>
<div class="dropzone-previews"></div>
<button type="submit" style="position: absolute; bottom: 0px;">Submit data and files!</button>
</form>
I think your problem of dropzone overlapping submit button is due to form having style="position:relative" and button having style="position:absolute;top:100px;left:0px;". Remove both of them.
this seems to be a strange way of achieving what you want. I checked the documentation and in the Tips & Tricks section (https://docs.dropzone.dev/misc/tips) it clearly states that you can put an element inside your dropzone element with the class dz-message and dropzone will not create the message for you. So I would suggest that you do like I've done and above your submit button place the following element:
<div class="dz-message">
<div>Upload file here</div>
</div>
The negative aspect is that dictDefaultMessage isn't then honoured.
Also, if javascript is disabled then the div will still show, in which case add this to your css:
<noscript>
<style>
.dz-message {display:none;}
</style>
</noscript>
Related
I'm using mailchimp to create a signup sheet and every time the submit button is pressed, a new tab will open that confirms your subscription to the mailchimp email list. I want it to run as a sort of background process where no new tab is opened at all but the form is still submitted. Here is the code I currently have with MailChimp:
div id="mc_embed_signup">
<form action="//standrtech.us11.list-manage.com/subscribe/post?u=c330585c1144a0dd4bfd6d0df&id=b7e663bdf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2></h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!--real people should not fill this in and expect good things - do not remove this or risk form bot signup-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_c330585c1144a0dd4bfd6d0df_b7e663bdf4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Get Early Access" name="subscribe" id="mc-embedded-subscribe" class="button" onclick="submission();"></div>
</div>
</form>
I know I am a little too late for this, but I have found the solution for future references.
For 'classic' form only
Looks like the HTML code is not copied properly. In the mailchimp embed form dashboard, look for the scripts after the outer div, the one containing the form, these scripts will validate your form. My embed form has two scripts after the outer div :
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
and
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
second script may vary depending upon your form fields, but I think you definitely need to add the mc-validate.js to resolve this issue.
Hope this helps.
Remove target="_blank" from your form tag.
in my case, it is because of the form validation script. i removed the script and do a simple email input text validation on my own.
So, I'm very new to front-end design. Basically I have a form and I would like to take advantage of ng-messages to show validation error messages when the user submits or leaves a field. My form resizes to fit the inputs and the error messages and it looks bad. I know I'm not going to be able to word this the right way so bear with me. Ultimately I want the form to be sized properly on document ready. And when a validation error happens, the form won't resize.. there will be spaces for the ng-messages to be built in, so the form doesn't grow or contract based on whether there are error messages or not.
Here are two screen shots from the plunker to show the expanding contracting form:
start up form size:
after blurred out of both inputs:
Thanks in advance for any insight you all can shed.
here's a link to my plunkr: plunkr
So I found A solution. I don't think it's THE solution.
Here's my html body:
<body ng-controller="mainCtrl">
<h1>Hello Plunker!</h1>
<div class="container">
<div class="myclass">
<form class="form" role="form" name="myform" novalidate>
<div class="form-group">
<input class="form-control" type="text" name="name" ng-model="newname" placeholder="Name" required/>
<div ng-if="myform.name.$touched" ng-messages="myform.name.$error">
<div ng-message="required">This field is required</div>
</div>
</div>
<div class="form-group">
<input class="form-control" type="email" name="email" ng-model="newemail" placeholder="Email" required/>
<div ng-if="myform.email.$touched" ng-messages="myform.email.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Not a valid email</div>
</div>
</div>
<div class="form-group">
<button type="submit" ng-click="submit()">Submit</button>
</div>
</form>
</div>
</div>
<p>User Entered: {{newname}}</p>
<p>myform.name.$error = {{myform.name.$error | json}}</p>
<p>form submitted = {{submitted}}</p>
</body>
So I added some css markdown for form-group classes that looks like this:
body .container form .form-group {
height: 50px;
}
this way the size of the form-group stays static and my form is not resizing based on whether or not I have error messages.
However... I really don't think this will work on mobile devices. Have yet to test that. But if anybody has a more robust, smarter way of fixing the problem, I would love to hear it!
Instead of having the ng-if on the ng-message divs you can add a conditional class to add visibility: none to the div when $touched is false. This way the div still takes up the space but it is hidden from view.
http://plnkr.co/edit/8SiZ5jyAQPolJGefhLER?p=preview
HTML
<div ng-class="{'invisible': !myform.name.$touched}" ng-messages="myform.name.$error">
CSS
.invisible {
visibility: hidden;
}
I created a form for users to register to my site, it uses Jquery to slide the form into view.
I just decided to turn off JavaScript in the browser to see if my PHP form validation is working properly, but the form is not being displayed is this to do with me setting the form element with CSS (display: none), or is their a tag that needs to be used within the HTML for this situation ?
<form class="form" method="post" action=register.php id="register">
<fieldset>
<label for="username">Username</label>
<input type="text" size="30" name="username" id="username" />
<br/>
<label for="email">Email</label>
<input type="text" size="30" name="email" id="email" />
<br/>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<br/>
<label for="confirm paassword">Confirm Password</label>
<input type="password" name="password1" id="password1" />
<br/>
<input type="submit" name="submit" id="submit" value="Register" />
</fieldset>
</form>
CSS style
#register{
display: none;
Jquery
$(document).ready(function(){
$('#register').slideDown(800);
}
All three files are external.
Invert your idea. Use js to hide the form for those with js turned on.
If you are changing from display: none with JS it'll not be visible without JS.
Try to use <noscript> to show form or link to register page (eg. with nojs param) to handle cases when user got JS disabled.
Yes, it should be because of setting display: none on the form element.
You should add tag to handle situation when you don't have javascript. However though keep in mind that you'll have to reload page to show the form in such situation...
javascript and css are not strictly releated, so "display: none" is hiding your form
change the display value from none to visible (un-none) in the onload event
Have JS hide the form. Or use feature detection such as modernizr to see if JS is supported then only apply the style where it is. Eg .js #myform {display:none;}
I am opening up a small modal dialog using facebox with a form and then trying to access the value inside a text field on that form with javascript. This is the HTML code -
<div id="dialog-form95" style="display:none">
<div class="block">
<form action="" method="post" name="form95">
<h3>Setting URL</h3>
<p></p>
<p><label>URL : </label></p><input type="text" class="text" id="du95" name="url"/>
<p><input type="submit" class="submit small" value="save" onclick="updateUrl(95,109); return false;"/></p>
</form>
</div>
</div>
This is the javascript onclick -
function updateUrl(bid, cid){
alert(document.getElementById('du'+bid).value);
}
I even tried hardcoding "du95". Whenever i update anything in the textbox and submit, it shows a blank alert dialog. Nothing shows up in the js console as well.
That's because it has no value. Try and see what happens:
<input type="text" class="text" id="du95" name="url" value="testing" />
For some reason you have display: none in you container div.
After removing that it seems to work fine in jsfiddle: http://jsfiddle.net/8bSdK/
jQuery, when i use it to create a modal window which contains form elemets,
it takes out those elements when i submit the form.
example of the form:
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</div>
</form>
exaple of JS:
<script>
$(document).ready(function(){
$("#add_photo").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
}
}
});
});
So what i nocited during the inspetion via firebug, is that jquery actually removes my form elements within #add_photo and puts them outside the form in DOM, so even tough in html the modal dialog is within my form, in DOM it isn't ....
An this is the reason why i'm having the issue!
Have anyone encountered simmilar problem?
Any solution?! Thank you very much!
I just had the same problem. I solved it by adding another
<div id="beforesubmit" style="display:none"></div>
at the end (but inside) of the form and then you have to add this to jQuery:
$("form").submit(function() {
$("#add_photo").prependTo("#beforesubmit");
});
This will make sure that before the form is submit your dialog div will be put back in between the form tags. Thanks to arnorhs I came to this solution.
Cheers!
I'm not sure what dialog box plugin you're using, but I would suspect that the dialog box plugin is pulling the DIV out of the form and placing it into the body of the page, so It can bring the box in front of the page, outside of the form element.
So to rephrase, in order for the dialog box plugin to make your dialog appear in front of all the content on your page, it needs to remove it from whatever element it is sitting in, no matter if it's a form or anything else.
The form needs to be inside the div. That's how it is in all the Dialog examples. Not sure how you're going to do that with the title and url inputs not being on the dialog. Couldn't you put them on it too?
This wouldn't have the problem:
<div id="add_photo" style="width: auto;" class="ui-dialog-content ui-widget-content" title="Add Photo">
<form enctype="multipart/form-data" action="/system/article/add/" class="from" method="post">
<label for="article_title" class="required">Title:</label>
<input class="formfield" id="article_title" name="article_title" value="" type="text">
<label for="url" class="required">Url:</label>
<input class="formfield" id="url" name="url" value="" type="text">
<label for="photo_title" class="optional">Photo title:</label>
<input class="formfield" id="photo_title" name="photo_title" value="" type="text">
<label for="photot" class="optional">Photo thumb:</label>
<input type="file" name="photot" id="photot" class="formfield">
<label for="photo_checkbox" class="optional">Include lighbox?</label>
<input name="photo_checkbox" value="0" type="hidden">
<input class="checkbox" id="photo_checkbox" name="photo_checkbox" value="1" type="checkbox">
<label for="photo_big" class="optional">Photo:</label>
<input type="file" name="photo_big" id="photo_big" class="formfield">
</form>
</div>
This article describes how to solve your problem:
You’ll see that the content we had mid-way through our page has been marked up with additional classes and, most importantly, placed at the bottom of the page immediately before the closing tag. Why is this important? Because it also means that any ASP.Net controls you place within this dialog will also appear at the bottom of the page, outside of the page’s tag. This means you won’t be able to get a handle to them on postback.
What’s the solution? Well, there are two options:
Move the elements back to the form, and manually submit when the button is clicked
Clone the elements when you create the dialog, then clone the values back, trigger click on the original button (or, if you only have one or two values to post back, simply assign the values to an ASP.Net hidden field control).
From http://blog.coreycoogan.com/2010/12/01/jquerys-dialog-and-form-problems/
Tie it to the form by doing $("mydialog").parent().appendTo($("form:first")).
Note that you have to this call after you already called $("mydialog").dialog()
As seen in the answer for this question, jQuery dialog has a field appendTo, that can be used to configure where to put your dialog (div-wise) on initialization.
This seems to be the least ninja-workaround version to tackle the problem.