I am working on jquery slide tab and its working fine on button click. But I want that button stitch with panel and also should slide with panel. currently button is fix and panel working as expected.
Here Is FIDDLE
HTML
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu">
<div class="slide-out-div" style="z-index: 999;">
<form class="generalForm bookingForm" action="#" method="post">
<div class="row">
<div class="col-sm-12">
<label>Name<span>*</span></label>
<input type="text" name="Name" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Email <span>*</span></label>
<input type="text" name="Email" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Contact No <span>*</span></label>
<input type="text" name="contact_no" class="required" />
</div>
<div class="col-sm-12 mar_top">
<label>Say Few Words<span>*</span></label>
<input type="text" name="feedback" class="required" />
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Submit" style="background-image:none; padding-left:20px;" />
</div>
</div>
</form>
</div>
</div>
</div>
CSS
.sidebarmenu{
position:absolute;
right:-250px;
z-index:999999;
}
JS
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
if(hidden){
$('.sidebarmenu').animate({
right: '-250px'
},500)
} else {
$('.sidebarmenu').animate({
right: '0px'
},500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});
As want to move button along with form, then you need add one parent and move that only instead form see demo
HTML
<div class="panel">
<button id="showmenu" type="button" class="feed_btn">Feed Back</button>
<div class="sidebarmenu"> -- your code --</div>
</div>
JS
$('#showmenu').click(function () {
var hidden = $('.sidebarmenu').data('hidden');
if (hidden) {
$('.panel').animate({
marginRight: '-250px'
}, 500)
} else {
$('.panel').animate({
marginRight: '0px'
}, 500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});
Related
I am in need of some help. I want to create a web page that has two buttons depending on which button is selected I want to display either form 1 or form 2. The next thing is if the user selects the button for form 1 I want to do form validation only for the selected form.
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<button type="button" class="btn btn-outline-primary">show form 1</button>
<button type="button" class="btn btn-outline-primary">show form 2</button>
<br>
<form id="form1" class="needs-validation" novalidate>
<hr>
<p>THIS IS FORM 1</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form1 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form1 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form1</button>
</form>
<br>
<form id="form2" class="needs-validation" novalidate>
<hr>
<p>THIS IS FORM 2</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form2 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form2 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form2</button>
</form>
See if it fits your requirements.
I just added an event to the buttons that just flips the display property of the two forms.
For the validation, only the displayed form is validated, but once you validate a form it remains validated.
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
function toggle(i) {
let form1 = document.getElementById('form1');
let form2 = document.getElementById('form2');
if (i == 1) {
form1.style.display = 'none';
form2.style.display = 'block';
} else {
form1.style.display = 'block';
form2.style.display = 'none';
}
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<button type="button" id="btn1" class="btn btn-outline-primary" onclick="toggle(2)">show form 1</button>
<button type="button" class="btn btn-outline-primary" onclick="toggle(1)">show form 2</button>
<br><br>
<form id="form1" class="needs-validation" novalidate>
<hr>
<p>THIS IS FORM 1</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form1 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form1 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form1</button>
</form>
<form id="form2" class="needs-validation" style="display:none" novalidate>
<hr>
<p>THIS IS FORM 2</p>
<hr>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">form2 box 1</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">form2 box 2</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="form1 box 2" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form2</button>
</form>
For this kind of things i recommend you to use some framework by the way, something like vuejs, or also jquery for simple things.
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
When click button submit, required bootstrap appear in the top left corner.
My code in JSFiddle
HTML:
<div class="content">
<form action="#">
<div class="form-group">
<label for="input">Text</label>
<input type="text" class="form-input" id="input" required="required" value="Title"/>
</div>
<div class="form-group">
<label for="contents">Contents</label>
<textarea name="text" class="summernote" id="contents" required="required" title="Contents"></textarea>
</div>
<button type="submit" class="btn btn-default">submit</button>
</form>
</div>
JS:
$(function() {
$('.summernote').summernote({
height: 200,
width: 600
});
$('form').on('submit', function (e) {
e.preventDefault();
alert($('.summernote').code());
});
});
The image like this :
How can I make Validation With Bootstrap appear under textarea?
Thank you
I have a form and i used CKEditor in textareas to format the content of textarea e.g. bullets, font color, size etc.
i have written below JS code to disable the submit button till filling all some specific fields. JS code works on text fields but not in textarea field because of CKEditor.
If possible i want to also make this JS code to work on textareas where CKEditors are used.
JS Code
<script type="text/javascript">
$(function() {
$(function() {
$('#sbtbtn').attr('disabled', 'disabled');
});
$('input[type=text],textarea,input[type=password]').keyup(function() {
if ($('#target1').val() !='' &&
$('#editor1').val() != '') {
$('#sbtbtn').removeAttr('disabled');
} else {
$('#sbtbtn').attr('disabled', 'disabled');
}
});
});
</script>
HTML
<form action="insert.php" method="post" class="ara-form" name="theform" >
<header>Enter Job Details</header>
<fieldset>
<div class="row">
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" id="target1" placeholder="Job Title" name="positiontitle">
<div class="note note-error">This is a required field.</div>
<span class="error"></span>
</label>
</section>
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" id="target2" placeholder="Organization / Company Name" name="companyname">
<div class="note note-error">This is a required field.</div>
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input">
<i class="icon-append icon-company"></i>
<input type="text" id="target3" placeholder="Location" name="location" >
<div class="note note-error">This is a required field.</div>
</label>
</section>
</div>
</fieldset>
<fieldset>
<section>
<label class="textarea">
Tell us about your company background
<textarea id="editor1" rows="10" cols="80" name="background" placeholder="Tell us about your company background"></textarea>CKEDITOR.replace( 'editor1' );
var textarea = document.body.appendChild( document.createElement( 'textarea' ) );
CKEDITOR.replace( textarea );
</label>
</section>
<section>
<label class="textarea">
Job Summary
<textarea id="editor2" rows="10" cols="80" name="summary" placeholder="Job Summary"></textarea>
</label>
</section>
</fieldset>
<footer>
<p>Fill all fields to activate the submit button.</br>
Thanks</p><i class="fa fa-check" style="float: right; position: relative; right: 22px; color: white; z-index: 1; padding-top: 23px;"></i><input
class="button" type="submit" value="Submit"
id="sbtbtn" />
<div style="float: right; padding-right: 10px;"><?php
include "../module/back.php";
?></div>
</footer>
</form>
CKEditor call
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
try this:
CKEDITOR.replace('editor1', {
on: {
change: function() {
var inst = CKEDITOR.instances['editor1'];
if (inst.getData() != '') {
$('#sbtbtn').removeAttr('disabled');
} else {
$('#sbtbtn').attr('disabled', 'disabled');
}
}
}
});
Bound the change event on initalizing, and get data by CKEDITOR.instances['editor1'].getData()
See the document:
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-on
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle