Dynamically adding bootstrap fields using clone - javascript

I am trying to create a form where users can click a plus button to add another row of fields and a remove button. This is what I have so far:
$(".add").click(function() {
$(".frm > div:first-child").clone(true).insertBefore(".frm > div:last-child");
return false;
});
$(".remove").click(function() {
$(this).parent().remove();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="frm">
<div>
<div class="form-group col-md-1">
<br/>
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="title" class="control-label">Title</label>
<input type="text" value='' class="form-control" id="title" placeholder="Title"/>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First Name</label>
<input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">Surname</label>
<input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
</div>
<div class="form-group col-md-2">
<label for="job" class="control-label">Job</label>
<input type="text" value='' class="form-control" id="job" placeholder="Job"/>
</div>
<div class="form-group col-md-2">
<label for="class" class="control-label">Class</label>
<input type="text" value='' class="form-control" id="class" placeholder="Class"/>
</div>
<div class="form-group col-md-2 col-md-inset-1">
<label for="emailadd" class="control-label">Email Address</label>
<input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
</div>
<span class="remove">Remove</span>
</div>
<div>
<span class="add">Add fields</span>
</div>
</form>
With the code above I can add the rows but for some reason I cannot remove them. Also when I do add them the layout gets ruined, instead of the rows appearing underneath each other they append to the end and then break off to another line. what could be causing the remove to not work?
COUNTER JS
$(document).on('click', '.add', function() {
$('.counter').html(function(i, val) { return val*1+1 });
});
$(document).on('click', '.remove', function() {
$('.counter').html(function(i, val) { return val*1-1 });
});

If you want to add fields even when there are no fields, then one option is a hidden field with the full code.
jsfiddle fullscreen demo (code)
$(document).ready(function() {
$(".add").click(function() {
$(".cloneDefault").clone(true).insertBefore(".frm > div:last-child");
$(".frm > .cloneDefault").removeClass("cloneDefault");
return false;
.cloneDefault{
display: none;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="row cloneDefault">
<div class="form-group col-md-1">
<br/>
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="title" class="control-label">Title</label>
<input type="text" value='' class="form-control" id="title" placeholder="Title"/>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First Name</label>
<input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">Surname</label>
<input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
</div>
<div class="form-group col-md-2">
<label for="job" class="control-label">Job</label>
<input type="text" value='' class="form-control" id="job" placeholder="Job"/>
</div>
<div class="form-group col-md-2">
<label for="class" class="control-label">Class</label>
<input type="text" value='' class="form-control" id="class" placeholder="Class"/>
</div>
<div class="form-group col-md-2 col-md-inset-1">
<label for="emailadd" class="control-label">Email Address</label>
<input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
</div>
<span class="remove">Remove</span>
</div>
<form class="frm">
<div class="row">
<div class="form-group col-md-1">
<br/>
<h4 style="text-align:right">1.</h4>
</div>
<div class="form-group col-md-1">
<label for="title" class="control-label">Title</label>
<input type="text" value='' class="form-control" id="title" placeholder="Title"/>
</div>
<div class="form-group col-md-1">
<label for="fname" class="control-label">First Name</label>
<input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
</div>
<div class="form-group col-md-2">
<label for="sname" class="control-label">Surname</label>
<input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
</div>
<div class="form-group col-md-2">
<label for="job" class="control-label">Job</label>
<input type="text" value='' class="form-control" id="job" placeholder="Job"/>
</div>
<div class="form-group col-md-2">
<label for="class" class="control-label">Class</label>
<input type="text" value='' class="form-control" id="class" placeholder="Class"/>
</div>
<div class="form-group col-md-2 col-md-inset-1">
<label for="emailadd" class="control-label">Email Address</label>
<input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
</div>
<span class="remove">Remove</span>
</div>
<div>
<span class="add">Add fields</span>
</div>
</form>

Related

Change the Bootstrap Form with Bootstrap Dropdown and Jquery

I want to change which form to show using dropdown and jquery but doesn't seem to work. I did try a simple code using just a couple of divs and a paragraph and it worked or so I thought, because it's no longer work when I put my forms into it.
By the way, here's my code:
//this is the form
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Here is the jquery:
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'{
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
I also tried any different ways but I can't yet find out what I'm missing.
Would you be so kind to help me?
Your else if condition is not close with ) and add jquery, check it
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'){
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<h2>qnap</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<h2>asustor</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>

HTML5 pattern not validating

This is my input element. I want it to accept only letters (No numbers or any other characters).
<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control" id="firstName" placeholder="First Name" required>
This is my entire partial view.
<form method = "post" action = "" ng-controller = "signUpCtrl as signUp">
<div class="form-group row">
<label for="firstName" class="col-sm-2 form-control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group row">
<label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
</div>
</div>
<div class="form-group row">
<label for="userName" class="col-sm-2 form-control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="User Name" required>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 form-control-label">Email Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10 text-center">
<button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
</div>
</div>
</form>
I am using - Google Chrome 50.0.2661.94 (Official Build) m (32-bit)
Can you please try with the following(use this in the input element):
ng-pattern="/^[A-Za-z]+$/"
Use ^[a-zA-Z][^0-9]+$ or ^\w[^\d]+$ instead of [a-zA-Z].
Edit :
If you need to skip symbols also then use :
^[a-zA-Z][^0-9-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+$.
or
^[a-zA-Z][^0-9\W]+$ // this will skip all non-word characters.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class='container'>
<div class="panel panel-default">
<div class="panel-body">
<form method="post" action="" ng-controller="signUpCtrl as signUp">
<div class="form-group row">
<label for="firstName" class="col-sm-2 form-control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="firstName" pattern="^[a-zA-Z][^0-9]+$" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group row">
<label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
</div>
</div>
<div class="form-group row">
<label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group row">
<label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
</div>
</div>
<div class="form-group row">
<label for="userName" class="col-sm-2 form-control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="User Name" required>
</div>
</div>
<div class="form-group row">
<label for="password" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 form-control-label">Email Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
</div>
</form>
</div>
</div>
</div>

jQuery Effect causes button to not be enclosed by div

When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.
This fiddle shows the effect and how the divs look when sliding.
CODE:
<div class="well basicInformation">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Basic Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-5">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
</div>
<div class="col-md-2">
<label for="MI">Middle Initial</label>
<input type="text" id="MI" class="form-control" ng-model="middlename" />
</div>
<div class="col-md-5">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address">Address</label>
<input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address2">Address 2</label>
<input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
</div>
<div class="col-md-2">
<label for="address2">Locale/State</label>
<input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
</div>
<div class="col-md-2">
<label for="address2">Region</label>
<input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
</div>
<div class="col-md-3">
<label for="address2">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
</div>
<div class="col-md-2">
<label for="address2">Postal Code</label>
<input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="phone">Phone (Default)</label>
<input type="radio" id="radioHome1" /><label> Home</label>
<input type="radio" id="radioMobile1" /><label> Mobile</label>
<input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
</div>
<div class="col-md-6">
<label for="phone2">Phone 2 (Alternate)</label>
<input type="radio" id="radioHome2" /><label> Home</label>
<input type="radio" id="radioMobile2" /><label> Mobile</label>
<input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
</div>
<div class="col-md-6">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
</div>
</div>
</div>
<div class="well faaInformation" style="display: none;">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">FAA Required Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-6">
<label for="federalRegistrationId">Federal Registration ID</label>
<input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
</div>
<div class="col-md-6">
<label for="pilotNumber">Pilot Number</label>
<input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</div>
var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };
$("#submitBasicInformation").on('click', function () {
$.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
$(".faaInformation").effect("slide", showoptions, 1250);
});
});
It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css
height: auto !important;
width: auto !important;

How to do the Modification for this requirement? and where to do?

In the sample below I add some sample file, which is working fine but I need to do some modification on that. Currently while validating, it shows the error like this:
But what I need it to do is to show a tooltip. The tooltip needs to be auto pop and remain visible until the error is cleared. Like this:
$('#myForm').validator()
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<span class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Many ways of doing this.
With pure CSS, leaving the DOM structure alone:
span.help-block.with-errors {
position: absolute;
top:45%;
right:36px;
z-index:1000;
}
Or, if you modify the DOM structure (moving the validation text into the .form-group):
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
<span style="position:absolute;top:2px;right:36px;z-index:1000;" class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
You could inline a bit of CSS to get the position correct. Stack snippet follows.
If you want to do the tooltip-style thing, I'd suggest a jQuery plugin to handle this bit for you. One example is Tooltipster.
$('#myForm').validator()
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
<span style="position:absolute;top:2px;right:36px;z-index:1000;" class="help-block with-errors">Hey look, this one has feedback icons!</span>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<span class="help-block">Minimum of 6 characters</span>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

HTML 5 / CSS button beside dropdown list

I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>
I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>

Categories

Resources