I know variations of this questions have been asked multiple times on this site, but I'm going to give it another try. I feel like I have tried every combination of code possible trying to get this to work, but have had no luck. All I want to do is to get the 'Advanced:' text on the button/dropdown toggle to change to one of the selected dropdown item options when clicked (Item1, Item2, etc).
All functions are obviously not going to end up in my code, but I just wanted to give examples of what I have already tried.
$(function () {
$("#dropdown").click(function () {
$("#AdvancedSearch").text($(this).find(":selected").text());
$("#dropdown option:selected").text();
var text = $("#AdvancedSearch").text($(this).text());
alert(text);
});
});
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText);
});
$(function () {
$("#dropdown").on('click', 'li a', function () {
$("#AdvancedSubmit").text($(this).text());
$("#AdvancedSubmit").val($(this).text());
});
});
$(function () {
$("#dropdown").click(function () {
$("#AdvancedSubmit").text($(this).text());
$("#AdvancedSubmit").val($(this).text());
});
});
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
Try this :
$(function () {
$("#dropdown a").click(function () {
$("#AdvancedSearch .selection").text('Advanced:'+$(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
What you want is to execute a function when user click the list link.
This function must take the text inside it's own tag, and we must put that text inside every element having "selection" class.
$(function () {
$(".dropdown-menu li a").click(function () {
var selText = $(this).text();
$(".selection").html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row buffer">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
<div class="input-group" role="group" >
<div class="input-group-btn" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
<div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
<li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
<li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
<li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<div class="input-group" role="group">
<input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
</div>
</div>
</div>
</div>
Good perseverance on your attempts !
Related
I am trying to add active class to a Submit button provided any of the options from a button group is selected. For some reason I am not able to make it work.
https://jsfiddle.net/75ybncud
$('#optionbutton1').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeAttr('disabled');
$('#submitbutton').addClass('active');
});
$('#optionbutton2').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeAttr('disabled');
$('#submitbutton').addClass('active');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="btn-group list-group" role="group" id="fabricList">
<button type="button" class="list-group-item list-group-item-action" id="optionbutton1">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 1</p>
</div>
</button>
<button type="button" class="list-group-item list-group-item-action" id="optionbutton2">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 2</p>
</div>
</button>
</div>
<div class="row my-4 mx-auto">
<a class="btn btn-info mr-auto ml-3 disabled" href="#select-color" id="submitbutton">Submit</a>
</div>
</div>
You have to remove class disabled using .removeClass() not attribute as it's a class on your button.
This is a class in bootstrap that disables the <button>/<a> tags:
$('#optionbutton1').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeClass('disabled');
$('#submitbutton').addClass('active');
});
$('#optionbutton2').on('click', function(e) {
$('#submitbutton').prop('aria-disabled', false);
$('#submitbutton').removeClass('disabled');
$('#submitbutton').addClass('active');
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="btn-group list-group" role="group" id="fabricList">
<button type="button" class="list-group-item list-group-item-action" id="optionbutton1">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 1</p>
</div>
</button>
<button type="button" class="list-group-item list-group-item-action" id="optionbutton2">
<div class="row">
<p class="font-weight-bold col-sm-2">Option 2</p>
</div>
</button>
</div>
<div class="row my-4 mx-auto">
<a class="btn btn-info mr-auto ml-3 disabled" href="#select-color" id="submitbutton">Submit</a>
</div>
</div>
I have two cards with collapse.
When the user clicks on a letter in the pagination I want the .card-body to adapt display:none if there are no divsto be shown in the card. Otherwise there is always some empty white space below the card-header.
the .card-body is the .parent() of $('#Categories > .acc-row')
For now I'm only able to either hide all card-bodies,none of them or just the first one.
Below is a snippet to my whole code. And here is a link to a fiddle
Here are snippets of what I've been working on for the last few hours ( none of the snippets works correctly).
var toHide = $('div.acc-row');
if(toHide.filter(':visible').length == 0){
$('.collapse').collapse("hide");
}
Another
if ($('#Categories > .acc-row').is(":visible")) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
And another
$('#Categories > .acc-row').each(function(){
if ($(this).is(":visible")) {
$(this).parent().show();
}else{
$(this).parent().hide();
}
});
And here is my latest approach
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
$(document).ready(function(){
$("#alphf .acco").each(function(){
$(this).on("click", function(){
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
if (cat != 0) {
$('#Categories > .acc-row').hide();
//$('#Categories > .acc-row:hidden').parent().hide();
$('#Categories > .acc-row[data-cat-type="'+cat+'"][data-cat-name="'+nam+'"]').show();
}
//var toHide = $('div.acc-row');
// if(toHide.filter(':visible').length == 0){
// $('.collapse').collapse("hide");
// }
// if ($('#Categories > .acc-row').is(":visible")) {
// $('#Categories > .acc-row').parent().show();
// }else{
// $('#Categories > .acc-row').parent().hide();
// }
// $('#Categories > .acc-row').each(function(){
// if ($(this).is(":visible")) {
// $(this).parent().show();
// }else{
// $(this).parent().hide();
// }
//
// });
if ($('#Categories > .acc-row:hidden')) {
$('#Categories > .acc-row').parent().show();
}else{
$('#Categories > .acc-row').parent().hide();
}
});
});
$("#search").on("keyup", function(e) {
//$('button').removeClass('collapsed');
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/accordion_css.css">
<script src="js/jquery_3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popover.min.js"></script>
<script src="js/accordionFilter.js"></script>
<script src="js/scripts.js"></script>
<title>Accordion filter</title>
</head>
<body>
<div class="container">
<nav>
<ul class="pagination" id="alphf">
<!-- <li class="disabled"><span aria-hidden="true">«</span></li> -->
<li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
<li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
<li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
<li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
<li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
<li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
<li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
<li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
<li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
<li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
<li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
<li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
<li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
<li><a class="acco" href="#" data-cat-name="N" data-cat-type="N">N</a></li>
<li><a class="acco" href="#" data-cat-name="O" data-cat-type="O">O</a></li>
<li><a class="acco" href="#" data-cat-name="P" data-cat-type="P">P</a></li>
<li><a class="acco" href="#" data-cat-name="R" data-cat-type="R">R</a></li>
<li><a class="acco" href="#" data-cat-name="S" data-cat-type="S">S</a></li>
<li><a class="acco" href="#" data-cat-name="T" data-cat-type="T">T</a></li>
<li><a class="acco" href="#" data-cat-name="U" data-cat-type="U">U</a></li>
<li><a class="acco" href="#" data-cat-name="V" data-cat-type="V">V</a></li>
<li><a class="acco" href="#" data-cat-name="X" data-cat-type="X">X</a></li>
<li><a class="acco" href="#" data-cat-name="Y" data-cat-type="Y">Y</a></li>
<li><a class="acco" href="#" data-cat-name="Z" data-cat-type="Z">Z</a></li>
<!-- <li><span aria-hidden="true">»</span></li> -->
</ul>
</nav>
<div class="accordion accordian-wrapper" id="accordionStaff">
Search: <input id="search" type="text">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h5 class="accordian-title"> Department one </h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p>Aston</p>
</div>
<div class="col-md-4">
<p>Tracker</p>
</div>
<div class="col-md-3">
<p>aston#some.com </p>
</div>
<div class="col-md-2">
<p>Phone:: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p data-cat-type="A">Arleen</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>arleen#firm.is</p>
</div>
<div class="col-md-2">
<p>phone 1239484999</p>
</div>
</div>
<div class="row acc-row" data-cat-type="J" data-cat-name="J">
<div class="col-md-3">
<p data-cat-type="J">John</p>
</div>
<div class="col-md-4">
<p>Registar</p>
</div>
<div class="col-md-3">
<p>jj#arn.com </p>
</div>
<div class="col-md-2">
<p> 1234565469</p>
</div>
</div>
<div class="row acc-row" data-cat-type="K" data-cat-name="K">
<div class="col-md-3">
<p data-cat-type="K">Kyle
</p>
</div>
<div class="col-md-4">
<p>Driver
</p>
</div>
<div class="col-md-3">
<p>kdrive#company.com
</p>
</div>
<div class="col-md-2">
<p> 1234567890
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<h5 class="accordian-title"> DepartmentTwo</h5>
</button>
</h2>
</div>
<div id="name-cats">
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body" id="Categories">
<div class="row acc-row" data-cat-type="A" data-cat-name="A">
<div class="col-md-3">
<p id="staff_name" data-cat-type="A">Allan</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>allan#lsome.com </p>
</div>
<div class="col-md-2">
<p>Phone: 1234567890</p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p id="staff_name" data-cat-type="B">Brad</p>
</div>
<div class="col-md-4">
<p>IT-Guy</p>
</div>
<div class="col-md-3">
<p>brad#some.com </p>
</div>
<div class="col-md-2">
<p> 1234567890 </p>
</div>
</div>
<div class="row acc-row" data-cat-type="B" data-cat-name="B">
<div class="col-md-3">
<p>Brent</p>
</div>
<div class="col-md-4">
<p>Specialist</p>
</div>
<div class="col-md-3">
<p>brent#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
<div class="row acc-row" data-cat-type="E" data-cat-name="E">
<div class="col-md-3">
<p>Evan</p>
</div>
<div class="col-md-4">
<p>Chef</p>
</div>
<div class="col-md-3">
<p>evan#some.com </p>
</div>
<div class="col-md-2">
<p>123456789</p>
</div>
</div>
</div>
</div>
</div><!-- Filter -->
</div>
</div>
</div><!--container -->
</body>
</html>
You can iterate over each card body to control whether each row is visible or not. Thus, it is possible to hide the card body if no div is visible.
The whole code:
$(document).ready(function() {
$("#alphf .acco").each(function() {
$(this).on("click", function() {
$('.collapse').collapse("show");
var cat = $(this).data('cat-type');
var nam = $(this).data('cat-name');
// modified from here down
if (cat != 0) {
$('.card-body').each(function(i, cardBody) {
var hidebody = true;
($(cardBody.children)).each(function(f, accRow) {
$(accRow).hide();
if ($(accRow).data('catType') == cat && $(accRow).data('catName') == nam) {
hidebody = false;
$(accRow).show();
}
});
if (hidebody) {
$(cardBody).hide();
} else {
$(cardBody).show();
}
});
}
// modified from here up
});
});
$("#search").on("keyup", function(e) {
$('#collapseOne, #collapseTwo').removeClass('collapse');
var value = $(this).val().toLowerCase();
$('.acc-row').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
In addition, you must not have more than one same id attribute on the same page. So I recommend you to remove or modify the id #Categories.
Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !
Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>
I´m creating a multi-step form using bootstrap and jquery with 4 steps.
But I want that in each step validate the required fields, that is, the button to go to the next step should only work if the required fields are not empty.
But I´m not having success implementing this part of validating each step the required fields. Do you know how to do that?
Working example: https://jsfiddle.net/4vzf9qgr/2/
Jquery:
$(function(){
// navigation buttons
$('a.nav-link').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
e.preventDefault();
}
});
$(".next-step").click(function (e) {
var $active = $('.nav-pills li a.active');
$active.parent().next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.nav-pills li a.active');
prevTab($active);
});
function nextTab(elem) {
$(elem).parent().next().find('a.nav-link').click();
}
function prevTab(elem) {
$(elem).parent().prev().find('a.nav-link').click();
}
});
HTML
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h1 class="h5 text-center text-heading-blue font-weight-bold">Page Title</h1>
</div>
</div>
<div class="row mt-3 d-flex justify-content-center">
<div class="col-12">
<div class="registration_form">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<li class="">
<a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
Step 1<br><small class="d-none d-md-inline-block">General Info</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step2" data-toggle="tab" role="tab">
Step 2<br><small class="d-none d-md-inline-block">Conference Creator Info</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step3" data-toggle="tab" role="tab">
Step 3<br><small class="d-none d-md-inline-block">Registration Types</small></a>
</li>
</ul>
<form method="post" name="test" class="clearfix" action="/conference/store">
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
<div class="form-group">
<label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name</label>
<input type="text" required class="form-control" name="conference_name" id="conference_name">
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Categories</label>
<select id="tag_list" multiple class="form-control" name="conference_categories" id="conference_categories">
<option>category1</option>
<option>category2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="textarea" class="text-heading h6 font-weight-semi-bold">Description</label>
<textarea class="form-control" name="conference_description" id="textarea" rows="3"></textarea>
</div>
<div class="float-right">
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 2
</button>
</div>
</div>
<div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
<div class="form-group">
<label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold">Description</label>
<textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"></textarea>
</div>
<button type="button" href="#step1" data-toggle="tab" role="tab"
class="btn mr-2 btn-outline-primary btn prev-step">
Back to Step 1
</button>
<button type="button" href="#step3" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 3
</button>
</div>
<div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
<div class="form-group">
<label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
<input type="text" required class="form-control" name="registration_type_name" id="registration_type_name">
</div>
<div class="form-group">
<label for="registration_type_description" class="text-heading h6 font-weight-semi-bold">Registration Type Description</label>
<input type="text" class="form-control" name="registration_type_description" id="registration_type_description">
</div>
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-outline-primary btn prev-step">
Go Back To Step 2
</button>
<button type="submit"
class="btn mr-2 btn-primary btn">
Store
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
One way to do it is to use the div IDs that you have ("#step1", "#step2", etc) and have the button be disabled unless the following function returns true:
function validateForm(divId)
{
var inputs, index;
var form=document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
if (inputs[index].value==null || inputs[index].value=="")
{
alert("Field is empty");
$(buttonID).prop('disabled', true);
return
}
}
$(buttonID).prop('disabled', false);
}
Update/Additional comments:
I changed the function above to set the button instead of returning anything. At form load, have the button be disabled. Then add an onfocus attr to run an event listener like this:
function validateFormListener(divID, formObject) {
formObject.addEventListener("input", function(evt) {
validateForm(divID, buttonID)
})
}
Give the button an ID, then replace buttonID in the examples with this name. Change the input tags to look like this:
<input type="text" required class="form-control" onfocus="validateFormListener('#step1', buttonID, this)" name="conference_name" id="conference_name">
Here is the link - http://demo.crazewebconsultants.net/bag/customization.php
<div class="customizationbag">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12">
<div class="thumbimg">
<ul class="list-unstyled">
<li class="timgare"><img src="images/F.jpg" class="dummy_data"></li>
<li class="timgare"><img src="images/L.jpg" class="dummy_data"></li>
<li class="timgare"><img src="images/R.jpg" class="dummy_data"></li>
<li class="timgare"><img src="images/B.jpg" class="dummy_data"></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="custbigimg">
<img src="images/F.jpg" class="img-responsive">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="custbtnare">
<ul class="list-unstyled">
<li><button type="button" class="btn btn-primary"><i class="fa fa-upload" aria-hidden="true"></i> <p>Upload</p></button></li>
<li class="dropsave"><button type="button" class="btn btn-primary svoption"><i class="fa fa-floppy-o" aria-hidden="true"></i><p>Save</p></button>
<ul class="svop list-unstyled">
<li>Save as PNG</li>
<li>Save as JPG</li>
<li>Save as PDF</li>
</ul>
</li>
<li><i class="fa fa-print" aria-hidden="true"></i><p>Print</p></li>
<li><button type="button" class="btn btn-primary"><i class="fa fa-cart-plus" aria-hidden="true"></i><p>Add to Cart</p></button></li>
</ul>
</div>
<div class="qntare">
<form class="form-inline">
<div class="form-group">
<label>Quantity :</label>
<input type="text" class="form-control" value="1">
</div>
<div class="form-group">
<label>Price :</label>
<p>$200</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.thumbimg .dummy_data').click(function(){
$(".custbigimg img").attr("src",$(this).attr("src"));
});
});
</script>
<script>
$(document).ready(function(){
$("#print_button2").click(function(){
var mode = 'iframe'; // popup
var close = mode == "popup";
var options = { mode : mode, popClose : close};
$("div.custbigimg").printArea( options );
});
});
</script>
I just want to save image by using onclick as png, jpg and pdf. Can anybody help me? Using image id I want to save that particular image using onclick. If anybody show me the only one save system like save as png that was ok for me.
click on an image to asing href to the anchor
click in the anchor to download image
<a href="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png/revision/latest?cb=20151222170300" download><img src="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png/revision/latest?cb=20151222170300" ></a>
var currentImage = "";
$('img').click(function() {
var currentImage = $(this).attr('src');
console.log(currentImage);
$("#anchor").attr('href', currentImage).attr('download', currentImage);
});
img {
max-width:50px;
}
.hidden {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png" id="vader">
<img src="http://news.toyark.com/wp-content/uploads/sites/4/2015/08/Mafex-C-3PO-and-R2-D2-002.jpg" id="c3po">
<img src="http://vignette4.wikia.nocookie.net/es.starwars/images/6/6f/Anakin_Skywalker_RotS.png" id="annakin">
download image
In html5 you can use the download attribute in the anchor tag, just like this:
<a href="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png/revision/latest?cb=20151222170300" download><img src="http://vignette3.wikia.nocookie.net/disney/images/d/df/Darth_Vader_Render.png/revision/latest?cb=20151222170300" ></a>