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
Related
When I use inputmask for my form input elements TAB Key not working. I can't switch with other input via tab key. I want use TAB key for switch via inputmask
HTML FORM
<form class="validate-form mt-2 pt-50" action="KisiEkle" enctype="multipart/form-data" method="POST">
<div class="modal-body">
<label>TC: </label>
<div class="mb-1">
<input type="text" id="TC" name="TC" placeholder="TC bilgisi" class="form-control" autocomplete="off" required="required" />
</div>
<label>Ad Soyad: </label>
<div class="mb-1">
<input type="text" id="AdSoyad" name="AdSoyad" placeholder="Ad Soyad" class="form-control" autocomplete="off" required="required" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Ekle</button>
</div>
</form>
JAVASCRİPT CODE
$(document).ready(function () {
$("#TC").inputmask("*{11,11}", { clearIncomplete: true, greedy: false });
});
<script src="~/assets/js/jquery.inputmask.min.js"></script> //2022 Robin Herbots
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.
Basically i want to set up two radio buttons, one called 'Login' and the other called 'Register'
When the 'Login' radio button is checked i want the login section to be shown only and vise versa for the 'Register' button.
Any help is greatly appreciated
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="text-center"><img src="//placehold.it/110" class="img-circle"><br>Login</h2>
<div class="container">
<form role="form">
<label class="radio-inline">
<input type="radio" name="optradio">Login
</label>
<label class="radio-inline">
<input type="radio" name="optradio">Register
</label>
</form>
</div>
</div>
<div style="width:602px"class="modal-body row">
<form action="" method="post">
<div class="row">
<div style="padding-left:20px; padding-right:-20px class="col-sm-12 text-center">
<div class="form-group">
<label for="username">Username</label>
<input id="name" name="username" placeholder="Username" type="text" tabindex="1" class="form-control">
<div class="form-group">
<label for="password">Password</label>
<input id="password" name="password" placeholder="Password" type="password" tabindex="2" class="form-control">
<br>
<input class="form-control btn btn-success" name="submit" type="submit" value="Log In" id="submit" tabindex="4" >
<h4>Not a member? <label class="checkbox-Warning"><input type="checkbox" value=""></label></h4>
<!-- come back here and finished login and registration -->
<div class="text-center"><h3 style="text-align:center"><b>Register</b></h3></div>
<form id="register-form" action="index.php" method="post" role="form">
<div class="form-group has-feedback">
<label for="username">Username</label>
<span class="form-control-feedback input-validator-feedback" data-fieldname="username"></span>
<input type="text" name="newusername" id="newusername" tabindex="1" class="form-control validate-input" placeholder="Username" value="" autocomplete="off">
</div>
<div class="form-group has-feedback">
<label for="email">Email Address</label>
<span class="form-control-feedback input-validator-feedback" data-fieldname="email"></span>
<input type="text" name="newemail" id="email" tabindex="2" class="form-control validate-input" placeholder="Email Address" value="" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="newpassword1" id="password" tabindex="3" class="form-control" placeholder="Password" autocomplete="off">
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password</label>
<input type="password" name="confirm-password1" tabindex="4" id="confirm-password1" class="form-control" placeholder="Confirm Password" autocomplete="off">
<br>
<input type="submit" name="register-submit" id="register-submit" tabindex="5" class="form-control btn btn-success" value="Register">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
so all of the login should be visible when the login radio button is checked and all the register components should be hidden
I added an id to both of the buttons for document.getElementById.
<input type="radio" name="optradio" value="login" id="login-button" >
<input type="radio" name="optradio" value="register" id="register-button">
<script>
document.getElementById("login-button").addEventListener("click", function(){
document.querySelector('#login-div').style.display = 'initial';
document.querySelector('#register-div').style.display = 'none';
}, false);
document.getElementById("register-button").addEventListener("click", function(){
document.querySelector('#register-div').style.display = 'initial';
document.querySelector('#login-div').style.display = 'none';
}, false);
</script>
You could give the radio buttons different classes/id's, for example "registerbutton" and "loginbutton".
If you give the register part the class/id "register" and the login part the class/id "login", you can target them with jQuery.
You can put the following code between <script> tags.
$('.registerbutton').click( function() {
$('.login').css('display', 'none')
$('.register').css('display', 'inline-block')
});
$('.loginbutton').click( function() {
$('.login').css('display', 'inline-block')
$('.register').css('display', 'none')
});
jQuery works with css selectors, so '.loginbutton' is something with the class loginbutton. If you give the elements id's you should replace '.loginbutton' with '#loginbutton'.
I don't know if you've worked with jQuery yet, but if you haven't: don't forget to link a jQuery library. Don't forget it either when you have worked with it.
If you put this at the right before the closing </body> tag it should work.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.registerbutton').click( function() {
$('.login').css('display', 'none')
$('.register').css('display', 'inline-block')
});
$('.loginbutton').click( function() {
$('.login').css('display', 'inline-block')
$('.register').css('display', 'none')
});
</script>
The first <script> tag links the library with functions and the second tag calls the functions to make the thing work. If you give de html elements the right classes/id's.
Setup an event handler to notice if a radio button is ticked, and that responds to click events on the radio buttons.
With jQuery:
$("input[type=radio]").on('click', function () {
$(container).empty();
var newSection = $('input[type=radio]:checked').value; //Get name of the new section
$(container).append($('div.' + newSection));
});
On this click event, remove the html in the section and append the new section you'd like.
This answer doesn't necessarily tailor to your current code but is a concept for how you could approach it
Basically I would like to have all form inputs disabled until the "Edit Profile" button is clicked, then once the "Save Changes" button is clicked, have the disabled attribute reapplied.
I have tried a bunch of solutions from this site, with no luck. Any help would be appreciated, even if it's just guiding me int he right directions.
Here is the code, which is using bootstrap and contains Django (not shown, obviously). Thanks in advance.
<div class="main">
<div class="container">
<section class="hgroup">
<h1>My Profile</h1>
<h2>View and edit your profile.</h2>
<ul class="breadcrumb pull-right">
<li>Dashboard </li>
<li class="active">Profile</li>
</ul>
</section>
<section>
<div class="row">
<div class="contact_form col-sm-12 col-md-12">
<form name="contact_form" id="contact_form" method="post">
<div class="row">
<div class="col-sm-4 col-md-4">
<label>First Name</label>
<input name="first_name" id="name" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Middle Name</label>
<input name="middle_name" id="email" class="form-control" type="text" value="">
</div>
<div class="col-sm-4 col-md-4">
<label>Last Name</label>
<input name="last_name" id="email" class="form-control" type="text" value="">
</div>
</div>
<div class="col-sm-12 col-md-12">
<br/>
<a id="submit_btn" class="btn btn-primary" name="submit">Edit Profile</a>
<a id="submit_btn" class="btn btn-primary" name="submit">Save Changes</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</form>
</div>
</div>
</section>
</div>
</div>
Add some selectors to link -
Edit Profile
Save Changes
Disable all the input fields -
$('input').attr('disabled', true);
Alter the attributes of input fields -
$('#edit_profile').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', false);
});
$('#save_button').on('click', function(e) {
e.preventDefault();
$('input').attr('disabled', true);
});
Dont forget to include jquery. And e.preventDefault() for preventing the default action of the as.
Working Demo
You also have two elements that have the id submit_btn, id's should be unique.
I would change them to be different and then try:
$("#edit_btn").on('click', function() {
$("input[type='text']").removeAttr('disabled');
});
Then to re-disable:
$("#submit_btn").on('click', function() {
$("input[type='text']").attr('disabled', 'disabled');
});
You may wish to change the input[type='text'] selector if you have more inputs on the page you don't want disabled.
Maybe change your <input> elements to include the js-disable class, then target the $(".js-disable") selector instead of input[type='text']
I would use jQuery. Here's an example.
html:
<form>
<p>Edit the form</p>
<input type="text" placeholder="one" disabled>
<input type="text" placeholder="two" disabled>
<input type="text" placeholder="three" disabled>
<div id="saveForm">Save Form</div>
<div id="editForm">Edit Form</div>
</form>
jQuery:
$("#editForm").click(function(){
$("p").show(0);
$("#saveForm").show(0);
$("form input").prop('disabled', false);
$(this).hide(0);
});
$("#saveForm").click(function(){
$("p").hide(0);
$("#editForm").show(0);
$("form input").prop('disabled', true);
$(this).hide(0);
});
CSS:
div,input{
padding: 10px;
display: block;
margin: 10px;
border-radius: 5px;
border: 2px solid #000;
}
#saveForm{display: none;color:#ff0000;}
p{display:none;color:#ff0000;}
div{cursor:pointer;}
div:hover{opacity: 0.7;}
Here's a fiddle: http://jsfiddle.net/92ng2hs0/2/
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);
});