Develop Reference

Dropzone.js - Combine with normal form - ask about positioning

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>

Display Jquery .slide() form when Javascript is off in browser

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;}

Change div to form on click

I have a div with text inside:
<div id="test">Some text here to edit</div>
When the users clicks on this it needs to change to:
<form name="input" action="html_form_action.asp" method="get">
Edit: <input type="text" name="tex" value="Some text here to edit"/>
<input type="submit" value="Submit" />
</form>
How can I make it so when the user clicks on the text in the div, it will transform into an form/input box like above?

Demo
With HTML and jQuery (a JavaScript framework): http://jsfiddle.net/3qHst/1/.
Additional info
jQuery doc: .click(), .hide() and .show().
Code
html:
<div id="test">Some text here to edit</div>
<form name="input" action="html_form_action.asp" method="get" style="display: none;">
<label for="comment">Edit:</label>
<input type="text" id="comment" value="Some text here to edit"/>
<input type="submit" value="Submit" />
</form>
jquery:
$('#test').click(function(){
$(this).hide();
$('form').show();
});

HTML:
<form id='form' name="input" action="html_form_action.asp" method="get">
<div id="test">Some text here to edit</div>
<input type="text" name="tex" value="" class="hidden"/>
<input type="submit" value="Submit" class="hidden" />
</form>
Javascript:
$('#test').click(function() {
$('#test').hide();
$('#form').children('input').show();
$('#form').children('input[name=tex]').val($('#test').html());
});
CSS:
.hidden { display: none; }
#test { cursor: pointer; }
Try it out: http://jsfiddle.net/melachel/ymw4Z/

Well, you may be in luck, because there's a jquery plugin to do exactly that. There are actually a few, but I think this is the first one. The others were forks of this project if I'm not mistaken.
http://www.appelsiini.net/projects/jeditable
It would be somewhat easy to do what you're asking manually, but the jeditable plugin actually connects to a web service that saves the info to a database, which may or may not be what you're looking for.
Let me work on a jsfiddle and see what I can do.
EDIT
I made this jsfiddle - it works on my local machine, but I can't get it to work on my browser in jsfiddle for some reason. But I've been having trouble with jsfiddle recently, I have no idea why.
Anyway, here's the link. Let me know if this doesn't work.
http://jsfiddle.net/XXbgp/2/

You could also use the html5 contentEditable attribute on the div, which would allow you to make changes to the div inline.
http://blog.whatwg.org/the-road-to-html-5-contenteditable

Why is this function not called?

I'm trying to place a link on a page that will pop up a form for users to share the page via email...
<img src="images/email.jpg">
<div id="tellfriend">
<form id='tellafriend_form' method="post" onsubmit="return executeOnSubmit();"
action="sharemail.php" name="tellafriend_form">
<label for="name">Your Name:</label>
<input class="std_input" type="text" id="name" name="name" size="40" maxlength="35" value="">
<label for="to">Recipient's Email:</label>
<input class="std_input" type="text" id="to" name="email" size="40" maxlength="35">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="18" cols="40">
message here</textarea>
<input type="submit" onclick="javascript: pageTracker._trackPageview('/share/wf360');" name="submit" class="form_but" value="Submit">
</form>
</div><!-- #tellfriend -->
here's the javascript I'm using (in addition to jQuery):
<script>
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('#tellfriend').hide();
$('a.email, #tellfriend a.close').click(function() {
$("#tellfriend").fadeToggle('slow');
});
});
</script>
<script type="text/javascript">
function executeOnSubmit()
{
alert('Email has been successfully sent. Thanks for sharing!');
}
</script>
I'm not sure why it's not working: the form isn't popping up.

Answer: http://jsfiddle.net/morrison/f3Uy2/
Notes:
Uses the fadeToggle() function in jQuery.
Notice the changes to the html (ignore the kitten, if you'd like).

It appears you are trying to replace the already existing fadeToggle() function.
Also, the existing fadeToggle() function does not accept 'toggle' as a value for opacity. Quoted from the jQuery API page:
.fadeToggle() works on the same principle as .fadeOut() and .fadeIn(). Like .fadeOut(), .fadeToggle() will fade elements out if they are visible; like fadeIn(), it will fade elements in if they are hidden. Even if an element begins with opacity 0, if it takes up space in the document (i.e. it has a height or width), it isn't considered hidden. The same is true for an element with visibility: hidden. You can use .fadeTo() or .animate() to fade an element from one opacity to another without affecting its display property. If you do that, however, an element that initially has display: none won't become visible just because you're animating the opacity. Hope that helps.
So try removing the function you added at the beginning and it looks like the rest of your code should be okay.
Update:
After looking at your site, it appears you have two copies of jQuery, v1.4.2 (which doesn't have fadeToggle() and v1.5.2 which does have it. But you are loading v1.5.2 after a lot of other scripts have loaded... I get an error on firebug of "$ is not a function" because of this. So, try completely replacing v1.4.2 (the very first script tag) with v1.5.2.... and get firebug ;)
And actually, the script does work - but other scripts are probably broken due to the above reasons. The form pops up WAY at the top next to the first image. You'll need to change the position from absolute to relative and adjust the left to around 130px in the CSS.

jQuery modal window removes elements from my form

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.