Using the javascript function without repeating it

Using the javascript function without repeating it - javascript

The following <div> section I am duplicating and below the JavaScript function, I want to use again and again. Share your ideas if this is possible.
<?php $new_material = ["a","b","c"]; //array to pass in foreach
foreach ($new_material as $mat) {
?>
<div class="row " id="row2">
<div class="row " id="row2.1">
<div class="col-xs-2">
<label>Material Name</label>
</div>
<div class="col-xs-3">
<label>Brand</label>
</div>
<div class="col-xs-2">
<label>Category</label>
</div>
</div>
<div class="row " id="row2.2">
<div class="col-xs-2">
<p id="material_select"><?=$mat?></p>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="brand" id="brand"/>
</div>
<div class="col-xs-2">
<input type="text" class="form-control" name="category" id="category"/>
</div>
<label class="col-xs-2">Total Quantity:</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="totalquantity" id="totalquantity"/>
<br>
</div>
</div>
<div class="row " id="row2.3">
<label class="col-xs-1">Specification</label>
<label class="col-xs-1">Quantity</label>
<label class="col-xs-2">Unit</label>
<button type="button" onclick="duplicate()" class="btn btn-info col-xs-3" >Add Specification</button>
<label class="col-xs-2">Unit:</label>
<span id="units_div">
<p class="" name="units"/>
</span>
</div>
<div class="row " id="duplicater" >
<div class="col-xs-1">
<input type="text" id="specification" class="form-control" name="specification[]"/>
</div>
<div class="col-xs-1">
<input type="text" id="quantity" class="form-control" name="quantity[]"/>
</div>
<div class="col-xs-2" id="units1_div">
<p id="unit" name="unit[]"/>
</div>
<div class="col-xs-2" id="delete">
<button id="delete_btn"type="button" onClick="removeduplicate(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
</div>
</div>
</div>
<br>
<div>
<div class="row " id="row2.4">
<label class="col-xs-1">Tax</label>
<label class="col-xs-1">Tax%</label>
<label class="col-xs-2">Tax Amount</label>
<button type="button" onClick="duplicate1()" class="btn btn-info col-xs-3" >Add Tax</button>
<label class="col-xs-2">Rate</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="rate" id="rate"/><br>
</div>
</div>
<div class="row " id="duplicater1" >
<div>
<input type="text" id="taxamt" class="form-control" name="taxamount[]"/> </div>
<div class="col-xs-1" id="tax_div">
<p id="unit" name="taxper[]"/>
</div>
<div class="col-xs-1">
<input type="text" id="taxamt" class="form-control" name="taxamount[]"/>
</div>
<div class="col-xs-2" id="delete">
<button id="delete_btn1" type="button" onClick="removeduplicate1(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
</div>
</div>
</div>
<div class="row" id="row 2.5">
<div class="col-xs-7">
</div>
<label class="col-xs-2">Total Amount</label>
<div class="col-xs-2">
<p id="totalamount" name="totalamount"></p>
<input type="hidden" value="" name="totalamount" id="totalamount" readonly/><br>
</div>
</div>
<?php
}
?>
JavaScript code: This is the JavaScript function, I want use whenever I'm duplicating the above code as I'm passing the material name in foreach() loop, so it is duplicating based on every material name.
function duplicate() {
document.getElementById('delete_btn').style.visibility = "visible";
var original = document.getElementById('duplicater');
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
document.getElementById('delete_btn').style.visibility = "hidden";
document.getElementById('specification').value="";
document.getElementById('quantity').value="";
document.getElementById('unit').value="";
}
function removeduplicate(element){
element=element.parentNode.parentNode;//gets the id of the parent
element.parentNode.removeChild(element);
}

Natural place of javascript files/code loading is in the head so just place it there. Since you do not want your head to be duplicated anyways (invalid html).

Related

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>

Find all the checkboxes inside html

I am generating a dynamic form. Upon adding checkboxes the following HTML is generated:
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item"
value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item"
value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>
I need to get all the checkboxes inside the HTML and use their data attribute, I have tried to use this:
var checkboxes = $('.selected_checkboxes :checkbox');
Then I loop on the checkboxes, but that did not work.
Can someone please advise to help me sort it out

Without (POJS) or with JQuery:
// POJS
document.querySelectorAll(".selected_checkboxes .checkbox_item")
.forEach( cb => console.log(`data-id: ${cb.dataset.id}`) );
// JQuery
$(".selected_checkboxes :checkbox")
.each( (i, cb) => console.log(`data-id: ${cb.dataset.id}`) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item" value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item" value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>

How to handle html5 validation if there are two different forms Id in a single page?

I have two different forms with id newForm and oldForm . But when i click on submit button then html5 validation is only shown on input fields of 'newForm'.The html5 validation is not appearing in oldForm ,as i have kept the required field in input fileds of oldForm. How can i validate these two different forms when i click Submit button ? I need the html5 valdiation in both forms but the validation is appearing in seconnd form but not in first form.
$(document).ready(function() {
$("#saveBtn").on("click", function() {
console.log("form submitted");
/*$.ajax({
// ajax code to submit
}); */
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-bottom: 20px;">
<h2>Pre Assessment</h2>
<div class="card">
<div class="card-body">
<div class="col-md-12" style="float: none;">
<form id="oldForm">
<div class="row">
<div class="form-group col-md-6 assess">
<div class="col-md-12">
<font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
</font>
<select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
<option value="" selected disabled hidden>Choose here</option>
<option value="appeal">Appeal</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<div class="row">
<div class="col-md-12 pnbp" style="margin-bottom: 10px;">
<font face="preeti" size="5">
k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
<input type="text" class="form-control" id="appealId" name="appealId" required />
</div>
</div>
<div class="row">
<div class="col-md-12 orIf" style="margin-bottom: 10px;">
<font face="preeti" size="5">cGo</font>
<input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
</div>
</div>
</div>
</div>
<!-- for other two field -->
<div class="row">
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
(B.S.)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
<font face="preeti" size="5">
</font>(A.D.)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(B.S)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(A.D)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
</div>
</div>
</div>
</form>
<form id="newForm">
<div id="formContainer" class="col-md-12" style="float: none;">
<div style="margin-bottom: 30px;">
<div class="form-group row">
<div class="col-md-1"></div>
<div class="col-md-4">
<label>Reason</label>
</div>
<div class="col-md-2">
<label>Amount</label>
</div>
<div class="col-md-2">
<label>Penalty</label>
</div>
<div class="col-md-1">Total</div>
<div class="col-md-2">Action</div>
</div>
<div class="customs-table row">
<div class="col-md-1">
<label>Customs</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control customReason" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="vat-table row">
<div class="col-md-1">
<label>VAT</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control vatReason" name="vatReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="excise-table row">
<div class="col-md-1">
<label>Excise</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control exciseReason" name="exciseReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div id="a"></div>
<div class="col-md-12 pull-right">
<label>Total:</label> <b><span id="tot">0</span></b>
</div>
</div>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Since you're using HTML5 validation, use HTML5 DOM methods:
$(document).ready(function() {
// Add the e (event) argument to your event handler...
$("#saveBtn").on("click", function(e) {
// and call preventDefault() on it to prevent submission of the form.
e.preventDefault();
let allValid = true;
$("form").each(function (index, form) {
allValid = allValid && form.reportValidity();
});
if (allValid) {
/*$.ajax({
// ajax code to submit
}); */
}
});
});
form { border: 1px solid blue; }
input:invalid { border: 1px solid red; }
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-bottom: 20px;">
<h2>Pre Assessment</h2>
<div class="card">
<div class="card-body">
<div class="col-md-12" style="float: none;">
<form id="oldForm">
<div class="row">
<div class="form-group col-md-6 assess">
<div class="col-md-12">
<font face="preeti" size="5">s/ lgwf{/0f ug{ kg]{ sf/0f
</font>
<select class="form-control" name="causeOfExciseAct" id="causeOfExciseAct">
<option value="" selected disabled hidden>Choose here</option>
<option value="appeal">Appeal</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group col-md-6">
<div class="row">
<div class="col-md-12 pnbp" style="margin-bottom: 10px;">
<font face="preeti" size="5">
k'g/fj]bgsf] lg0f{o cg';f/ ePsf] eP k'g/fj]bg g+ </font>
<input type="text" class="form-control" id="appealId" name="appealId" required />
</div>
</div>
<div class="row">
<div class="col-md-12 orIf" style="margin-bottom: 10px;">
<font face="preeti" size="5">cGo</font>
<input type="text" class="form-control" id="reasonDesc" name="reasonDesc" required />
</div>
</div>
</div>
</div>
<!-- for other two field -->
<div class="row">
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
(B.S.)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('intCalUptoAd').id)" id="intCalUpto" name="intCalUpto" required>
</div>
</div>
<div class="form-group col-md-3">
<div class="col-md-12" style="margin-bottom: 10px;">
<font face="preeti" size="5">
</font>(A.D.)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('intCalUpto').id)" id="intCalUptoAd" name="intCalUptoAd" required>
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(B.S)
<input type="text" class="form-control" onchange="changeToAd(this.value,document.getElementById('assessmentDateAd').id)" id="assessmentDate" name="assessmentDate">
</div>
</div>
<div class="form-group col-md-3">
<div style="margin-bottom: 40px;">
(A.D)
<input type="text" class="form-control" onchange="changeToBs(this.value,document.getElementById('assessmentDate').id)" id="assessmentDateAd" name="assessmentDateAd">
</div>
</div>
</div>
</form>
<form id="newForm">
<div id="formContainer" class="col-md-12" style="float: none;">
<div style="margin-bottom: 30px;">
<div class="form-group row">
<div class="col-md-1"></div>
<div class="col-md-4">
<label>Reason</label>
</div>
<div class="col-md-2">
<label>Amount</label>
</div>
<div class="col-md-2">
<label>Penalty</label>
</div>
<div class="col-md-1">Total</div>
<div class="col-md-2">Action</div>
</div>
<div class="customs-table row">
<div class="col-md-1">
<label>Customs</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control customReason" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" required />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" required />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="vat-table row">
<div class="col-md-1">
<label>VAT</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control vatReason" name="vatReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div class="excise-table row">
<div class="col-md-1">
<label>Excise</label>
</div>
<div class="col-md-4">
<input type="text" class="form-control exciseReason" name="exciseReason" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
</div>
<div class="col-md-2">
<input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
</div>
<div class="col-md-1">
<span class="sum">0</span>
</div>
<div class="col-md-2">
<button type="button" class="add">+</button>
<button type="button" class="remove">-</button>
</div>
</div>
<div id="a"></div>
<div class="col-md-12 pull-right">
<label>Total:</label> <b><span id="tot">0</span></b>
</div>
</div>
<button id="saveBtn" class="btn btn-success pull-right">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Things to note:
This will show the validation message on the last invalid field on the last form in document order.
I added CSS to highlight the form boundaries and invalid fields to make it more obvious.
The font element has been deprecated for a long time. Use a span and CSS.

Don't use HTML5 validation, instead create your own validation methods using Ajax to prevent client side user manipulation.
Using JavaScript to validate the forms before POST as follows:
<!--Html Form-->
<form name="contact-form" action="" method="post" onsubmit="return checkFields()">
<label for="nameinput">Name</label>
<input type="text" name="name">
<label for="emailinput">Email address</label>
<input type="email" name="email">
<label for="textarea-input">Message</label>
<textarea rows="5" name="message"></textarea>
<button type="submit" name="contactSubmitBtn">Submit</button>
</form>
function checkFields() {
var x = document.forms["example-form"]["name"].value;
var y = document.forms["example-form"]["email"].value;
var z = document.forms["example-form"]["message"].value;
if (x == "") {
Response Here
return false;
}
if (y == "") {
Response Here
return false;
}
if (z == "") {
Response Here!
return false;
}
}

Angular 2 - Unable to display rows of data in tabular column format

I am new to Angular. I am trying to display rows of data in a tabular column format. But each field in a row is displayed as row. I want each field in a row to be displayed next to each other as different columns in a single row. Below is my HTML code:
<div class='container'>
<h2 class="page-header">Add Contact</h2>
<form (submit)="addContact()">
<div class="form-group">
<label>First Name</label>
<input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
</div>
<input type="submit" class="btn btn btn-success" value="Add">
</form>
</div>
<hr>
<div class="container">
<div *ngFor="let contact of contacts">
<div class="col-md-3">
{{contact.first_name}}
</div>
<div class="col-md-3">
{{contact.last_name}}
</div>
<div class="col-md-3">
{{contact.phone}}
</div>
<div class="col-md-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
</div>

This looks like a bootstrap issue. Try wrapping your col-md-3 divs in a row.
<div class="row">
<div class="col-md-3">
{{contact.first_name}}
</div>
<div class="col-md-3">
{{contact.last_name}}
</div>
<div class="col-md-3">
{{contact.phone}}
</div>
<div class="col-md-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
In this codepen, you can visualize it: https://codepen.io/capozzic1/pen/rrYzaV

Change from col-md-3 to col-xs-3 or col-sm-3. I'm guessing your viewport is larger than md, so it falls back to full width.
Try running the snippet below
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='container'>
<h2 class="page-header">Add Contact</h2>
<form (submit)="addContact()">
<div class="form-group">
<label>First Name</label>
<input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
</div>
<input type="submit" class="btn btn btn-success" value="Add">
</form>
</div>
<hr>
<div class="container">
<div *ngFor="let contact of contacts">
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
Test
</div>
<div class="col-xs-3">
<input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
<br><br>
</div>
</div>
</div>

I suggest, use Angular Flex for arranging your <div>s as per your requirement. Its pretty simple once your know how to use Angular Flex(refer).

How i create a quiz system in jquery

Actually am making a online quiz func in my website here is my quiz code
<form method="POST">
<div id="questions">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question <label id="question_no" value='1'>1</label></label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success mb-4">Submit</button> <button id="add_more" class="btn btn-primary mb-4">Add More</button>
</form>
actually i want that when add more button is clicked then the same code in div with id questions is append next to this div and also question no will be increased automatically
i tried diff method but none of them works prefectly and help
Thank You ...
~~~~~~~UPDATE~~~~~~~~
here is what i do simply wrote this code
<!--TEMPLATE-->
<script type="text/javascript" id="questions_template">
<div id="questions_template1">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question 1</label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
</script>
<!--END OF TEMPLATE-->
and after that here is my jquery code
$("#add_more").click(function(e){
e.preventDefault();
$("#questions").append($("#questions_template").html());
})

First, add div for your template question, this is the one you will duplicate.
<form method="POST">
<div class="question">
.....
</div>
<button>submit</button>
<button>add_more</button>
</form>
Now use jquery to duplicate this 'question' and update it with correct id.
$("#add_more").click(function(e) {
e.preventDefault();
var id = $(".question").length;
id++;
var $newQuestion = $("form").find(".question:last").clone();
$newQuestion.find("label").attr("value", id);
$newQuestion.find("#question_no").text(id);
$newQuestion.insertBefore($(".btn-success"));
})
Jsfiddle : https://jsfiddle.net/xpvt214o/411294/

We Keep Coding

JavaScript is the programming language of the Web.

Using the javascript function without repeating it - javascript

Natural place of javascript files/code loading is in the head so just place it there. Since you do not want your head to be duplicated anyways (invalid html).

Related

Add data to dynamic table from modal form

Find all the checkboxes inside html

How to handle html5 validation if there are two different forms Id in a single page?

Angular 2 - Unable to display rows of data in tabular column format

How i create a quiz system in jquery

Categories

Resources