I have this part of form field
When user click on the Add button will copy the above form field and user can add more in this field .
but when I add <div id="ownership"> above the code form it start to look like this
I need to put id=ownership because I want to use it in my jQuery function
<div id="ownership">
<div class="col-lg-12 mb-30 ">
<label for="add_owner"><b><span style="color:#e60000;">*</span> Name</b></label><br>
<input class="from-control" type="text" id="name" >
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Phone number</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="phone" >
</div>
</div>
<div class="col-lg-6 mb-30" >
<label for="add_owner"><b><span style="color:#e60000;">*</span> Emailn</b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="email" id="email">
</div>
</div>
</div>
<div id="owner"></div>
<br>
<div class="col-md-12">
<button type="button" class="btn btn-success w-30 add_info f-r">Add</button>
</div>
<script>
$(document).ready(function(){
$(".add_info").click(function(){
var newForm = $("#ownership").clone();
$('input', newForm).val('');
$('owner').append(newForm);
});
});
</script>
How do I fix the code in order to achieve the image in number 1 ?
try this
<div class="row">
<div class="col-sm-6"> Text</div>
<div class="col-sm-6"> Text</div>
</div>
you need to apply this format then design will be properly according your desirable.
Try this way. Always use bootstrap col class inside row class then it will not cause unexpected result.
<div class="row">
<div class="col-md-12"></div>
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
Related
I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!
You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/
I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.
I am trying to get the next closest input of same class or different class that is available in the next row div child it says undefined am unable to get it.
[Fiddle]
$(".std_amt").change(function() {
alert($(this).parent('.row').next(".row").children("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
Try to use closest instead of parent like below
$(".std_amt").change(function() {
alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
.parent('.row') looks at the direct parent, it does NOT climb the tree. You need to use closest('.row') to reference the row. And you should use find() and not children() since the input is not a direct child.
$(this).closest('.row').next(".row").find("input.std_amt")
I'm a beginner with bootstrap and I have seen a lot of bootstrap 3 form validation plugins etc, but I haven't found any for bootstrap 4.
I'm trying to validate multiple forms, and here is my code:
<!-- Contact -->
<div class="container white">
<div class="row">
<div class="container white percent100">
<div class="col-lg-12">
<div class="padder-t2">
<h1>Contact</h1>
<div class="horiz-divider"></div>
</div>
</div>
</div>
</div>
<div class="row padder-t padder-b">
<div class="container white">
<div class="col-lg-12">
<!-- Form -->
<form class="form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>First Name</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="firstname" name="firstname" placeholder="First Name" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>Last Name</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input id="lastname" name="lastname" placeholder="Last Name" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>E-Mail</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input id="email" name="email" placeholder="E-Mail Address" class="form-control" type="email">
</div>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>Phone #</h4></label>
</div>
<div class="col-md-4 col-lg-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input id="phone" name="phone" placeholder="Phone" class="form-control" type="text">
</div>
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<div class="row">
<div class="col-md-4 col-lg-4">
<label class="control-label pull-right"><h4>Message</h4></label>
</div>
<div class="col-md-4 col-lg-5 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-pencil"></i></span>
<textarea id="comment" class="form-control" name="comment" placeholder="Your Message"></textarea>
</div>
</div>
</div>
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="fa fa-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
<!-- Button -->
<div class="form-group">
<div class="row">
<label class="col-md-4 col-lg-4 control-label"></label>
<div class="col-md-4 col-lg-4">
<button type="submit" class="btn btn-danger raised">Send <i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="row padder-b">
<div class="row col-lg-12">
<div class="col-md-3 col-lg-3"></div>
<h4 class="col-md-9 col-lg-9">Contact us directly:</h4>
</div>
<div class="row col-lg-12">
<div class="col-md-3 col-lg-3"></div>
<h4 class="col-md-2 col-lg-2 padder-lr">Mail:</h4>
<a class="col-md-6 col-lg-6 padder-lr" href="mailto:lorem#ipsum.com">
<h4 id="mail">lorem#ipsum.com</h4>
</a>
</div>
<div class="row col-lg-12">
<div class="col-md-3 col-lg-3"></div>
<h4 class="col-md-2 col-lg-2 padder-lr">Adress:</h4>
<h4 class="col-md-6 col-lg-6 padder-lr" id="adress">2 LoremIpsum Road, 67000 City - Country</h4>
</div>
</div>
</div>
I have tried to modify existing js, but I had no luck.
Here is the rendered form:
jsfiddle of the form
First I solved my issue with an external library like Jonathan Dion suggested. But recently I came across this :
Bootstrap v4.0 introduced their own form validation that you can still pair with backend php validation. From the Doc :
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Doesn't look good!
</div>
</div>
</div>
</div>
Then using JS :
<script>
// 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);
})();
</script>
This provides input border colorating and displays the valid / invalid feedback blocks according to the given pattern or properties. It is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
Update 2020 - Bootstrap 4.4.x
Here's another option (modern JS) if you want to validate each input one at a time (live or real-time) instead of waiting for the entire form to be submitted...
(function() {
'use strict';
window.addEventListener('load', function() {
// fetch all the forms we want to apply custom style
var inputs = document.getElementsByClassName('form-control')
// loop over each input and watch blur event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
}
else {
input.classList.add('is-valid')
}
}, false);
});
}, false);
})()
<form class="container" novalidate="" action="/echo" method="POST" id="myForm">
<div class="form-group">
<label class="form-control-label" for="input1">Enter some input</label>
<input type="text" class="form-control" name="input1" id="input1"
autocomplete="no" required>
<div class="valid-feedback">Success! You've done it.</div>
<div class="invalid-feedback">No, you missed this one.</div>
</div>
<div class="form-group">
<label class="form-control-label" for="input2">Enter password</label>
<input type="text" class="form-control"
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$"
autocomplete="no" name="input2" id="input2">
<div class="valid-feedback">Nice! You got this one!</div>
<div class="invalid-feedback">At least 6 chars: 1 uppercase, 1 lowercase and numeric</div>
</div>
<div>
<button type="submit" class="btn btn-secondary" id="btnSubmit">Submit</button>
</div>
</form>
https://codeply.com/p/mzBNbAlOvQ
You can use any library available on the web. You may try jqueryvalidation. It's pretty easy to use, just read the documentation.
Add the required attribute on your input and jqueryvalidation will do the job. For styling, you can add your own CSS and make it look like bootstrap.
Hopes it help
$(document).ready(function(){
$('#contact_form').validate()
})
Demo
I found a simpler and a bit more modern way to implement Bootstrap 4 JS Form validation:
Note: Keep in mind that each <form> element must have the novalidate attribute and at the same time, each <input> element in it must have the required attribute.
// Upon load..
window.addEventListener('load', () => {
// Grab all the forms
var forms = document.getElementsByClassName('needs-validation');
// Iterate over each one
for (let form of forms) {
// Add a 'submit' event listener on each one
form.addEventListener('submit', (evt) => {
// check if the form input elements have the 'required' attribute
if (!form.checkValidity()) {
evt.preventDefault();
evt.stopPropagation();
console.log('Bootstrap will handle incomplete form fields');
} else {
// Since form is now valid, prevent default behavior..
evt.preventDefault();
console.info('All form fields are now valid...');
}
form.classList.add('was-validated');
});
}
});
<!-- Load necessary libraries -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Add form -->
<div class="container" style="padding-top: 40px;">
<form class="student-search needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-6">
<label for="input-name-search" class="sr-only">Name</label>
<input type="text" class="form-control" id="input-name-search" placeholder="Name" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Enter a name please.</div>
</div>
<div class="col-6">
<button id="btn-search" type="submit" class="btn btn-success btn-block">Search student</button>
</div>
</div>
</form>
</div>
I just figured out the reason my code wasn't validating: I didn't have a submit button to trigger the validation. Make sure to have it.
<button type="submit" class="btn btn-primary">Save</button>
There's no real need for a library here, you can use the native reportValidation() method: MDN. You can call it on individual inputs or on the entire form itself.
I created one form with bootstrap. Now i want to export the form to pdf with the same style. please help me to solve out this issue
Here is the file jsfiddle
<div class="row">
<div class="col-sm-8 center">
<h3>Fill Your Form</h3>
<div class="row">
<div class="col-sm-4">
First Name:
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
Middle Name:
<input type="text" class="form-control" />
</div>
<div class="col-sm-4">
Last Name:
<input type="text" class="form-control" />
</div>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<button id="button" class=" btn btn-danger">Generate PDF</button>
</div>
</div>
PDF Result want to be like this
Your solution is on this link , I am not sure if you want to generate pdf without any library.
I have an html structure similar to the one below
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
I would like to loop through each of the .fact classes and then get the value of each input type=text
$('.fact').each(function(i){
console.log(this.$('input[name=fact]').val());
});
Running the code above gave me an undefined error, how would I run a loop through all .facts and then get value of the input[type=text]; I need to be able to get it exactly in this manner as I would be adding more input fields inside each div.
input elements has class .fact. you can simple iterate over input elements with class .fact by modifying the selector:
$('input.fact').each(function(i){
console.log($(this).val());//or this.value
});
for iterating over div elements:
$('div.fact').each(function(i){
console.log($(this).find('input').val());
});
The class .fact is quite overused in your markup; it is not clear whether you're referring to div.fact or input.fact. And there's another class that might cause confusion: input.Fact. So I have provided one of the possible ways you can approach this:
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
Of course, this code snippet is useless without an event. For example you may have a button which after the user has provided input the user would then click the button to fire up this code snippet as follows:
$('button').on('click', function() {
//above code
});
$('div.fact').each(function() {
console.log( $(':text', this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="factsParent" class="col-md-12">
<div id="factBody1" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" value="Test 1" class="fact form-control fact-title">
</div>
</div>
</div>
</div>
<div id="factBody2" style="margin-bottom:20px;" class="fact col-md-12 fact-body">
<div class="form-group col-md-10">
<div class="col-md-12">
<div class="box-wrap">
<input type="text" name="fact" placeholder="Enter a Fact" id="fact2" value="Test 2" class="fact form-control fact-title">
</div>
</div>
</div>
</div>