Ajax and php mysql auto calculate for invoice submision and print - javascript

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>

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.

Add data to dynamic table from modal form

I have a page that contains a form to collect some info. As part of that is a table where I'm trying to add rows of data from a modal form. Eventually, everything would be submitted to a SQL database.
Effectively, the whole form looks like:
Field 1
Field 2
Field 3
Field 5
Field 6
Field 7
Field 8
Delete
First
row
button
Second
row
Field 9
Submit
So field 1-3 would be appended to the beginning of each row upon submission to the SQL DB and 9 to the end.
The issue I'm having is getting the data entered in fields 5-8 on the modal form to appear in the table. What would be the best way to achieve this? I'm new to this so any help would be great.
I've had a look around and I see lots of way to get data out of a table to a modal form or to enter through fields in the table and add a new row that way like this (Add/Delete table rows dynamically using JavaScript) but I'd prefer to use a modal as my form for the table will end up being quite big.
HTML Form
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span> <br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
Modal
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form name="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<textarea class="form-control" name="components" id="components" required></textarea>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="classification" id="classification" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="button" class="btn btn-primary add-modal-waste" data-dismiss="modal"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>
</div>
</div>
move modal outside the form into a separate form
add submit listener to it (also add id and disable modal dismiss)
on modal form submit, validate data and create and append a table row, in which also add hidden inputs with values in a form of an array (userEntry[0][reference] etc.)
close modal, reset modal form
$(document).ready(function() {
let counter = 0;
$('#userEntry').on('submit', function(e) {
e.preventDefault();
const rows = [];
$.each($(this).serializeArray(), function(i, field) {
if (i > 0 && field.name === rows[rows.length - 1].name) {
rows[rows.length - 1].value += ';' + field.value;
} else {
rows.push(field);
}
});
let list = '<tr>';
$.each(rows, function(i, field) {
list += '<td>' + field.value + '<input type="hidden" name="userEntry[' + String(counter) + '][' + field.name + ']" value="' + field.value + '"/>' + '</td>';
});
list += '<td><button class="btn btn-warning" onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';
$('#userList tbody').append(list);
$('#AddModal').modal('hide');
counter++;
$(this)[0].reset();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal" data-target="#AddModal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span>
<br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
</div>
</form>
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="components" name="components" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="classification" name="classification" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="submit" class="btn btn-primary add-modal-waste"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>

Calling scrollIntoView(...) with block center not working

I'm trying to get the following code to work but it doesn't:
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", function () {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});
What this says is: for each input and select in my form, add an event listener that listens for the "invalid" state (fired upon submitting the form if any of the inputs or selects are invalid). The event listener will scroll the input or select into view at the center of the page in a smooth animation.
But it scrolls neither to the center of the page nor smoothly. My inputs and selects get scrolled to the top of the page instantly.
Adding a console log to the event listener tells me the event listener is responding and 'this' does refer to the right input or select:
console.log('this =', this);
So why is this not working for me?
EDIT:
Here is the HTML portion:
<section class="clearfix form-section">
<div class="container">
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-xs-12 intro">
Holland and Barnes would be very pleased to get your feedback about our services
</div>
</div>
<form class="feedback">
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="firstName">First Name *</label>
<input type="text" class="form-control" id="firstName" name="firstName" required>
<p class="help-block">Please enter your first name.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="lastName">Last Name *</label>
<input type="text" class="form-control" id="lastName" name="lastName" required>
<p class="help-block">Please enter your last name.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 col-xs-12">
<label for="email">Email *</label>
<input type="email" class="form-control" id="email" name="email" required>
<p class="help-block">Please enter your email address.</p>
</div>
<div class="form-group col-sm-6 col-xs-12">
<label for="country">Country *</label>
<select class="form-control" id="country" name="country" required></select>
<p class="help-block">Please enter your country.</p>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">What brings you to Calgary? * <input class="hidden-radio-button" id="reasonForVisiting_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="vacation" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Vacation
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="business" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Business
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="liveHere" group="reasonForVisiting" onclick="reasonForVisiting_checked()">Live Here
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="reasonForVisiting_other" group="reasonForVisiting" onclick="reasonForVisiting_checked(); reasonForVisiting_otherChecked()">Other
<input type="text" class="form-control" style="display: none;" id="reasonForVisiting_otherDetails" name="reasonForVisiting" placeholder="Please provide your reason for visiting Calgary.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<fieldset>
<legend class="checkbox-group-legend">How did you hear about us? * <input class="hidden-radio-button" id="hearAboutUs_hiddenRadioButton" type="radio" required /></legend>
<div class="checkbox-group">
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="searchEngine" group="hearAboutUs" onclick="hearAboutUs_checked()">Search Engine
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="friends" group="hearAboutUs" onclick="hearAboutUs_checked()">Friends
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="magazines" group="hearAboutUs" onclick="hearAboutUs_checked()">Magazines
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="newspapers" group="hearAboutUs" onclick="hearAboutUs_checked()">Newspapers
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="billboards" group="hearAboutUs" onclick="hearAboutUs_checked()">Billboards
</div>
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="television" group="hearAboutUs" onclick="hearAboutUs_checked()">Television
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<input type="checkbox" id="hearAboutUs_other" group="hearAboutUs" onclick="hearAboutUs_checked(); hearAboutUs_otherChecked()">Other
</div>
<div class="col-sm-6 col-xs-12">
<input type="text" class="form-control" style="display: none;" id="hearAboutUs_otherDetails" name="hearAboutUs" placeholder="Please provide how you heard about us.">
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label>Please give us a rating. *</label>
<hr style="margin-top: 5px;" />
<div class="form-group col-sm-6 col-xs-12">
Rate our service. <input class="hidden-radio-button" id="service_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="service-star-1" class="star" onclick="starClicked('service', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="service-star-2" class="star" onclick="starClicked('service', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="service-star-3" class="star" onclick="starClicked('service', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="service-star-4" class="star" onclick="starClicked('service', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="service-star-5" class="star" onclick="starClicked('service', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="serviceRating" name="serviceRating" value=0>
</div>
</div>
<div class="form-group col-sm-6 col-xs-12">
Rate our site. <input class="hidden-radio-button" id="site_hiddenRadioButton" type="radio" required /><br />
<div>
<img id="site-star-1" class="star" onclick="starClicked('site', 1)" src="/assets/img/ratings/star-unselected.gif" alt="1">
<img id="site-star-2" class="star" onclick="starClicked('site', 2)" src="/assets/img/ratings/star-unselected.gif" alt="2">
<img id="site-star-3" class="star" onclick="starClicked('site', 3)" src="/assets/img/ratings/star-unselected.gif" alt="3">
<img id="site-star-4" class="star" onclick="starClicked('site', 4)" src="/assets/img/ratings/star-unselected.gif" alt="4">
<img id="site-star-5" class="star" onclick="starClicked('site', 5)" src="/assets/img/ratings/star-unselected.gif" alt="5">
<input type="hidden" class="form-control" id="siteRating" name="siteRating" value=0>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 col-xs-12">
<label for="comments">Your comments would be most appreciated. Thank you! *</label>
<textarea class="form-control comments" id="comments" name="comments" rows="10" required></textarea>
</div>
</div>
<input type="hidden" class="form-control" id="recipientEmail" value="#Model.Content.Email" />
<div class="form-group">
<button type="submit" class="btn btn-primary pull-left submit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing" id="submit">Submit</button>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 submissionError">
There was a problem submitting your feedback. Please try again later.
</div>
</div>
</form>
</div>
</div>
</section>
Here is a JSFiddle demonstrating the problem:
https://jsfiddle.net/gib65/j1ar87yq/
Try using an arrow function so that this is bound to your callback correctly.
$.each($("input, select"), function (index, input) {
input.addEventListener("invalid", () => {
this.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
});
});

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>

how to add the multiple input text value in jquery

//my jquery
//get the amount and calculate the total amount
$('#dynamicDiv').on('keyup', '.getAmount', function(event) {
var total = 0;
$(this).each(function() {
total += parseInt(this.value,10);
});
<div id="dynamicDiv">
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount: </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
</div> <!-- parent div end -->
<div class="form-group">
<div class="row ">
<div class="col-md-6 col-md-offset-4">
<div class="form-group">
<label class="col-md-5 control-label"><b>Allowance Total:</b> </label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control totalAmount">
</div>
</div>
</div>
</div>
</div>
i feel this is complex, i want to add the multiple input text value and display in the total amount text value.so that the total sum of the input value. I have jQuery what's wrong with this. any help would be appreciated.
In $(this).each(function() {, this will return element on which event is invoked.
Use$('.getAmount') selector to get value of all the elements having class as getAmount
Note: Also use input event instead of keyup
$('#dynamicDiv').on('input', '.getAmount', function(event) {
var total = 0;
$('.getAmount').each(function() {
total += parseInt(this.value, 10) || 0;
//consider || condition as `parseInt('')` is `NaN` or use `Number(this.value)`
});
$('.totalAmount').val(total);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="dynamicDiv">
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
<div class="row form-group delDiv">
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Name:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control">
</div>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label class="col-md-5 control-label">Allowance Amount:</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control getAmount">
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</div>
<!-- parent div end -->
<div class="form-group">
<div class="row ">
<div class="col-md-6 col-md-offset-4">
<div class="form-group">
<label class="col-md-5 control-label"><b>Allowance Total:</b>
</label>
<div class="col-md-7">
<input type="text" name="" value="" class="form-control totalAmount">
</div>
</div>
</div>
</div>
</div>

Categories