Labels with inputfields next to each other not responsive in Bootstrap 4 - javascript

I am learning bootstrap 4 and I have made a contact form with labels and inputs fields.
This is my code for structure and styling:
<div class="row no-gutters">
<div class="col-12">
<div class="row">
<div class="col-4 mt-3">
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-3">NAME</label>
<div class="col-6">
<input class=" form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input a class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label">NAME</label>
<div class="col-6">
<textarea class="form-control rounded-0"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is when I resize the browser it isn't responsive. The input field goes over the label.
I have made a jsfiddle so you can see the behaviour:
https://jsfiddle.net/mkgvape9/1/
Sources I use:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Bootstrap horizontal form "control-label" not using responsive styling
How can I make the label and input field responsive?


Try this HTML structure..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="row no-gutters">
<div class="col-12">
<div class="row">
<div class="col-4 mt-3">
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class=" form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input a class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<input class="form-control rounded-0" />
</div>
</div>
<div class="form-group d-flex flex-wrap">
<label class="col-form-label pr-3">NAME</label>
<div>
<textarea class="form-control rounded-0"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>

Related

DataLayer onClick Submit Form

Good afternoon everyone! I need help with this here:
I need to pull the data from this form to a Datalayer in my ".JS":
<form action="https://primeseguroviagem.com.br/cotacao-rapida" method="GET" autocomplete="chrome-off" enctype="text/plain" id="form_cotation">
<div class="row">
<div class="text-center text-secondary h2 mb-3">
<b>Faça Sua Cotação Gratuita</b>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="destinyGroup" class="form-label">Qual seu destino</label>
<select name="destinyGroup" id="destinyGroup" class="form-control " required>
<option value="">Selecione seu destino</option>
<option value="1">Brasil</option>
<option value="2">América Latina (inclui México)</option>
<option value="4">Estados Unidos e Canadá</option>
<option value="3">Europa</option>
<option value="5">Ásia</option>
<option value="6">África</option>
<option value="7">Oceania</option>
<option value="8">Múltiplos destinos</option>
</select>
</div>
<div class="row">
<label class="form-label"></label>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="" style="font-size: 17px;"> Data de Ida
<input type="text" class="form-control " id="departure" name="departure" value="required" placeholder="Embarque" autocomplete="chrome-off" data-date-format='dd-mm-yyyy' required>
</label>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="" style="font-size: 17px;"> Data de Volta
<input type="text" class="form-control " id="arrival" name="arrival" value="required" placeholder="Chegada" autocomplete="chrome-off" data-date-format='dd-mm-yyyy' required>
</label>
</div>
</div>
</div>
<div class="mb-3 relative">
<label for="ages" class="form-label">Idade do(s) passageiro(s):</label>
<input type="text" class="form-control " id="ages" name="ages" value="Selecione as idades" readonly required>
<div class="w-100 selectAges">
<div class="card">
<div class="card-body ">
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>0 a 40</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old0" id="old0" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>41 a 64</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old1" id="old1" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>65 a 75</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old2" id="old2" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>76 a 99</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old3" id="old3" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a type="submit" class="btn btn-warning btn-aplicar text-white save">
<b>
Aplicar
</b>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="name" class="form-label">Nome:</label>
<input type="text" class="form-control " name="name" id="name" value="" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" name="email" class="form-control " id="email" value="" required>
</div>
<div class="mb-3">
<label for="phone" class=" form-label">Telefone:</label>
<input type="text" name="phone" class="phone form-control " id="phone" value="" required>
</div>
</div>
<div class="col-lg-12 mt-3 mb-3 order-3">
<button class="btn w-100 btn-cotation" id="submitbtnt" type="submit">Cotar agora! ››</button>
</div>
</div>
</form>
I need a dataLayer to pull the data filled in the form and add an onClick when submitting the form.
something like:
dataLayer.push ({
event: "formSubmit",
name: (value of input here)
});
What I'm not able to do is transform my inputs into variables to be able to put them in the dataLayer.

Delay in Form Redirection Right After Clicking Submit Button

I need help with a specific script, I have a form that performs an action with the "GET" method and I need to put a delay of 200ms before the form's action is executed.
Form:
<form action="#" method="GET" autocomplete="chrome-off" enctype="text/plain" id="form_cotation">
<div class="row">
<div class="text-center text-secondary h2 mb-3">
<b>Faça Sua Cotação Gratuita</b>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="destinyGroup" class="form-label">Qual seu destino</label>
<select name="destinyGroup" id="destinyGroup" class="form-control ">
<option value="">Selecione seu destino</option>
<option value="1">Brasil</option>
<option value="2">América Latina (inclui México)</option>
<option value="4">Estados Unidos e Canadá</option>
<option value="3">Europa</option>
<option value="5">Ásia</option>
<option value="6">África</option>
<option value="7">Oceania</option>
<option value="8">Múltiplos destinos</option>
</select>
</div>
<div class="row">
<label class="form-label">Data da Viagem:</label>
<div class="col-lg-6 ">
<div class="mb-3">
<input type="text" class="form-control " id="departure" name="departure" value="" placeholder="Embarque" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<input type="text" class="form-control " id="arrival" name="arrival" value="" placeholder="Chegada" autocomplete="chrome-off" data-date-format='yyyy-mm-dd'>
</div>
</div>
</div>
<div class="mb-3 relative">
<label for="ages" class="form-label">Idade do(s) passageiro(s):</label>
<input type="text" class="form-control " id="ages" name="ages" value="Selecione as idades" readonly>
<div class="w-100 selectAges">
<div class="card">
<div class="card-body ">
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>0 a 40</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old0" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>41 a 64</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old1" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>65 a 75</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old2" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-7 pt-2">
<label class="text-info h5"><span
class="text-primary"><b>76 a 99</b></span>
anos</label>
</div>
<div class="col-5 ages">
<div class="row">
<div class="col-4">
<div class="row">
<button class="btn-down">-</button>
</div>
</div>
<div class="col-4">
<div class="row">
<input type="text" class="w-100 p-0 text-center" name="old3" value="0" readonly>
</div>
</div>
<div class="col-4">
<div class="row">
<button class="btn-up">+</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a type="submit" class="btn btn-warning btn-aplicar text-white save">
<b>
Aplicar
</b>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 ">
<div class="mb-3">
<label for="name" class="form-label">Nome:</label>
<input type="text" class="form-control " name="name" value="nome" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail:</label>
<input type="email" name="email" class="form-control " id="email" value="email" id="email">
</div>
<div class="mb-3">
<label for="phone" class=" form-label">Telefone:</label>
<input type="text" name="phone" class="phone form-control " id="phone" value="telefone" id="phone">
</div>
</div>
<div class="col-lg-12 mt-3 mb-3 order-3">
<button class="btn w-100 btn-cotation" id="submitbtnt" type="submit">Cotar agora! ››</button>
</div>
</div>
</form>
and script
let timeToWait = 200;
let button = document.getElementById('submitbtnt');
setTimeout(() => {
button.onclick = function(e) {
e.preventDefault();
location.href ='URL-AQUI'
}
}, timeToWait);
I've tried in several ways but I'm not able to activate the delay with setTimeout()
In short, what I need is to leave a delay of 200ms before right after clicking the submit button

to prevent form submit ion you need to run preventDefault() on the submit event
const formCotation = document.getElementById('form_cotation');
formCotation.addEventListener("submit", function(event){
event.preventDefault();
setTimeout(() => {
formCotation.submit()
}, 200);
});

You need to add the setTimeout inside the onclick function, so the delay start right after users click the button
button.onclick = function(e) {
setTimeout(() => {
e.preventDefault();
location.href ='URL-AQUI'
}, timeToWait);
}

Ajax and php mysql auto calculate for invoice submision and print

I am creating a quotation invoice using ajax, php and mysql
I am stuck on making inputs to make calculations and submission of the form and be able to print invoice or save to pdf format
Note
the other thing is when I add a new line, it refreshes the above items inputs and deletes the select item..
$(document).on('click', '.addNewLine', function() {
var html = '<div class="space-15"></div><div class="row sline">\n' +
' <div class="col-md-5"><div class="displayItemDropdown"></div></div>\n' +
' <div class="col-md-1"><input type="text" name="Quantity[]" id="Quantity" data-srno="1" class="form-control" placeholder="Qty" required /></div>\n' +
' <div class="col-md-2"><input type="text" name="price[]" id="Price" data-srno="1" class="form-control" placeholder="Price" required /></div>\n' +
' <div class="col-md-3"><input type="text" name="total[]" id="Total" data-srno="1" class="form-control" placeholder="Total" disabled /></div>\n' +
' <div class="col-md-1"><input type="button" name="removeLine" class="removeLine btn btn-danger btn-xs" value="X"></div>\n' +
' </div>';
$(".div_field").append(html);
$(".div_field").on('click', '.removeLine', function() {
$(this).closest('.sline').remove();
});
displayItem(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
Customer Name *
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div id="displayCustomerDropdown" class=""></div>
<i class="fa fa-plus"></i> Add customer
<div class="row">
<div id="ans">
</div>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"></div>
</div>
<div class="space-15"></div>
<div class="ibox-content">
<div class="space-15"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
Date *
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div class="form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" name="adjustmentDate" value="2022-02-28" required>
</div>
</div>
<!-- /.form group -->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
Quotation #
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div id="orderNumber"></div>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
Reference #
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<input type="text" class="form-control" placeholder="Reference number" name="referenceNumber">
</div>
</div>
<div class="space-20"></div>
<div class="row">
<div class="row">
<div class="col-md-5"><label>Item Details</label></div>
<div class="col-md-1"><label>Qty</label></div>
<div class="col-md-2"><label>Price</label></div>
<div class="col-md-3"><label>Total</label></div>
<div class="col-md-1"></div>
</div>
<div class="div_field">
<div class="row sline">
<div class="col-md-5">
<div class="displayItemDropdown"></div>
</div>
<div class="col-md-1"><input type="text" name="Quantity[]" value="0" id="Quantity" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Qty" required /></div>
<div class="col-md-2"><input type="text" name="price[]" value="0" id="Price" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Price" required /></div>
<div class="col-md-3"><input type="text" name="total[]" value="0" id="Total" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Total" disabled /></div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="space-15"></div>
<button type="button" class="addNewLine btn btn-warning btn-xs"><i class="fa fa-plus"></i> Add new line</button>
<i class="fa fa-plus"></i> New Item
<hr />
<div class="space-20"></div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label>Customer Notes</label>
<textarea title="Customer Notes" placeholder="Enter any notes to be displayed on this transaction" name="comments" class="form-control"></textarea>
<div class="space-20"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-muted">
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Sub Total</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="subtotal" value="0" id="subtotal" onFocus="startCalc();" onBlur="stopCalc();" class="form-control text-right" disabled>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Discount (%)</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="discount" placeholder="Discount" class="form-control">
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>VAT</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<select name="tax" data-placeholder="Choose Item..." class="form-control select2 chosen-select" tabindex="2" autofocus required>
<?php
$vat=vat();
while ($tax=mysqli_fetch_array($vat)) {
?>
<option value="<?php echo $tax['tax_rate'];?>">
<?php echo $tax['taxName'];?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Total</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="total" class="form-control text-right" disabled>
</div>
</div>
<div class="space-15"></div>
</div>
</div>
<div class="space-20"></div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>Terms & Conditions</label>
<textarea title="Terms & Conditions" placeholder="Enter your business terms and condition to used this transaction" name="paymentTerms" class="form-control"></textarea>
</div>
</div>
<hr />
<button type="submit" name="AddItem" class="btn btn-primary">Complete Quotation</button>
<button type="reset" class="btn btn-white" data-dismiss="modal">Cancel</button>
</div>
</form>

Group of elements coming up inline - Bootstrap 4

The requirement is the label should be on top of the input element whereas the group of each label and input element should be inline with one another.
I am able to achieve the same with the below piece of code when label text is a bit long. When the text of the label is short, the input element is appearing inline with the label.
Probably what I am doing is wrong. Please let me know a better way to handle it through bootstrap.
Thanks in advance.
Code -
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>

Try usingd-flex and flex-column classes. Tried on some Bootstrap 4 playgrounds, worked as you need it to work.
You can read more about it here.
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A1</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A2</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A3</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
</div>
</form>

In bootstrap 4 you can use d-inline-block class
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>

Not trigger form validation on button click

I have a form which consists of two buttons. None of them have the "submit" declaration in type.
My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click.
Can this be achieved?
Below is my code.
<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
<div class="panel panel-default" ng-init="init()">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">PERSONAL INFO</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.name" name="username" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-Mail</label>
<div class="col-lg-9">
<input type="email" ng-model="customer.email" name="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile Number</label>
<div class="col-lg-9">
<input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".{9,}" required title="9 characters minimum" />
</div>
</div>
<legend class="text-semibold">ADDRESS</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Organisation Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".{0}|.{5,}" title="Either 0 OR (5 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Floor</label>
<div class="col-lg-9">
<input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".{0}|.{1,}" title="Either 0 OR (1 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 1</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 2</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Postcode</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">ITEMS</legend>
<div class="container" ng-repeat="item in items">
<div class="row">
<div class="col-md-1 col-xs-3 col-sm-2">
<a href="#" class="thumbnail">
<img ng-src="{{ item.thumbnail }}">
</a>
</div>
<div style="font-size:15px;" class="col-md-6"><span style="color:coral;">{{ item.qty }} x </span>{{ item.title }}</div>
<div style="font-size:13px;" class="col-md-6">{{ item.description }}</div>
<div class="col-md-6" style="padding-top:5px; font-size: 15px;">$ {{ item.line_total }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-semibold">CHECK OUT</legend>
</fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">Vouchercode</label>
<div class="col-lg-6">
<input type="text" ng-model="voucher" name="voucher" class="form-control" />
</div>
<div class="col-lg-3">
<button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Special Notes</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total</label>
<div class="col-lg-9">NZ {{total | currency}}</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

Add type to the button:
<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>

Categories