Develop Reference

Display element next to another from different parts of the DOM tree

I have two forms, one larger and one smaller. I would like to display the smaller form next to a specific input of the larger form. It's not valid html to embed one form within another in the DOM, but is there a way to display one form over / inside another form next to a specific input using CSS or JS?
<!-- Main Form -->
<form action="action1" method="post">
Name <input type="text" name="name" value="">
Job Title <input type="text" name="job_title" value="">
Cell Number <input type="tel" name="mobile" value=""> <!-- SMALLER FORM SHOULD DISPLAY NEXT TO CELL # INPUT -->
Favorite Sport <input type="text" name="favorite_sport" value="">
Hobbies <input type="text" name="hobbies" value="">
<input type="submit" value="Save">
</form>
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form"></form>
<!-- js -->
<script src="external_js_library.js"></script>
<script>
// js code to load form into #optin_js_loaded_form using external_js_library.js
</script>
NOTES
The forms need to be separate because the smaller form is created via an external js library from a marketing service.
I know I could make the data from the larger form submit via ajax, but I'm hoping I can save some work by just changing where the smaller form displays.
EDIT 2020-02-05 14:40
Found a webpage that suggests some possible solutions, but doesn't give much direction on how to implement them. https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968

You could make use of the form attribute to avoid the nesting of form elements. You move the controls from the main form outside of that form element, and add the form attribute to all of them.
Now you can place the small form at its desired position, without violating the HTML rule that form elements should not be nested.
You would still need to apply some CSS on that small form element, so it does not flow to the left. Something like display: inline-block or similar could be useful.
Here is the suggested HTML part:
<form id="mainform" action="action1" method="post"></form>
<div>
Name <input type="text" name="name" form="mainform" value="">
Job Title <input type="text" name="job_title" form="mainform" value="">
Cell Number <input type="tel" name="mobile" form="mainform" value="">
<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form">
</form>
Favorite Sport <input type="text" name="favorite_sport" form="mainform" value="">
Hobbies <input type="text" name="hobbies" form="mainform" value="">
<input type="submit" form="mainform" value="Save">
</div>

Replace form with another form on button click

I have 2 forms. I want when button is clicked to show another form on first form position. So just to replace that form.
Form 1
<div id="right">
<form id="contact" class="visible" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</form>
</div>
Form 2
<div id="form2">
<form id="contact2" action="" method="post">
<fieldset>
<input name="fname" placeholder="Ime" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input name="lname" placeholder="Prezime" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="tel" placeholder="Telefon" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input name="email" placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Pošalji</button>
</fieldset>
</div>
jQuery
$("#contact-submit").on("click", function() {
$("#contact").removeClass("visible");
$("#form2").addClass("visible");
});
So for some reason this is not working. Please help me to solve this. I tried to set opacity:0; of first form but it doesn't work. And please let me know which libary is should use.
Here is my example: http://codepen.io/anon/pen/PzKaPa

EDIT: So I looked at your pen and fixed it so it works: http://codepen.io/anon/pen/OXjEQd
It looks like you'll need to do a couple of things, one of which you might have already: first, place your jquery in a ready function (and make sure you've linked a jquery version in your head tag)--
$(function(){
// your code
});
Then, in your click handler, add a preventDefault():
$('#contact-submit').on('click',function(e){
e.preventDefault();
// rest of code
});
e.preventDefault() keeps your submit button from doing it's default action--submitting the form. This lets you perform other actions with the button. If you don't include this, the very first thing that will happen when your button is clicked is form submission, and you'll not get to any of the other code inside your click event.
This also assumes you have a .visible class defined in your css. If not, you'll need to add that as well, or instead of using addClass and removeClass, you'll need to change the display property on the form directly:
$('#contact').css('display','none');
$('#form2').css('display','block');

Unless you have defined the class visible somewhere else (and have set the CSS defaults for your forms to be hiddne, adding or removing it will have no effect.
Instead, I'd recommend you directly change the display property of the two:
$("#form2").css("display", "none"); // so it's initially invisible
$("#contact-submit").on("click", function() {
$("#contact").css("display", "none");
$("#form2").css("display", "");
});
This will directly alter the style attribute on each element, causing them to hide or show. Using css("display", "") will remove the setting.
You might also look into the hide and show methods in jQuery as they can do the same thing, only with a nice animation.

Unless you have specific CSS that applies to elements with or without the class 'visible', removing and adding that class to the elements will do nothing.
You may want to try
$("#contact-submit").on("click", function() {
$("#contact").toggle();
$("#form2").toggle();
});
to toggle form visibility, and you can initially apply visibility on the forms using CSS or built-in jQuery classes.

Div with multiple text color

Please I want to know how this works just like the stackoverflow. When codes are being displayed, the text display in multiple colors just like in a text editor app.
<form action="myForm.php" id="my_form" method="post">
<input type="text" name="user_name" id="user_name" />
<input type="email" name="email" id="email" />
<input type="password" id="password" name="password" />
<input type="submit" name="submit" id="submit" />
</form>
Please I want to know how its been done. Is it an application added to the site or just coding. If it's a bulky process please I will appreciate helpful clues on how it works but if it's a short process please I need a better explanation
Here, I just screenshot this question and you can see what I mean

It's done using javascript. I recommend this one https://highlightjs.org/ in "usage" page there is a quick start guide.
Good luck.
--- UPDATE
Here is a simple example how to use it:
Assuming you already added the dependencies files such as highlighjs.min.js and a code styling css file into your page, the code bellow should work perfectly.
The code block
<pre>
<code class="html">
<form action="myForm.php" id="my_form" method="post">
<input type="text" name="user_name" id="user_name" />
<input type="email" name="email" id="email" />
<input type="password" id="password" name="password" />
<input type="submit" name="submit" id="submit" />
</form>
</code>
</pre>
Javascript to escape and highlight blocks
$(document).ready(function () {
$("pre code").each(function () {
// Escape HTML code
$(this).html($("<p/>").text($(this).html()).html());
// Apply highlighting to the block
hljs.highlightBlock(this);
});
});
The result will be a pretty highlighted code!
JSFiddle: https://jsfiddle.net/evandroprogram/5sgrmsd4/

<div class="container">
<span style="background-color:red">this span is red</span>
<span style="background-color:green">this span is green</span>
<span style="background-color:blue">this span is blue</span>
</div>
You can later set height and width properties of the div, can also make it more attractive using gradient effects.

jqBootstrapValidation plugin is not working for my form

This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();

You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!

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.