We Keep Coding

Hover the mouse out of button?

If I hover the mouse out of the login button, the dropdown menu appears, I want it to appear only if I hover the mouse on the button, how can I do?
Also, how can I position the login button on the far right?

you have added the hover on the .dropdown div which has the form, login button and other elements. So whenever you hover on the .dropdown div you will see the dropdown menu.
If you want the dropdown menu to be shown only when the user hovers on the login menu then you need to add the :hover on login button. Or you can control the same by adding the JavaScript mouseover listener on login button.
I hope you find the below code helpful.
<div class="dropdown">
<button>Admin</button>
<form action="UserProfile">
<input type="submit" value="Profilo">
</form>
<form action="Logout">
<input type="submit" value="Logout">
</form>
<span>
<button class="logInButton" onclick="openForm()">Login</button>
<div id="form-block" class="form-popup">
<form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post">
<span id="validEmail"></span>
<ul style="list-style: none;">
<li><label for="email">Email</label></li>
<li><input id="email" class="form-field" type="text" name="email"></li>
<span id="validPassword"></span>
<li><label for="password">Password</label></li>
<li><input id="password" class="form-field" type="password" name="password"></li>
<li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li>
<li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li>
<li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li>
</ul>
</form>
</div>
</div>
function openForm() {document.getElementById("form-block").style.display = "block";}
function closeForm() {document.getElementById("form-block").style.display = "none" ;}
function clearForm() {
var form = document.forms["signin-form"];
form.email.value = null;
form.password.value = null;
}
.logInButton {
background-color: #345059;
margin: 10px 0px 0px 0px;
color: white;
font-size: 16px;
padding: 16px;
border: none;
overflow: hidden;
position: relative;
float: right;
}
.form-popup {
display: none;
position: absolute;
background-color: #f2fcff;
}
.form-popup a {
color: black;
padding: 0;
text-decoration: none;
}
.logInButton:hover ~ .form-popup {
display: block;
}
.logInButton:hover {background-color: #2e3538;}
<div class="dropdown">
<button>Admin</button>
<form action="UserProfile">
<input type="submit" value="Profilo">
</form>
<form action="Logout">
<input type="submit" value="Logout">
</form>
<span>
<button class="logInButton" onclick="openForm()">Login</button>
<div id="form-block" class="form-popup">
<form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post">
<span id="validEmail"></span>
<ul style="list-style: none;">
<li><label for="email">Email</label></li>
<li><input id="email" class="form-field" type="text" name="email"></li>
<span id="validPassword"></span>
<li><label for="password">Password</label></li>
<li><input id="password" class="form-field" type="password" name="password"></li>
<li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li>
<li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li>
<li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li>
</ul>
</form>
</div>
</div>

js progress bar,html form error and pop up

I just want to make a form and wen users fill then click submit it should run a progress bar (which will run to 50%) and pop up error that will refer the user to "contact us" page......i.e the progress bar is supposed to pop up and run it shouldn't appear on the page except user click on the submit after filling the form.....here are my codes ... the progressive bar, the css and the html form
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 50) {
clearInterval(id);
$('#error').css("display", "block");
$('#popupContact').css("display", "block");
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 0%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
#error {
color: #F00;
display: none;
}
#popupContact {
display: none;
}
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">0%</div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<div id="error">
Could not connect; please transfer manually.
</div>
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form action="#" method="post" id="form">
<img src="images/3.png" id="close" onclick="div_hide()" />
<h2>Transfer Details</h2>
<hr/>
<fieldset>
<legend>Reciever's information:</legend>
Account Number:
<br>
<input type="text" name="Account number" onkeyup="checkInput(this)" value="" id="name" placeholder="Account Number">
<br> Account Name:
<br>
<input type="text" name="Account Name" value="" id="name" placeholder="Account Name">
<br>
<br> Routing (ABA):
<br>
<input type="text" name="Routing (ABA)" onkeyup="checkInput(this)" id="name" value="" placeholder="Routing (ABA)">
<br>
<br> Bank Name:
<br>
<input type="text" name="Bank Name" id="name" value="" placeholder="Bank Name">
<br>
<br> Account Type:
<br>
<select name="Account Type" placeholder="Account Type">
<option>Fix Deposit</option>
<option>Checking</option>
<option>Savings</option>
<option>Current</option>
</select>
</fieldset>
<a id="submit" href="javascript: check_empty()" onclick="move()">Send</a>
<p><span>Note :</span> All Form Is Required.</p>
</form>
</div>

How can I submit a form via POST?

<form id="search" action="#" method="post" style="float: left">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" onclick="searchbox()" for="search-terms" id="search-label" class="glyphicon glyphicon-search"></button>
</div>
</form>
When the user clicks on div id label, I want to toggle the display property of div input. which is working fine. I have used following code to implement the functionality.
function searchbox(){
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
}
I want to to submit the form data via POST but that functionality is not working, neither by pressing enter key nor when submit button is clicked.
Please help me with this.

Try submitting through JS
HTML
<form id="search" action="#" method="post">
<div id="input" style="float: left; margin-left: 10px;" >
<input type="text" name="search-terms" id="search-terms" placeholder="Search websites and categories..." style="width: 300px;">
</div>
<div id="label" style="float: left; margin-right: 10px;">
<button type="submit" for="search-terms" id="search-label" class="glyphicon glyphicon-search">click</button>
</div>
</form>
JS
$(".glyphicon").click(function(e){
e.preventDefault();
if ($("#input").css('display') == 'none') {
$('#input').css('display','block');
} else {
$('#input').css('display','none');
}
$( "#search" ).submit();
});

you have to use <input type=submit> for submitting

Submit Button not disappearing with ng-disabled

I've set up a form with Angular integrated into it. In this form, I want the final submit button to only show up when the form is valid. There are a number of fields, but the only fields that are required are the one's for a user'a name, email-address, and a checkbox. The form recognizes when a required field is invalid, however I can't get the submit button to disappear (and subsequently reappear).
Here's code for reference:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
If you notice towards the bottom, I have a ng-disabled set with "captions | validateFields". I've tried this with a simply truthy statement as well so its not the filter I set up.
Edit: With feedback I've gotten what I initially wanted to do working with ng-show. However, ng-disabled would actually be more appropriate for what I want. I've added relevant css.
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
Can anyone explain how to get the submit button to show only after all fields are valid?

Try ng-enabled="captions.$valid" to disable (visible but not clickable) and ng-show="captions.$valid" to hide the button if the form is invalid.
More about forms in angular: https://docs.angularjs.org/api/ng/directive/form

Not tested, but you can use the $valid property of your form like this:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
But if you want the button to disappear completely, use ng-hide="!captions.$valid" instead of the ng-disabled directive

It's fairly easy
hide completly
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
visually disable
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">

Please help me prevent Bootstrap radio buttons from submitting my form too early (using Javascript?)

My process:
First I designed a signup form for my website using Bootstrap
Then, I created a signup form using MailChimp, so I can track and contact my signups
I then generated the embed form HTML markup, and combined the two
The issue:
The part that is breaking the form is that the Bootstrap radio button toggle uses input type="button" and the MailChimp form I am trying to map it to uses type="radio".
If I don't use type="radio", the submission works but when I check the information on my subscribers in MailChimp, I am missing data from that part of the form on.
If I use type="radio", the form prematurely submits when the user tries to use the toggle button, so basically the form submits before they can finish filling out the rest of the form.
JSFiddle Demo of the issue is here: http://jsfiddle.net/halsey/qwPzy/9/
The solution?
I am aware of threads like this, which say you will need to override this behavior with javascript, but I can't find an example of how to do this.
I'm sure this is embarrassingly easy but I am having trouble locating resources to help me learn how to fix this. Thanks in advance for any help you can provide.
Footnote
StackOverflow is preventing me from linking to JSFiddle without embedding code. I would encourage you to use the link above, but my broken attempt at embedding the code is below. Apologies for the weird formatting but I am having trouble embedding the code in one chunk - I am a StackOverflow beginner.
HTML:
<form action="http://foorder.us6.list-manage1.com/subscribe/post?u=81c3da3b3ebbf564cf50a78ff&id=f16451f556" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<fieldset class="mc-field-group">
<div class="form-field input-prepend">
<span class="add-on">http://Foorder.com/</span>
<input class="span3 required" id="prependedInput mce-MMERGE2" type="text" placeholder="YourProfile" value="" name="MMERGE2">
</div><!-- / .formfield .input-prepend -->
<div class="form-field">
<input type="email" class="span3 required email" placeholder="Email" value="" name="EMAIL" id="mce-EMAIL">
<input type="text" class="span2 required" placeholder="Zip Code" value="" name="MMERGE8" id="mce-MMERGE8">
</div><!-- / .formfield -->
<div class="form-field">
I want to
<div class="btn-group" data-toggle="buttons-radio">
<button type="radio" class="btn" value="Buy" name="MMERGE3" id="mce-MMERGE3-0">Buy</button>
<button type="radio" class="btn" value="Sell" name="MMERGE3" id="mce-MMERGE3-1">Sell</button>
</div>
items on Foorder
</div><!-- / .formfield -->
<div class="form-field">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#promo-code-toggle">
Have a promo code?
</button>
<div id="promo-code-toggle" class="collapse">
<input type="text" class="span2" placeholder="Promo Code" value="" name="MMERGE1 promocodeinput" id="mce-MMERGE1 promo-code-input">
</div><!-- / .formfield -->
</div><!-- / .formfield -->
<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>
<div class="form-field">
<button type="submit" class="button btn btn-primary" value="Subscribe" name="subscribe" id="mc-embedded-subscribe">Submit</button>
</div><!-- / .formfield -->
</fieldset>
</form>
CSS HEAD links:
<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="http://foorder.com/_Resources/SBX/css/bootstrap.css" rel="stylesheet">
<link href="http://foorder.com/_Resources/SBX/css/bootstrap-responsive.css" rel="stylesheet">
Javascript BODY links:
<script src="http://foorder.com/_Resources/SBX/js/jquery.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-transition.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-alert.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-modal.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-dropdown.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-scrollspy.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-tab.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-tooltip.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-popover.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-button.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-collapse.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-carousel.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-typeahead.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/bootstrap-affix.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/holder/holder.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/google-code-prettify/prettify.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/application.js"></script>
<script src="http://foorder.com/_Resources/SBX/js/custom.js"></script>

Have you tried putting an "onsubmit" on the form and running thru a function to determine testing?
ala
<form action="http://foorder.us6.list-manage1.com/subscribe/post?u=81c3da3b3ebbf564cf50a78ff&
id=f16451f556" method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form" class="validate" target="_blank"
onsubmit="return checkValidity(this);">
and in your js code:
function checkValidity(form){
if(){
// return false <-- doesn't submit
}
}

So this JSFiddle that I found on the Bootstrap Github worked for me: http://jsfiddle.net/charettes/SauLj/
HTML:
<div class="btn-group">
<input type="radio" name="radios" id="radio_1" />
<label class="btn" for="radio_1">Radio one</label>
<input type="radio" name="radios" id="radio_2" />
<label class="btn" for="radio_2">Radio two</label>
<input type="radio" name="radios" id="radio_3" />
<label class="btn" for="radio_3">Disabled radio three</label>
CSS:
.btn-group > input {
display: none;
}
.btn-group input:first-child + .btn {
/* This is an actual copy/paste of the .btn-group .btn:first-child style */
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
margin-left: 0;
}
input:checked + label.btn {
/* This is an actual copy/paste of the .btn:active style */
background-color: #E6E6E6;
background-image: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.5);
outline: 0 none;
}
input[disabled] + label.btn {
/* This is an actual copy/paste of the .btn:disabled style */
background-color: #E6E6E6;
background-image: none;
box-shadow: none;
cursor: default;
opacity: 0.65;
}