I need to send an email using PHP, which could be easily done using SMTP, but the challenge is to embed a web service in the HTML mail, which is why I used JavaScript in the body of the message to access the Web service when a button click is triggered.
<div class="container">
<div class="row">
<div class="col-lg-5 " >
<div class="shadow bg-white stick-to-content mb-4">
<div class="bg-dark dark p-4"><h5 class="mb-0">Votre commande</h5></div>
<div id="mainDiv">
<div class="bg-dark dark p-4 hide"><h5 class="mb-0">Son commande</h5></div>
<table class="table-cart" id="table-cart">
<!-- Contenu du cart list (liste de meal) -->
<!-- content code jquery -->
</table>
<div class="cart-summary">
<div class="row">
<div class="col-7 text-right text-muted">Order total:</div>
<div class="col-5"><strong class="orderTotal"></strong></div>
</div>
<div class="row devlieryHide">
<div class="col-7 text-right text-muted">Devliery:</div>
<div class="col-5"><strong class="devliery"></strong></div>
</div>
<hr class="hr-sm">
<div class="row text-lg">
<div class="col-7 text-right text-muted">Total:</div>
<div class="col-5"><strong class="total"></strong></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7 ">
<form action="{{route('sendCHeckOutToMail')}}" method="post">
#csrf
<div class="bg-white p-4 p-md-5 mb-4">
<h4 class="border-bottom pb-4"><i class="ti ti-user mr-3 text-primary"></i>Informations de base</h4>
<div class="row mb-5">
<div class="form-group col-sm-6">
<label>Nom:</label>
<input type="text" name="nom" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Prénom:</label>
<input type="text" name="prenom" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Ville:</label>
<input type="text" name="ville" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Rue et numéro:</label>
<input type="text" name="zip_code" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>Téléphone:</label>
<input type="text" name="phone" class="form-control">
</div>
<div class="form-group col-sm-6">
<label>E-mail:</label>
<input type="email" name="mail" class="form-control">
</div>
</div>
<h4 class="border-bottom pb-4"><i class="ti ti-package mr-3 text-primary"></i>Livraison</h4>
<div class="row mb-5">
<div class="form-group col-sm-6">
<label>Heure de livraison:</label>
<div class="select-container">
<select name="date_livraison" class="form-control">
<option>Aussi vite comme possible</option>
<option>Dans une heure</option>
<option>Dans deux heures</option>
</select>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-lg"><span>Commandez maintenant!</span></button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Fonctions du cart Shopping -->
<script src="{{ asset('frontEnd/assets/js/js/cartShopping.js') }}"></script>
<!-- Evenements du carnet d'adresses -->
<script src="{{ asset('frontEnd/assets/js/js/events.js') }}"></script>
Related
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.
I want to sum groups of select choice result dynamically in my template.
all forms are select fields like this (models.py)
evolQuote = (
(1, 'High'),
(0, 'Undetermine'),
(-1, 'Low'))
cycleMarket = models.IntegerField(choices=evolQuote, null=False, blank=False, default=0)
news = models.IntegerField(choices=evolQuote,null=False, blank=False)
my template is:
{% load crispy_forms_filters %}
{% load crispy_forms_tags %}
{% block content %}
<head>
<style>
input {max-width: 10em};
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// function
$("form select").on("change", function() {
console.log("say hello")
sum = 0;
//loop through selects
$(".select").each(function() {
console.log($(this).val())
sum += Number($(this).val());
});
console.log(sum)
$("#fundamentals").val(sum);
})
</script>
</head>
<h3>Valuation {{ typeVal }} </h3>
<form method="post">{% csrf_token %}
<div class="col-md-8">
<div class="row">
<div class="col">
<h7>Market trend</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="marklRate" name="markRate">
</div>
</div>
<div class="form-row border">
<div class="form-group col-md-2 mb-0" name="market-1">
{{ form.cycleMarket|as_crispy_field }}
</div>
<div class="form-group col-md-2 mb-0" name="market-2">
{{ form.news|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="market-3">
{{ form.managementPostion|as_crispy_field }}
</div>
<div class="form-group col-md-2 mb-0" name="market-4">
{{ form.short|as_crispy_field }}
</div>
</div>
<br>
<div class="row">
<div class="col">
<h7>Analysts advice</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="analRate" name="analRate">
</div>
</div>
<div class="form-row border" >
<a href="https://www.barchart.com/stocks/quotes/{{ stck.codeBarchart }}/overview" class="form-group col-md-3 mb-0" target="_blank" rel="noopener noreferrer" name="analyst-1">
{{ form.BARCHART_analysts|as_crispy_field }}
</a>
<a href="https://www.tradingview.com/symbols/{{ stck.codeTradingviews }}" class="form-group col-md-4 mb-0" target="_blank" rel="noopener noreferrer" name="analyst-2">
{{ form.TRADINGVIEW_analysts|as_crispy_field }}
</a>
<a href="https://www.investing.com/{{ stck.codeInvesting }}" class="form-group col-md-3 mb-0" target="_blank" rel="noopener noreferrer" name="analyst-3">
{{ form.INVESTING_analysts|as_crispy_field }}
</a>
</div>
<br>
<div class="row">
<div class="col">
<h7>Indicators</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="indRate" name="indRate">
</div>
</div>
<div class="form-row border" >
<div class="col col-md-2 mb-0" name="indicator-1">
{{ form.parabolics|as_crispy_field }}
</div>
<div class="col col-md-2 mb-0" name="indicator-2">
{{ form.trix|as_crispy_field }}
</div>
<div class="col col-md-2 mb-0" name="indicator-3">
{{ form.arron|as_crispy_field }}
</div>
<div class="col col-md-2 mb-0" name="indicator-4">
{{ form.macd|as_crispy_field }}
</div>
<div class="col col-md-4 mb-0" name="indicator-5">
{{ form.moving_average_cross_up|as_crispy_field }}
</div>
</div>
<br>
<div class="row">
<div class="col">
<h7>Graphs</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="graphRate" name="graphRate">
</div>
</div>
<div class="form-row border" >
<div class="form-group col-md-4 mb-0" name="graph-1">
{{ form.graph_trend|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-2">
{{ form.graph_support|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-3">
{{ form.graph_mean15_30|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-4">
{{ form.candels|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-5">
{{ form.confirm_figure|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="graph-6">
{{ form.graph_weeks|as_crispy_field }}
</div>
</div>
<br>
<div class="row">
<div class="col">
<h7>Fundamentals</h7>
</div>
<div class="center">
<input class="speech-bubble" value="0" id="fundamentals" name="fundamentals">
</div>
</div>
<div class="form-row border" >
<div class="form-group col-md-3 mb-0" name="fundamentals-1">
{{ form.fond_PE|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="fundamentals-2">
{{ form.fond_Profit_NextYear|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="fundamentals-3">
{{ form.fond_Profit_NextYear_dollars|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0" name="fundamentals-4">
{{ form.fond_revenues_NetYear|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="fundamentals-5">
{{ form.fond_revenues_NetYear_dollars|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="fundamentals-6">
{{ form.fond_BARCHART_analyst_estimates|as_crispy_field }}
</div>
<div class="form-group col-md-4 mb-0" name="fundamentals-6">
{{ form.date_BARCHART_earnings|as_crispy_field }}
</div>
</div>
<br>
<input type="submit" class="btn btn-primary" value="Save">
</div>
</form>
{% endblock content %}
my attempt javascript:
function sumamount(){
sum=0;
$("input[name^='market-']").each(function(){
sum+=Number($(this).val());
});
console.log(sum)
$("#fundamentals").val(sum);
}
But console log sum equals zero all the time.
Please find generated code from first form-group (cyclMarket field):
<div class="form-group col-md-2"> name="market-1">
<div id="div_id_cycleMarket" class="form-group">
<label for="id_cycleMarket" class=" requiredField">
CycleMarket<span class="asteriskField">*</span>
</label>
<div class>
<select name="cycleMarket" class="select form-control" id="id_cycleMarket">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
Cryspy generates code but not visible in my template. and don't know if it can see my group-form names?
Your onchange event is on div not on input field instead as you are already using jquery you can change your selector to $("form select").on("change",.. this will get called whenever select inside form will changed and then use $(".select").. to iterate through selects inside div .
Demo Code :
//on change of selct
$("form select").on("change", function() {
sum = 0;
//loop through selects
$(".select").each(function() {
console.log($(this).val())
sum += Number($(this).val());
});
$("#fundamentals").val(sum);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post">
<div id="div_id_cycleMarket" class="form-group">
<label for="id_cycleMarket" class=" requiredField">
CycleMarket<span class="asteriskField">*</span>
</label>
<div class>
<select name="cycleMarket" class="select form-control" id="id_cycleMarket">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
<div id="div_id_news" class="form-group">
<label for="id_news" class=" requiredField">
news<span class="asteriskField">*</span>
</label>
<div class>
<select name="news" class="select form-control" id="id_news">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
<div id="div_id_managementPostion" class="form-group">
<label for="id_managementPostion" class=" requiredField">
managementPostion<span class="asteriskField">*</span>
</label>
<div class>
<select name="managementPostion" class="select form-control" id="id_managementPostion">
<option value="1">High</option>
<option value="0" selected="">Undetermine</option>
<option value="-1">Low</option>
</select>
</div>
</div>
fundamentals :
<input type="text" id="fundamentals">
</form>
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 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.