I am making a CV builder, and I already made a button with jQuery to add and delete a form, but when I add, it just goes down, so I can add more, but the first form stays there, and I cannot delete the first form.
Example
You see how it goes down, and I need a button so I can remove the first one also:
As you can see in the pictures, i add a form, and a form comes up, but the add button moves down, as it should, because I put it aside of the div. But I need to add a red button to delete the first form, if someone wants to.
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
});
})(this.jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
Consider the following.
$(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
if (!$(this).hasClass("clicked")) {
console.log("Adding Button");
$("<div>", {
class: "input-group-btn"
}).appendTo($(".row:eq(0) .input-group:eq(0)").eq(0));
$("<button>", {
class: "btn btn-danger remove",
type: "button"
}).html("<span class='button ripple-effect' style='background-color: #B31C1C;'>Ukloni</span>").appendTo($(".row:eq(0) .input-group:eq(0) .input-group-btn"));
$(this).addClass("clicked");
}
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="col-xl-12">
<div id="test1" class="dashboard-box">
<!-- Headline -->
<div class="headline">
<h3><i class="icon-material-outline-school"></i> Obrazovanje</h3>
</div>
<div class="content with-padding">
<div class="forma">
<div class="row">
<label class="control-label col-xl-12" for="ContactNo"></label>
<div class="col-xl-12">
<div class="input-group control-group after-add-more">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija[]" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<label>Zvanje</label>
<input name="cv_obrazovanje_zvanje[]" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak[]">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj[]">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox[]" type="checkbox" id="chekcbox">
<label for="chekcbox"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
</div>
</div>
<!-- Dugme za dodavanje -->
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button" style="padding-left: 15px;"><span class="button ripple-effect">Dodajte</span></button>
</div>
<!-- Dugme za dodavanje -->
<div class="copy hide" style="display: none;">
<div class="control-group input-group" style="margin-top:10px">
<div class="row">
<div class="col-xl-3">
<label>Institucija</label>
<input name="cv_obrazovanje_institucija" type="text" placeholder="Upišite vašu instituciju">
</div>
<div class="col-xl-3">
<laabel>Zvanje</label>
<input name="cv_obrazovanje_zvanje" type="text" placeholder="Nivo znanja veštine, opširniji opis...">
</div>
</div>
<div class="row">
<div class="col-xl-3">
<label>Početak obrazovanja</label><input type="date" name="cv_obrazovanje_pocetak">
</div>
<div class="col-xl-3">
<label>Kraj obrazovanja</label><input type="date" name="cv_obrazovanje_kraj">
</div>
</div>
<div class="checkbox">
<input name="cv_obrazovanje_trenutno_checkbox" type="checkbox" id="chekcbox2">
<label for="chekcbox2"><span class="checkbox-icon"></span>Trenutno obrazovanje</label>
</div>
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><span class="button ripple-effect" style="background-color: #B31C1C;">Ukloni</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button -->
<div class="col-xl-12">
Snimite promene
</div>
</div>
It seems you only want to add the button the first click. We can check to see if a Class exists as a quick check, if it does NOT exists, we can perform the one-time action, and add the Class.
Then it is just a matter of adding the proper elements.
Related
I have a form with multiple tabs. Each tab has various items (textboxes, radio buttons, drop down boxes). I need the content to be saved after 15 seconds idle or when the user clicks on submit button all tabs content will save and in mysqli different tables can store information.
If any suggestions please write sample code for save the information with different tables also
<form>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Material Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#quote" data-toggle="tab" aria-expanded="true" class="nav-link active">
Quotes
</a>
</li>
<li class="nav-item">
<a href="#purchase" data-toggle="tab" aria-expanded="false" class="nav-link">
Purchases
</a>
</li>
<li class="nav-item">
<a href="#usage" data-toggle="tab" aria-expanded="false" class="nav-link">
Usage
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="quote">
<i class="mdi mdi-plus"><button type="button" class='addmore'>Add More</button></i>
<form id='students' method='post' name='students'>
<table border="1" cellspacing="0" class="table-responsive">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()" /></th>
<th>S.No</th>
<th>Q.No</th>
<th>Item Name</th>
<th>Categories</th>
<th>Brand</th>
<th>Qty</th>
<th>Rate</th>
<th>Amount</th>
<th>Quote Pic</th>
<th>Others</th>
</tr>
<tr>
<td><input type='checkbox' class='case' /></td>
<td><span id='snum'>1</span></td>
<td><span id='qnum'>1</span></td>
<td><input type='text' id='item_name' name='item_name[]' /></td>
<td><input type='text' id='categories' name='categories[]' /></td>
<td><input type='text' id='brand' name='brand[]' /></td>
<td width="10%"><input type='text' id='qty' name='qty[]' /> </td>
<td width="10%"><input type='text' id='rate' name='rate[]' /></td>
<td width="10%"><input type='text' id='amount' name='amount[]' /> </td>
<td width="10%"><input type='text' id='qpic' name='qpic[]' /> </td>
<td width="10%"><input type='text' id='others' name='others[]' /> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<p>
</div>
<!--Quotes Div Close-->
<div class="tab-pane fade" id="purchase">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Q.No</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Itemname</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-5" class="control-label">Categories</label>
<input type="text" class="form-control" id="field-5" placeholder="categories">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Brand</label>
<input type="text" name="country" id="autocomplete-ajax" class="form-control" autocomplete="off">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-5" class="control-label">Rate</label>
<input type="text" class="form-control" id="field-5" placeholder="1234.00">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="field-6" class="control-label">Amount</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Others</label>
<input type="text" class="form-control" id="field-6" placeholder="123456">
</div>
</div>
</div>
<!-- row-->
</div>
<!-- Purchase Div Close-->
<div class="tab-pane fade" id="usage">
<div class="row">
<!-- Inline Form -->
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"></h4>
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label for="field-4" class="control-label">S. No. </label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-5" class="control-label">Item Name </label>
<input type="text" class="form-control" id="field-5" placeholder="Item Name">
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label for="field-6" class="control-label">Qty</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
</div>
<!--row-->
</div>
<!--end card box-->
</div>
<!--end col-md-12-->
</div>
<!-- end row / End Inline form-->
</div>
<!-- Usage Div-->
</div>
<!-- Tab Content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Labour Management</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#inhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<!-- <li class="nav-item">
<a href="#scontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li> -->
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="inhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Category Of Labour</label>
<input type="text" class="form-control" id="field-4" placeholder="Mastrey">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Per Head Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-4" class="control-label">Total Amount</label>
<input type="text" class="form-control" id="field-4" placeholder="Boston">
</div>
</div>
</div><!--row close-->
</div><!--card box close-->
</div><!--div md 12 close-->
</div><!-- end row / End Inline form-->
</div><!--in house tab close-->
</div><!--tab content-->
</div><!-- Close card-box -->
</div> <!--col-lg-12-->
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-box">
<h4 class="header-title m-t-0 m-b-30">Work In Progress</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#winhouse" data-toggle="tab" aria-expanded="true" class="nav-link active">
In House
</a>
</li>
<li class="nav-item">
<a href="#wsubcontract" data-toggle="tab" aria-expanded="false" class="nav-link">
Sub Contract
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="winhouse">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Usage For </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="field-6" class="control-label">Inv. Pic</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
</div>
</div>
</div>
</div> <!-- end row / End Inline form-->
</div><!--winhouse close-->
<div class="tab-pane fade" id="wsubcontract">
<!-- Inline Form -->
<div class="row">
<div class="col-md-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><i class="mdi mdi-plus"></i></h4>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="field-6" class="control-label">Notes </label>
<textarea class="form-control" rows="5"></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="field-6" class="control-label">Upload Pics</label>
<input type="file" class="filestyle" data-input="false" data-buttonname="btn-secondary">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="field-4" class="control-label">No.Of. Workers</label>
<input type="text" class="form-control" id="field-4" placeholder="1">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row / End Inline form-->
</div><!--wsubconant-->
</div><!--tab content-->
</div>
<!-- Close card-box -->
</div>
<!--col-lg-12-->
</div>
</form>
here single form i have 3 divs and each div i have two or more tabs how can i store the all information with different databases
for example in material estimation div i have 3 tabs
1. Quotes
2. Purchase
3. Usage
in quotes tabs add new rows click add another row like no restrictions is there like purchases also
quotes data can store quotes table and purchase data can store purchase table usage data store in usage table
how i have only for single submit button for hole form and edit also add like
how is it is possible to make that one
if possible please write a code snippet and save to db
i have worked also ajax form not successfully so please if any one make code write for u s thank u
you can write in form action page look like this and also each and every field you can assign the name/id first then write form action page
if example i have taken one item
if(!empty($catlabours)) {
//your code
}
I have an index like this:
<body>
<div id="page-container">
<div id="header">
<div class="main">
<div class="content">
<div id="website-link"></div>
<div id="cart">
<div class="price">120,00 €</div>
<div class="cart-icon"><img src="img/cart.png" /></div>
<div class="items">0</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div id="bradcrumbs">3D TOOL > Upload > <span class="active"> Customize</span></div>
<div id="menu">
<ul>
<li>Help</li>
</ul>
</div>
</div>
</div>
</div>
<div id="main-content">
<div class="block-container" id="block-container">
<div id="tools">
<form action="#" enctype="multipart/form-data" method="post" id="uploader">
<input type="file" name="fileUpload" id="fileUpload" style="display: none" multiple accept=".stl,.obj,.stp,.step">
<label for="fileUpload">
<div id="addmore" style="cursor: pointer"></div>
</label>
</form>
<div id="checkout">Checkout</div>
</div>
</div>
</div>
</body>
</html>
using a jquery function i prepend this code inside block-container div:
<div id='upload-container-<?php echo $i;?>' class='upload-container'>
<div class="form-data">
<div class="col col1">
<div class="col-content"><img src="img/square.jpg" /></div>
<div class="col-info">Nome del file</div>
</div>
<div class="col col2">
<div class="col-content">
<label class="label">MATERIALI</label>
<div class="select-style">
<?php
echo"<select name='materiali' class='materiali' autofocus tabindex='20' >";
foreach($oxmL->Materials->Material as $material)
{
echo "<option value=$material->MaterialID>$material->Name</option>";
}
echo"</select>";
?>
</div>
<label class="label">FINITURA</label>
<div id="selectmateriali2"class="select-style">
<?php
$id=$oxmL->Materials->Material['0']->MaterialID;
echo"<select name='materiali2' class='materiali2' id='materiali2' autofocus tabindex='20'>";
foreach($oxmL->Materials->Material as $material)
{
if($material->MaterialID==$id)
{
foreach($material->Finishes->Finish as $finish)
{
echo "<option value=$finish->FinishID>$finish->Name</option>";
}
}
}
echo"</select>";
?>
</div>
<label class="label">QUANTITA</label>
<input name="quantity" id="quantity" type="number" class="quantita" min="1" step="1" value="1">
</div>
<div class="col-info"></div>
</div>
<div class="col col3">
<div class="col-content">
<div class="size-form">
<div class="label">Resize</div>
<input class="size" type="text" value="100"/>
</div>
<div class="size-text">Change the size of your object in percent</div>
<div class="size-info">
<div class ="box-title">
<div class="title-icon"><img src="img/3dpr-form-xyz-cube.png" /></div>
</div>
<div class="axis-area">
<div class="axis axis-x">X: <label for="x" class="labelx">2</label></div>
<div class="axis axis-y">Y: <label for="y" class="labely">3</label></div>
<div class="axis axis-z">Z: <label for="z" class="labelz">4</label></div>
</div>
</div>
</div>
<div class="col-info">
<div class="icons">
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price">450.20 €</div>
</div>
</div>
</div>
<div class="item-info">
<div class="filename col col1"> <label for="filename">filename.ciops</label></div>
<div class="icons col col2">
<div class="button button-zoom"></div>
<div class="button button-duplicate"></div>
<div class="button button-delete"></div>
</div>
<div class="price col col3"> <label for="price" class="labelprice">450.20</label> €</div>
</div>
</div>
I want to had a click listener to the div with the "button button-duplicate" class, i made it like this:
$('#block-container').on('input','.quantita',quantityChanged);
$('#block-container').on('input','.size',scaleChanged);
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);
but it doesn't works, instead every other listener in the page works using #block-container as static element. What can i do? Any suggestion? Thank you
The problem with your code is your selector.
You have:
$('#block-container').on('click','.button button-delete', function(){
alert("ok");
//some code
});
And it should be:
$('#block-container').on('click','.button.button-delete', function(){
alert("ok");
//some code
});
When you want to select an element by two or more classes, you have to write the class selectors all together, without white spaces between them, in this way '.class1.class2.class3'
I have two form fields.if clicked the text from <div class="offer-text"> RS.750/- </div> the RS.750/- could be appear in the button. since I am new to bootstrap. Can anyone help me to do this?
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block"/>SEND</button>
</div>
</form>
</div>
<div class="col-sm-3"></div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
To send the value to the form button use the following code:
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
demo
$(".offer-text").click(function() {
$("form button[type=submit]").text($(this).text())
})
$("img").click(function() {
$("form button[type=submit]").text($(this).attr("value"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-12">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<form method="POST" action="information.php">
<div class="">
<button type="submit" name="submit" class="button button-block" />SEND</button>
</div>
</form>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-3"> </div>
<div class="col-sm-6">
<div class="form2">
<div class="row">
<div class="column">
<div class="offer-text"> RS.750/- </div>
</div>
</div>
</div>
</div>
<div class="col-sm-3"></div>
</div>
<img src="img/Sar Utha Kay Jeo.png" alt="IMG" style="width:100%" value="RS.1750/-" class="hover-shadow cursor">
I have a form which validates with bootstrap validator:
http://1000hz.github.io/bootstrap-validator/
I want to separate this form into steps and have each the inputs in each step validate when the next button is clicked and if it validates, then go to step 2.
I believe this can be achieved if we can combine jQuery steps and Bootstrap validator.
http://www.jquery-steps.com/
Like this comment suggests:
https://github.com/1000hz/bootstrap-validator/issues/491
I have been trying to do this but unsuccessful so far. Is there a way?
I have made a JSFiddle for this:
https://jsfiddle.net/mpLpwt7L/
This is my code so far:
<div class="steps-nav">
<div class="row bs-wizard" style="border-bottom: 0;">
<div class="col-xs-3 bs-wizard-step complete step-active">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
1
</a>
<div class="bs-wizard-info text-center">Vehicle details</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
2
</a>
<div class="bs-wizard-info text-center">Location</div>
</div>
<div class="col-xs-3 bs-wizard-step">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
3
</a>
<div class="bs-wizard-info text-center">Type of Wash</div>
</div>
<div class="col-xs-3 bs-wizard-step disabled">
<div class="progress"><div class="progress-bar"></div></div>
<a href="#" class="bs-wizard-dot">
4
</a>
<div class="bs-wizard-info text-center">Bills</div>
</div>
</div><!-- end bs-wizard -->
</div><!-- end steps-nav -->
</div><!-- end container -->
</header><!-- end header -->
<main id="main">
<div class="container">
<form role="form" class="order-form" method="post">
<div class="row setup-content" id="step-1">
<div class="steps-inner">
<div class="col-md-12">
<h3>Vehicle Details</h3>
<p>
Tell us what are we washing
</p>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<!--<label></label>-->
<input type="text" name="vehicle_year" class="form-control" placeholder="Car Year" data-error="Car Year is required" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_make" class="form-control" data-error="Make is required" placeholder="Make" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" name="vehicle_model" class="form-control" data-error="Model is required" placeholder="Model" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="vehicle_color" class="form-control" data-error="Color is required" placeholder="Color" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="plate_number" class="form-control" data-error="Plate number is required" placeholder="Lic Plate" required />
<div class="help-block with-errors"></div>
</div><!-- end form-group -->
</div>
</div><!-- end row -->
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div>
</div><!-- end steps-inner -->
</div><!-- end setup-content -->
<div class="row setup-content" id="step-2">
<div class="steps-inner">
<div class="col-md-12">
<h3>Location</h3>
<p>
Tell us where it is
</p>
<p class="map-address">
<i class="fa fa-map-marker"></i>
<input type="text" name="address" id="address_autocomplete" placeholder="Enter Your Address" />
</p>
<div class="text-center form-submit">
<button class="btn next-btn" type="submit">Next <i class="fa fa-long-arrow-right"></i></button>
</div>
</div><!-- end steps-inner -->
</div>
</div><!-- end setup-content -->
I think bootstrap validator isn't the best solution for your needs. Try to use Twitter Bootstrap Wizard which includes wizard + form validation so you can implement it easily.
The input-group-btn for the targetDate element stays pinned to the right hand side of the input group irrespective of screen width until I add in the autogenerated CSS that comes with the hottowel generator.
I need some assistance in working out what aspect of CSS is affecting the behaviour.
Check out this jsfiddle
Tried all 3 sizes of grid layout to no avail but i dont think that is the issue.
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<div class="row">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input ng-model="vm.submitjobform.name" type="text" class="form-control" name="name" ng-required="true" >
<span class="error" ng-show="submitjobform.name.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="description" class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea ng-model="vm.submitjobform.description" class="form-control" name="description" ng-required="true" ></textarea>
<span class="error" ng-show="submitjobform.description.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="category" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select>
<span class="error" ng-show="submitjobform.category.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="assignee" class="col-lg-2 control-label">Assignee</label>
<div class="col-lg-10">
<select ng-model="vm.submitjobform.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select>
<span class="error" ng-show="submitjobform.assignee.$error.required">Required!</span>
</div> <!-- </div> col-lg-10 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<label for="targetDate" class="col-lg-2 control-label">Target Date</label>
<div class="col-lg-8">
<!-- <div class="col-lg-4"> -->
<div class="input-group">
<input name="targetDate" type="text" class=" form-control" datepicker-popup="{{vm.format}}" ng-model="vm.submitjobform.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close">
</input>
<span class="input-group-btn">
<!-- " -->
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div> <!--input group -->
<!-- </div> /col-lg-4 -->
</div> <!--/col-lg-8 -->
</div> <!-- </div> row -->
</div> <!-- </div> form-group -->
<div class="form-group">
<div class="row">
<div class="col-lg-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div> <!--/col-lg-2 -->
</div>
</div>
<div>
<tt>name = {{vm.submitjobform.name}}</tt><br/>
<tt>desc = {{vm.submitjobform.description}}</tt><br/>
<tt>category = {{vm.submitjobform.category.name}}</tt><br/>
<tt>assignee = {{vm.submitjobform.assignee.name}}</tt><br/>
<tt>targetdate = {{vm.submitjobform.targetDate}}</tt><br/>
</div>
</form>
</div> <!-- content-user div -->
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div> <!-- widget violet -->
</div> <!-- row div -->
</div> <!-- container div -->
</section>
</section>
Thanks
Simon
http://jsfiddle.net/voykuL65/
I assume you're using bootstrap as you import it in your css on your fiddle.
The main issue is you aren't including bootstrap JS as well. If you delete your CSS in your fiddle and switch the framekwors & extensions to jquery 2.1 and select Bootstrap 3.2 your code looks fine.
Another point to remember is always design bootstrap smallest up.
You've got everything
class="col-lg-2"
You might have just been tinkering, but remember to start with xs/sm and move larger.
There is also a stray </input> Kill him as well.