Showing / Hiding Div With jQuery - javascript

I'm using toggle() but it's not working. My script is in the footer:
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").toggle();
});
});
or I've also tried addClass():
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
Basically I'm just trying to toggle between showing and hiding the form divs.
When product-suggestion-form-container is clicked on, form-div-top should show.
When contact-us-form-container is clicked on, form-div-bottom should show.
Then they should hide when those divs are clicked on again.
Shouldn't clicking on product-suggestion-form-container cause form-div-top to become active and therefore to display: flex? Not sure why nothing's happening.
I was just getting the jQuery from here, but ideally I'd like to add a smooth transition and whatever other best practices you might suggest for doing this.
$(document).ready(function(){
$("product-suggestion-form-container").click(function(){
$("form-div-top").addClass("active");
// $("form-div-top").toggle();
});
});
.form-div-outer {
margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
background-color: #f8f7f7;
border: 1px solid #c6c6c6;
}
/*initial display*/
.form-div-inner-top {
display: none;
}
.form-div-inner-bottom {
display: none;
}
.form-div-inner-top:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-div-inner-bottom:active {
display: flex;
flex-direction: column;
padding: 20px;
}
.form-input {
margin: 10px 0;
padding: 5px;
border: none;
background-color: #ffffff;
width: 100%;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-div-outer">
<div class="product-suggestion-form-container">
<span class="form-title">Product Suggestion Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-top">
<form class="form-div-inner-top">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group description-of-product-desired">
<input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
</span>
</form>
</div>
</div>
<div class="form-div-outer">
<div class="contact-us-form-container">
<span class="form-title">Contact Us Form</span>
<span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
</span>
</div>
<div class="form-div-bottom">
<form class="form-div-inner-bottom">
<span class="input-group input-group-name">
<input type="text" placeholder="Name" class="form-input" required></input>
</span>
<span class="input-group input-group-email-address">
<input type="text" placeholder="Email Address" class="form-input" required></input>
</span>
<span class="input-group input-group-contact-reason">
<div class="contact-reason-container">
<ul class="radiolist">
<li>
<input class="radio" type="radio"><label>Order question</label>
<input class="radio" type="radio"><label>Website feedback</label>
<input class="radio" type="radio"><label>Trouble finding product</label>
</li>
</ul>
</div>
</span>
</form>
</div>
</div>

It seems you have forgot .s in your code to access the data.
$(document).ready(function(){
$(".product-suggestion-form-container").click(function(){
$(".form-div-top").toggle();
});
});

Related

jQuery clone() is appending to multiple elements instead of just one

I want to make clonable form fields that get wrapped in to the div. I am able to clone the element but the problem is if I have multiple groups of similar fields, it is adding fields to all other groups regardless instead of only to the group for the button I clicked.
How can I clone fields only for the current $(this) element and not for others?
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo('.gs-customer-form-group');
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
The issue is due to the .appendTo('.gs-customer-form-group') call. This appends the cloned content in to every .gs-customer-form-group element. You need to only append to the one related to the clicked span. You already have a reference to that element from siblings(), so you can put it in a variable for use later:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event) {
let $group = $(this).parent().siblings('.gs-customer-form-group');
$group.children().last().clone().appendTo($group);
});
.gs-customer-field-box {
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group {
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel {
color: red;
cursor: pointer;
}
.btnAdd {
color: green;
cursor: pointer;
}
.active {
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr/>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>
You can do it like this:
let cloneInput = $('.clonedInput');
let btnAdd = $('.btnAdd');
let btnDel = $('.btnDel');
btnAdd.on('click', function(event){
$(this).parent().siblings('.gs-customer-form-group').children().last().clone().appendTo($(this).parent().siblings('.gs-customer-form-group'));
});
.gs-customer-field-box{
background-color: #fff;
width: 300px;
margin: auto;
font-family: sans-serif
}
.gs-customer-btn-group{
margin: 20px 0;
display: flex;
justify-content: space-between;
}
.btnDel{
color: red;
cursor: pointer;
}
.btnAdd{
color: green;
cursor: pointer;
}
.active{
background-color: yellow;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry1" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel1" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd1">add</span>
</div>
</div>
<hr />
<div class="gs-customer-field-box product-singular">
<h6>Add Customer Details</h6>
<div class="gs-customer-form-group" id="gs-customer-form-group">
<div id="entry2" class="clonedInput gs-customer-fields">
<input class="gs-field customer-name" type="text" name="name[]" placeholder="Name">
<input class="gs-field customer-email" type="email" name="email[]" placeholder="Email">
</div>
</div>
<div class="gs-customer-btn-group">
<span class="gs-customer-delete btnDel" id="btnDel2" disabled="disabled">delete</span>
<span class="gs-customer-add btnAdd" id="btnAdd2">add</span>
</div>
</div>

Jquery validation engine wrong position

I have been facing this issue. I tried many things but no one worked. My validation error on this page always visible on left side. This is my vaildation engine jquery. Please help.
$("#register_form").validationEngine({
showOneMessage: true,
scroll : false,
maxErrorsPerField: 1,
promptPosition: "bottomLeft",
updatePromptsPosition: true,
autoPositionUpdate: true,
});
});
HTML
This is my form.
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" id="register_form">
<div class="col-100">
<input type="text" class=" twidh validate[required, minSize[2]] " maxlength="60" placeholder="Your Name" name="name" id="rname" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[email]]" maxlength="100" placeholder="Your Email Address" name="remail" id="remail" onblur="validateEmail()" />
<span id="runame" class="errroes"></span> </div>
<div class="col-100">
<input type="password" class=" twidh validate[required, minSize[6]]" placeholder="Your Password" name="password" id="rpassword" />
<span class="errroes" id="rpwd"></span> </div>
<div class="col-100">
<input type="text" class=" twidh validate[required, custom[onlyNumber] ,minSize[10],maxSize[10]]" maxlength="10" maxlength="10" placeholder="Enter Mobile Number" name="mobile" id="phone" />
</div>
<div class="col-100">
<div class="text-hea" id="gender">Gender</div>
<div class="twidh">
<div class="names">
<input type="radio" class="radioo" value="M" id="male" name="sex" /> Male </div>
<div class="names">
<input type="radio" class="radioo" value="F" id="female" name="sex" checked="checked" /> Female
</div>
</div>
</div>
</div>
<div class="link" style="text-align:left !important"> By clicking Register, you agree to <strong>Terms of Use</strong> and <strong>Privacy Policy.</strong>
</div>
<div class="col-100">
<div class="col-md-2">
<input type="submit" class="ss1 st" name="register" value="Register Now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
I found your HTML on your website. The problem is caused by a style position: relative on your .link class. You have applied it on your OR block, just above the form.
You can fix this quite easily by apply another position: relative style on your form element. So it would become like this:
<form action="/sregister.php" method="post" id="register_form" style="
position: relative;
">
I just tested this on your live website, and it works pretty well.
Checked issue on your site. You are using below inline styling.
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px;
but in this case "left" is not recognized as already this property is given important in strap.css.
check below code in strap.css
.formError {
left: 30px !important;
}
Now you can update your inline styling as
opacity: 0.87;
position: absolute;
top: 241px;
right: initial;
margin-top: 0px;
display: block;
left: 489.5px !important;
It will work.

Bootstrap : Button appearance changes upon hover

I am seeing this weird button behavior (the text on the button becomes near invisible) in my bootstrap button when I do a mouse hover on it.
This is my markup (Salesforce VF page with bootstrap)
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>
<style>
.red{
color:red;
}
.form-area
{
//background-color: #FAFAFA;
background-color:#77F2F2;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
#submit
{
//color:#BF99E5;
font-family: "Helvetica";
border-radius:10px;
padding:10px;
}
</style>
<script>
j$ = jQuery.noConflict();
j$(document).ready(function(){
//alert("test");
//j$('#submit').hover(function(){alert('thisissdfsdfh');});
j$('#characterLeft').text('140 characters left');
//j$('#btnSubmit').focus(function(){alert('sdfsdf');});
j$('#message').keydown(function () {
var max = 140;
var len = j$(this).val().length;
if (len >= max) {
j$('#characterLeft').text('You have reached the limit');
j$('#characterLeft').addClass('red');
j$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
j$('#characterLeft').text(ch + ' characters left');
j$('#btnSubmit').removeClass('disabled');
j$('#characterLeft').removeClass('red');
}
});
});
</script>
</head>
<apex:form >
<div class="container">
<div class="col-md-10">
<div class="form-area">
<br />
<h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
<br />
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
<input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
<input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>
</div>
</div>
</div>
</apex:form>
</apex:page>
In the last line in HTML if I remove the attribute "class="btn btn-primary pull-right" from button tag then the behavior is ok.
When I do a mouse hover it looks like below :
When NOT mouse hover it looks fine :
Can someone tell me what is wrong ?
Try this in your css,
#submit:hover, #submit:focus, #submit:active {
color:#BF99E5;
}
Bootstrap has custom CSS on hover, active, focus for appropriate elements. This should override them
It seems that some of your code overrides the stylings of bootstrap. However, if you really want to change the color of text on your button, then you may add hover in your style like:
input#submit:hover{
color: #000; /* Black */
}
That's it! :) Happy coding :) Please comment if you have problem with my solution, its my pleasure to help others :)

Bootstrap - Reducing spacing between form-controls like textbox and label

I'm developing the a .NET(C#) MVC web-application.
I have the following bootstrap drop-down menu.
I'm trying to achieve the following two things :
1) I'm trying to reduce the spacing between a label and it's respective text-box. I tried using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label" but then the textbox overlapped the label.
2) I want to reduce the height of the textbox.
How can I achieve these?
here's my cshtml code :
<div class="container">
<div class="row">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search" id="searchBar" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span></button>
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA">
<br />
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtCreatedBy" />
#*#Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*#
</div>
</div>
<div class="form-group row">
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
<label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
<div class="col-md-2">
<input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" />
</div>
</div>
//and so on
</form>
</div>
</div>
<button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
</div>
</div>
And here's my CSS code :
.dropdown.dropdown-lg .dropdown-menu {
margin-top: -1px;
padding: 6px 20px;
}
.input-group-btn .btn-group {
display: flex !important;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-group .form-control:last-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#media screen and (min-width: 1000px) {
#adv-search {
width: 1110px;
margin: 0 auto;
}
.dropdown.dropdown-lg {
position: static !important;
}
.dropdown.dropdown-lg .dropdown-menu {
min-width: 1110px;
}
}
I'm trying to reduce the spacing between a label and it's respective text-box.
Give your texboxes a css class (pull-left or whatever you want to call it) and then use css to pull the textboxes to the left.
.pull-left {
margin-left: -20px; /* Try with different values until you are happy */
}
I want to reduce the height of the textbox.
Try using padding and line-height and play with the numbers until you are happy with the height:
input[type="text"]{ padding: 20px 10px; line-height: 28px; }
The above will apply 20px to top and bottom and 10px to left and right. Here are some other ways:
padding: 20px 10px 20px 10px; /*top right bottom left*/
Finally make sure these margins play well when you are changing the size of the screen. If it looks good on big screen, it may not look good on smaller screens so choose something which will look good across all screens.

Elements in bootstrap filterbar not correctly sized

I'm building a filter on top of my grid. I defined a custom filter class. In this filterclass I also try to incorperate a checkbox that is in the same style as my inputbox. For some reason I cannot get it the same size as the rest of my elements. Below the fiddle of what I'm doing. Can someone point me out what I'm doing wrong?
http://jsfiddle.net/52VtD/6763/
<div class="FilterBar">
<div>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon ">Set date</span>
<input type="text" class="form-control" />
<span class="input-group-addon">to</span>
<input type="text" class="form-control" />
</div>
</div>
<div>
<div class="input-group">
<span class="input-group-addon ">Group Flocks</span>
<span class="input-group-addon">
<input type="checkbox"/>
</span>
</div>
</div>
<div class="pull-right">
<button type="button" class="btn btn-warning pull-right">Filter</button>
</div>
.FilterBar {
position: relative;
display: table;
}
.FilterBar > div {
display: table-cell;
padding-right: 8px;
vertical-align: top;
}
.Toolbar .btn-group, .Toolbar .btn-group-vertical {
vertical-align: inherit;
}
.form-control has line-height: 1.42857;
.input-group-addon has line-height: 1;
See http://jsfiddle.net/52VtD/6766/ I added
.input-group-addon {
line-height: 1.42857;
}
U can add class "form-control" to Group Flocks and add one more class .some with line-height: 20px;
HTML
<div class="input-group">
<span class="input-group-addon form-control some">Group Flocks</span>
<span class="input-group-addon"> <input type="checkbox"/> </span>
</div>
And CSS:
.some {
line-height: 20px;
}
http://jsfiddle.net/52VtD/6764/ this is not the best solution
u can try to put all your line in div with class="row" and give all tabs some sizes like .col-xs-4

Categories