Develop Reference

how to alert Error Messagen in Marketing form

i have a Marketing form and i need to change the display error message see Picture.
my form :
and I want That my error message be like This:
here is my Code :
<div>
<div>
<meta type="xrm/designer/setting" name="layout-editable" value="marketing-designer-layout-editable">
<meta type="xrm/designer/setting" name="layout-max-width" value="600px" datatype="text" label="Layout max width">
<form data-container="true" style="null" action = "" method = "get" novalidate>
<style>
div[data-editorblocktype=Field-radioButtons]
{
width: 25% ;
text-align: left ;
}
div[data-editorblocktype=Field-radioButtons] input
{
width: auto;
height: auto;
margin-bottom: 3px;
float: right;
}
div[data-editorblocktype=Field-radioButtons] span.lp-radioButton
{
/* This rule is needed to style all radio button fields. For product constraints each option is defined as input and label wrapped into a span*/
display: block;
margin: 2px;
}
[data-layout="true"]
{
margin: 0 auto;
max-width: /* #layout-max-width */
600px /* #layout-max-width */
;
}
</style>
<div data-layout="true" tabindex="0">
<div data-section="true" class="emptyContainer">
<div style=" display: flex;width: 100%;flex-wrap: wrap;">
<div style="clear:both;"></div>
<div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 70px; min-width: 20px; width: calc(100% - 0px); padding: 10px; float: left; word-wrap: break-word; word-break: break-word; flex-direction: column;">
<div data-editorblocktype="Image">
<div class="imageWrapper" width="100%" align="Center">
<img alt="Test Newsletter" class="" src="https://test/Y0gdmVq8p6izVL5Ig6QF2elBYT71iDv3rsgqHc-uOI8!" style="max-height: 100%; max-width: 100%; position: static; display: block; top: 0px; left: 0px; box-sizing: border-box;">
</div>
</div>
<div data-editorblocktype="Text"><p><big><big><span><strong>Abonnieren Sie unseren </strong></span></big></big><br>
<span><big><big><strong>Test Newsletter!</strong></big></big></span></p>
<p><span style="font-size:16px;">Nach der Übermittlung Ihrer Kontaktdaten erhalten Sie von <em>info#test.de</em> einen Bestätigungslink, um die Anmeldung abzuschließen.</span></p>
</div>
<div data-editorblocktype="Text"><p>* Pflichtfelder</p> </div>
<div data-editorblocktype="Field-text" style="text-align: center;">
<div class="marketing-field" style="text-align: center;">
<div class="lp-form-field" data-required-field="false" style="text-align: left;"><label class="lp-ellipsis" for="3f746946-34b4-442c-a677-e232cdd2bc40" title="">Vorname</label>
<input class="lp-form-fieldInput form-control form-text lp-form-fieldInput" data-requirederrormessage="Pflichtfeld! Bei Bedarf ein Pseudonym verwenden" id="3f746946-34b4-442c-a677-e232cdd2bc40" name="3f746946-34b4-442c-a677-e232cdd2bc40" placeholder="Vorname" style="width:100%" title="" type="text" value="Vorname" autocomplete="given-name">
</div>
</div>
</div>
<div data-editorblocktype="Field-text">
<div class="marketing-field">
<div class="lp-form-field" data-required-field="false"><label class="lp-ellipsis" for="e1dfc514-f301-4cb2-855a-4c8fa8331207" title="">Nachname</label>
<input class="lp-form-fieldInput form-control form-text lp-form-fieldInput" data-requirederrormessage="Pflichtfeld! Bei Bedarf ein Pseudonym verwenden." id="e1dfc514-f301-4cb2-855a-4c8fa8331207" name="e1dfc514-f301-4cb2-855a-4c8fa8331207" placeholder="Nachname" style="width:100%" title="" type="text" value="Nachname " autocomplete="family-name">
</div>
</div>
</div>
<div data-editorblocktype="Field-email">
<div class="marketing-field">
<div class="lp-form-field" data-required-field="true"><label class="lp-ellipsis" for="7f685ebb-7c54-4cff-a1bc-772562d25c38" title="">E-Mail-Adresse</label><span class="lp-required">*</span>
<input class="lp-form-fieldInput form-control form-text lp-form-fieldInput" id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" placeholder="E-Mail-Adresse" required="required" style="width:100%" title="" type="email" autocomplete="email">
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div data-section="true" class="">
<div style="
display: flex;
width: 100%;
;flex-wrap: wrap;">
<div style="clear:both;"></div>
<div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 70px; min-width: 20px; width: calc(100% - 0px); padding: 10px; float: left; word-wrap: break-word; word-break: break-word; flex-direction: column;">
<div data-editorblocktype="Field-dropdown" style="display: none;">
<div class="marketing-field">
<div class="lp-form-field" data-required-field="true"><label class="lp-ellipsis" for="f7796368-6e5b-e911-a96e-000d3ab496ce" title="">Datenquelle</label><span class="lp-required">*</span>
<select class="lp-form-fieldInput" id="f7796368-6e5b-e911-a96e-000d3ab496ce" name="f7796368-6e5b-e911-a96e-000d3ab496ce" required="required" title="">
<option value="120000002">E-Mail (nachverfolgen)</option>
<option value="120000001">Aktion</option>
<option selected="selected" value="120000003">Newsletter / Mailing</option>
<option value="181510000">Projekt-Workshop</option>
<option value="181510001">Registrierung auf Webportal</option>
<option value="120000000">Veranstaltung</option>
<option value="100000000">Visitenkarte erhalten </option>
</select>
</div>
</div>
</div>
<div data-editorblocktype="SubscriptionListBlock">
<div class="marketing-subscription-list"><input class="lp-form-fieldInput" id="e6648b6d-0894-e911-a971-000d3ab496c3" name="e6648b6d-0894-e911-a971-000d3ab496c3" required="required" type="checkbox"> <label for="e6648b6d-0894-e911-a971-000d3ab496c3">Ich habe die Datenschutzerklärung gelesen und akzeptiert.<span class="lp-required">*</span></label><br>
 
</div>
</div>
<div class="btn." data-editorblocktype="SubmitButtonBlock">
<p align="“center“"><button class=".btn .btn-primary lp-form-button lp-form-fieldInput" name="submit" type="submit">Anmeldung absenden</button></p>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</form>
</div>
</div>

As it has already been mentioned in the comments, you should use JavaScript to validate the form. Here is a runnable code snippet:
function formValidate() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var tc = document.getElementById("tc");
if (fname.length === 0) {
document.getElementById("errfname").style.display = "block";
document.getElementById("errorbox").style.display = "block";
} else {
document.getElementById("errfname").style.display = "none";
}
if (lname.length === 0) {
document.getElementById("errlname").style.display = "block";
document.getElementById("errorbox").style.display = "block";
} else {
document.getElementById("errlname").style.display = "none";
}
if (email.length === 0) {
document.getElementById("erremail").style.display = "block";
document.getElementById("errorbox").style.display = "block";
} else {
document.getElementById("erremail").style.display = "none";
}
if (tc.checked === false) {
document.getElementById("errtandc").style.display = "block";
document.getElementById("errorbox").style.display = "block";
} else {
document.getElementById("errtandc").style.display = "none";
}
if (fname.length !== 0 && lname.length !== 0 && email.length !== 0 && tc.checked === true) {
window.location.href = "https://stackoverflow.com";
}
}
body {
background-color: lightblue;
}
input[type=text],
input[type=email] {
width: 80%;
font-size: 20px;
float: right;
}
.errorbox {
background-color: red;
color: white;
width: 98%;
position: relative;
padding: 1%;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Example form</title>
</head>
<body>
<div class="errorbox" id="errorbox">
<p id="errfname" style="display: none;">Please enter your first name!</p>
<p id="errlname" style="display: none;">Please enter your last name!</p>
<p id="erremail" style="display: none;">Please enter your Email address!</p>
<p id="errtandc" style="display: none;">Please check the terms and conditions check box!</p>
</div>
<h1>Test newsletter!</h1>
<p>This is a test newsletter</p>
<p><span style="color: red;">* </span> Required fields</p><br>
<span style="color: red;">*</span>First name:
<input type="text" placeholder="First name" id="fname"><br><br>
<span style="color: red;">*</span>Last name:
<input type="text" placeholder="Last name" id="lname"><br><br>
<span style="color: red;">*</span>Email-address:
<input type="email" placeholder="Email address" id="email"><br><br><br>
<input type="checkbox" name="checkbox" id="tc">I agree to the Terms and Conditions of this website.<br>
<button onclick="formValidate()">Submit</button>
</body>
</html>

Anomalous padding/margin during slideToggle() jquery

Does slideToggle() change padding or margins during the transition and than bringing them back to normality? Bacause i'm trying to toggle two forms, one for login and one for registration for a static html page, but during the transition something like a top margin is created between my forms and other stuff (A text to be precise) and than everything is resized back to how it is supposed to be.
First screen is with static page and no transition, the latter during the transition: https://imgur.com/a/R5pppq5
Here the code, I'm programming on Atom with live server plugin:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
padding-bottom: 10%;
padding-top: 0;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
button.toggle_home {
top: 0px;
padding-bottom: 2%;
transform: translate(0, -100%);
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<hr>
<div class="toggle_home" style="float:left;">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>

For anyone looking for another solution to this issue, you can use a pseudo element with a fixed height in place of margins to stop the collapsing margins effect, e.g:
.hidden-element:before {
display: block;
width: 100%;
height: 24px; /* the top margin height you want */
content: '';
}
You can also use an :after for the bottom margin.

I believe the changing gap is a result of margin collapse.
Parent and first/last child
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block ... then those margins collapse. The collapsed margin ends up outside the parent.
On page load, margins are collapsed between p.index_text and the <hr> inside form#login. When jQuery starts slideDown(), it adds overflow:hidden to the sliding element #form#login. This creates "clearance" between the <p> and the <hr> and the margin stops collapsing. Visually, the gap increases between the two elements.
There are various methods to prevent margin collapse. I chose padding since the other form already has some:
#login {
padding:15px;
}
Working example:
// Example starter JavaScript for disabling form submissions if there are invalid fields
var index_toggle = new Boolean(true);
$(document).ready(function() {
$("#toggle_home").click(function() {
$("#login").slideToggle("slow");
$("#register").slideToggle("slow");
$("#toggle_home_txt").fadeOut(function() {
if (index_toggle) {
$(this).html("↧ LOGIN").fadeIn();
} else {
$(this).html("↥ REGISTER").fadeIn();
}
index_toggle = !index_toggle;
});
});
});
#register {
display: none;
}
body.index {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 80px;
padding-bottom: 40px;
background-color: white;
color: #6c757d;
}
div.index {
padding-top: 40px;
padding-bottom: 0px;
border-radius: 3%;
width: 500px;
}
button {
border-radius: 20%;
background-color: #e9ecef;
border-color: #6c757d;
border-style: solid;
color: #6c757d;
transition: 0.3s ease;
}
button:focus {
outline: none;
}
#send_butt {
width: 40px;
height: 40px;
}
button:hover {
background-color: #6c757d;
color: white;
}
img.index {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
background-color: #e9ecef;
border-color: white;
border-style: solid;
}
.form-signin {
width: 450px;
padding: 15px;
margin: auto;
}
#login {
padding:15px;
}
hr,
#register {
margin: 0 !important;
}
#div_toggle {
display: flex;
align-items: center;
}
#div_toggle:after {
content: "";
flex: 1 0 auto;
border-top: 1px solid #CCC;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="text-center index">
<div class="jumbotron index form-signin">
<img src="images/user_index.png" class="index" />
<p id="index_text" class="my-3">Please fill this form to create an account.</p>
<form id="login" novalidate>
<hr>
<div class="form-row">
<!-- Username input -->
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="LoginUsername" placeholder="Username" required>
</div>
</div>
</div>
<!-- Password input -->
<div class="form-row">
<input type="password" class="col-md-6 mb-3 form-control" id="LoginPassword" placeholder="Password" required>
<div class="text-right col-md-6 mb-3 form-check">
<input class="form-check-input" type="checkbox" id="LoginRemember">
<label class="form-check-label" for="LoginRemember">Remember me?</label>
</div>
</div>
</form>
<div id="div_toggle">
<button id="toggle_home" class="toggle_home">
<div id="toggle_home_txt">
↥ REGISTER
</div>
</button>
</div>
<form id="register" class="form-signin mt-5" novalidate>
<div class="form-row">
<div class="col mb-3">
<input type="text" class="form-control" id="RegName" placeholder="First name" required>
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control" id="RegSurname" placeholder="Surname" required>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"> ›</span>
</div>
<input type="text" class="form-control" id="RegUsername" placeholder="Username" required>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegPassword" placeholder="Password" required>
</div>
<div class="col-md-6 mb-3">
<input type="password" class="form-control" id="RegConfirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<hr/>
</form>
<div style="float:right;">
<button id="send_butt" class="mb-2">›</button>
</div>
</div>
</body>
The animations also seem to jump and the end, but that may be a separate issue.
Edit
Further jumping seems to have been caused by margin on the second form, so I removed it. The translated button seemed to cause problems, too, so I rebuilt it. Code above was edited accordingly.

How can i filter a list of divs when 2 checkboxes are checked using jquery or javascript?

I have a list of 4 divs and i use 2 checkboxes to filter the list by the existence of specific divs. The filtering works perfect until i check both 2 checkboxes.
As you can see in my code below if you try to check both "Card" & "Paypal" checkboxes the list is disappeared. Instead i need to display all of 4 divs. How can i make it work this way?
Here's the code:
$("#by-card").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.card-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
$("#by-paypal").change(function() {
$('.store-block .store-payment-options').each(function() {
if ($(this).find('.paypal-available').length === 0) {
$(this).parent(".store-block").toggleClass('hide-me');
}
});
});
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class=" inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class=" inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

To get that behaviour you need to change the code which you have:
You need to have a single change function for the checkboxes of paypal and card
Then whenever any of the checkbox is checked/unchecked, you can loop both the checkboxes to know if any of them is checked. If you get the checkbox checked then show the elements with class store-block where I have also added one more class same as the id value of the checkbox that is clicked.
Using this class value it will be easy to determine the set of divs that belong to the particular checkbox.
You also need to manage the scenario when all the checkbox are unchecked after they were checked so, for that I have used a variable oneChecked.
$(".inputRadioGroup input[type='checkbox']").change(function() {
var oneChecked = false;
$(".inputRadioGroup input[type='checkbox']").each(function(){
var checked = this.checked;
var checkedId = $(this).attr('id');
if(checked){
oneChecked = true;
$('.'+checkedId).show();
} else {
$('.'+checkedId).hide();
}
});
if(!oneChecked){
$('.store-block').show();
}
});
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes-area">
<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block by-card">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block by-card">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block by-paypal">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

I'm not good at jQuery, but here's how I'd solve that using good old plain vanilla Javascript. The key change to your approach is to listen for the change event on a parent element of both checkboxes (instead of on each checkbox with a seperate handler), then check if either, or both, or no checkboxes are checked, and create the appropriate DOM state accordingly:
var checkboxArea = document.querySelector('.checkboxes-area')
var storeBlocks = Array.from(document.querySelectorAll('.store-block'))
var byCard = document.getElementById('by-card')
var byPaypal = document.getElementById('by-paypal')
var cardBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.card-available')
})
var payPalBlocks = storeBlocks.filter(function(block) {
return block.querySelector('.paypal-available')
})
checkboxArea.addEventListener('change', function(e) {
switch (true) {
case byCard.checked && byPaypal.checked:
storeBlocks.forEach(function(block) { block.classList.remove('hide-me') })
break
case byCard.checked:
cardBlocks.forEach(function(block) { block.classList.remove('hide-me') })
payPalBlocks.forEach(function(block) { block.classList.add('hide-me') })
break
case byPaypal.checked:
cardBlocks.forEach(function(block) { block.classList.add('hide-me') })
payPalBlocks.forEach(function(block) { block.classList.remove('hide-me') })
break
default:
payPalBlocks.concat(cardBlocks).forEach(function(block) { block.classList.remove('hide-me') })
}
})
.search-area {
margin-bottom: 10px;
}
.storesList {
margin-top: 20px;
}
#count {
display: inline-block;
}
.store-block {
width: 80%;
margin-bottom: 10px;
padding: 5px;
background: #e5e5e5;
position: relative;
overflow: hidden;
}
.rating {
position: absolute;
right: 70px;
top: 3px;
}
.minorder {
position: absolute;
right: 180px;
top: 3px;
}
.paypal-available,
.card-available {
position: absolute;
right: 10px;
top: 5px;
font-size: 11px;
font-weight: bold;
color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
.hide-me {
display: none;
}
.checkbox-lab {
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
<div class="checkboxes-area">
<div class="inputRadioGroup">
<input type="checkbox" id="by-card">
<label for="by-card">Card</label>
</div>
<div class="inputRadioGroup">
<input type="checkbox" id="by-paypal">
<label for="by-paypal">Paypal</label>
</div>
</div>
<div class="storesList">
<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="rating">&bigstar; 4.5</div>
<div class="minorder">100 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="rating">&bigstar; 3.8</div>
<div class="minorder">250 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="rating">&bigstar; 4.0</div>
<div class="minorder">25 €</div>
<div class="store-payment-options">
<div class="card-available">CARD</div>
</div>
</div>
<div class="store-block">
<div class="store-name">Linux</div>
<div class="rating">&bigstar; 4.9</div>
<div class="minorder">50 €</div>
<div class="store-payment-options">
<div class="paypal-available">PAYPAL</div>
</div>
</div>
</div>

How to save the push data to json from controller block

I'm new with Angular. I need to find out how to save my JSON changes after clicking the save button. i have added the save button and count varible in controller, where u can not add more than 3 rows. how to add save controller to capture all three rows data together and post to json at a time.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.employeeCount = 2;
$scope.personalDetails = [];
$scope.addNew = function(personalDetails) {
$scope.personalDetails.push({
'objtyp': personalDetails.objtyp,
'activ': personalDetails.activ,
'comm': personalDetails.comm,
});
$scope.PD = {};
};
$scope.remove = function() {
var newDataList = [];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected) {
if (!selected.selected) {
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function() {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function(personalDetails) {
personalDetails.selected = $scope.selectedAll;
});
};
}]);
x
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat center center;
position: relative;
padding-top: 40px;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info h1 {
background-color: rgba(255, 255, 255, 0.7);
overflow: hidden;
text-align: center;
padding: 10px;
font-weight: bold;
font-family: arial;
font-size: 83px;
margin: 450px 0px 27px 0px;
}
.card.hovercard .card-info .card-title {
background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display: block;
background-position: center -450px;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius: 0 !important;
}
.btn-primary {
margin-right: 10px;
}
.container {
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="emp_details">
<h3><span>Anil Kumar K</span></h3>
<h3><span>IND1469</span></h3>
<hr></hr>
<h2><span>Manager</span></h2>
<h3><span>Vikram Ranade</span></h3>
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="card hovercard">
<div class="card-background">
<!-- <img class="card-bkimg" alt="" src="http://lorempixel.com/100/100/people/9/">
http://lorempixel.com/850/280/people/9/ -->
</div>
<!-- <div class="useravatar">
<img alt="" src="anil.png">
</div> -->
<div class="card-info">
<h1><span class="card-title">OBJECTIVES</span></h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-sm-2">
<div class="side_menu">
</div>
</div>
<div class="col-lg-10 col-sm-10">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">JOB</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Behaviour</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div ng-app="myapp" ng-controller="ListController">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew(personalDetails)">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Objective Type</th>
<th>Activity</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected" /></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.objtyp" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.activ" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.comm" required/></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="button" class="btn btn-primary pull-left" ng-click="save()" value="Save">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New" ng-disabled="personalDetails.length>employeeCount">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
</div>

If you want to save json by $http post API, try this-
$scope.save = function(){
// maintain an array of selected items
$scope.selected = [];
angular.forEach($scope.personalDetails, function(detail){
if(detail.selectd){
$scope.selectd.push(detail);
}
});
// post this data to server using $http
$http({
url: '/request-url',
method: "POST",
data: { 'data' : $scope.selectd }
})
.then(function(response) {
// success, do something
},
function(response) { // optional
// failed , do something
});
}
Do not forget to define $http dependency in you controller like -
app.controller("ListController", ['$scope','$http', function($scope, $http){
//.....your controller with save and other functions..
}

Position dropdown-menu right under menu header

I am trying to position my dropdown-menu right under my menu header like in following image. At best I get it to position right next to it, but is it possible to achieve my objective?
Here my FIDDLE ... FIDDLE
Please see the example in my FIDDLE/BOOTPLY which shows the result of my code correctly. In SA its not right, sorry about that.
My code...
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
$(".products .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.products .btn_clear').css('background', 'blue');
$('.products .btn_apply').css('background', 'green');
});
$(".availability .checkbox").on("click", function(e) {
var i = $("li").index( $(this).parent() );
console.log(i);
$('.availability .btn_clear').css('background', 'blue');
$('.availability .btn_apply').css('background', 'green');
});
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color:grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color:yellow
}
.checkbox label, .radio label {
min-height: 20px;
padding-left: 30px;
padding-right:30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius:0;
margin-top:5px
}
.dropdown-menu {
border-radius:0;
border:5px solid blue;
position: relative;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width:90%;
margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu products" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu availability" style="margin-left: 2em">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
<label><input value="" type="checkbox"> One</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Two
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Nine</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Eight</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Seven</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div><!--Warning buttons with dropdown menu-->
</div>

Here you go, I removed the JavaScript and removed the left margin and relative positioning from the dropdown menu: http://www.bootply.com/KaP7SiUYVw
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.checkbox:hover {
background-color: red;
cursor: pointer;
}
.div_form:hover {
background-color: green;
cursor: pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
background-color: grey
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
background-color: yellow
}
.checkbox label,
.radio label {
min-height: 20px;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}
.div_form {
position: absolute;
bottom: 0;
bottom: -70px
}
.btn {
border-radius: 0;
margin-top: 5px
}
.dropdown-menu {
border-radius: 0;
border: 5px solid blue;
background-color: red;
border-top-width: 0px;
}
.typeahead {
width: 90%;
margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Products</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu products">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="countries" placeholder="Countries" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">Alpha</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Beta
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Gamma</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Delta</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Omega</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Availability</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
</button>
<div class="dropdown-menu availability">
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label>
<input value="" type="checkbox">One</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Two
</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Nine</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Eight</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Seven</label>
</div>
<div class="checkbox">
<label>
<input value="" type="checkbox">Fifteen
</label>
</div>
<div class="div_form">
<span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
</div>
</div>
</div>
</div>
</div>
<!--Warning buttons with dropdown menu-->
</div>