Develop Reference

how to add validation in javascript on form so that it should not append form when last row is empty (should not create another row untill all fields)

function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div class="col-md-2">
<label>Product Variants</label>
<a class="btn btn-primary" id="add_variant" onclick="add_variant()"><i class="fa fa-plus"></i> add Variant</a>
</div>
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</div>
<div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</template>
</div>
i am new to java script i am trying to add some validations on my add product form in which i am trying to perform some append function in whixh i want to append a div but if the previous row is empty then it should not add/append new row but while doing so it just check validation for the 1st row when i add 2 nd add try to add 3rd it shows error
will please anybody help me to solve this,here is my code
JS:
function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<button class="btn btn-danger"><i class="fa fa-
trash"></i></button>
</div>
<!--further fields-->
</div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i>
</button>
<!--further fields->
</div>
</div>
</template>
`

Here is the code:
const addVariant = document.getElementById("add_variant");
const productDescription = document.getElementById("product_description");
const errorAlert = document.querySelector(".alert");
const template = `<div class="row my-4 p-3 rounded productTemp">
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger btnDelete">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
`;
function addAlert(message) {
errorAlert.classList.add("show");
errorAlert.innerHTML = message;
setTimeout(() => {
errorAlert.classList.remove("show");
}, 3000);
}
addVariant.addEventListener("click", function() {
const productTemp = document.querySelectorAll(".productTemp");
const lastElement = productTemp[productTemp.length - 1];
const thickness = lastElement.querySelector('[name="thickness"]');
const thicknessUnit = lastElement.querySelector('[name="thickness_unit"]');
const productQty = lastElement.querySelector('[name="product_qty"]');
const productPrice = lastElement.querySelector('[name="product_cost_price"]');
const productUnit = lastElement.querySelector('[name="product_unit"]');
const productColor = lastElement.querySelector('[name="product_color"]');
if (
thickness.value !== "" &&
thicknessUnit.value !== "" &&
productQty.value !== "" &&
productPrice.value !== "" &&
productUnit.value !== "" &&
productColor.value !== ""
) {
productDescription.insertAdjacentHTML("beforeend", template);
} else {
addAlert("Fields can not be empty! 😑");
}
});
.productTemp {
background-color: #2c3035;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<body class="bg-dark text-white">
<div class="container mt-5 bg-dark text-white">
<div class="alert alert-danger alert-dismissible fade mb-5" role="alert"></div>
<div class="col-md-2 mb-4">
<label class="mb-2">Product Variants</label>
<a class="btn btn-primary" id="add_variant">
<i class="fa fa-plus"></i> add Variant
</a>
</div>
<div id="product_description">
<div class="row my-4 p-3 rounded productTemp">
<div class="col-sm-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

integrating dropzone with normal form

I have successfully integrated dropzone with my form using jquery. However, I have an issue with validation of the other form inputs. It seems the other form inputs do not respect the validation such as "required". I also tried using parsley for validation but does not work. when I remove the dropzone field, the validation works well.
Here is the form.
<form class="form-vertical"
id="createPropertyForm"
enctype="multipart/form-data"
method="POST"
>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Country</label>
<div class="inputGroupContainer">
<input id="country"
name="country" placeholder="Country" class="form-control" required
value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">County</label>
<div
class="inputGroupContainer">
<input id="county"
name="county" placeholder="County" class="form-control" required value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Town</label>
<div class=" inputGroupContainer">
<input id="town" name="town"
placeholder="Town" class="form-control" required value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Postcode</label>
<div class="inputGroupContainer">
<input id="postcode"
name="postcode" placeholder="Postcode" class="form-control" required
value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Description</label>
<div class=" inputGroupContainer">
<textarea id="description"
name="description" placeholder="Description" class="form-control"
required="true" value="" type="text"></textarea>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Address</label>
<div class="inputGroupContainer">
<input id="address" name="address"
placeholder="Address" class="form-control" required value="" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Bedrooms</label>
<div class=" inputGroupContainer">
<select class=" form-control"
name="bedrooms" id="bedrooms" required>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label
">Bathrooms</label>
<div class=" inputGroupContainer">
<select
class="selectpicker bathrooms form-control" name="bathrooms"
id="bathrooms"
required>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Price</label>
<div class="inputGroupContainer">
<input id="price" name="price"
placeholder="Price" class="form-control" required value="" type="number">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Property Type</label>
<div class=" inputGroupContainer">
<select
class="selectpicker form-control" name="propertyType" id="propertyType">
<option
value="">Choose type</option>
<?php
foreach
($propertyTypes as $propertyType) {
?>
<option value="<?=
$propertyType->id ?>"><?= $propertyType->title ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Type</label>
<div class="col-md-12">
<div class="col-md-6 ">
<label><input type="radio"
name="type" class="form-control type" required>Sale</label>
</div>
<div class="col-md-6">
<label><input type="radio"
name="type" class="form-control type" required>Rent</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Upload Image</label>
<div class=" inputGroupContainer">
<div class="dropzone"
id="create-dropzone" >
<div class="fallback">
<input name="file"
type="file" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="dropzone-previews"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success btn-lg"
type="submit" id="submitCreateForm"> Submit </button>
</div>
</form>.
Here is the jquery code:
// Parsley for form validation
$('#createPropertyForm').parsley();
$('#editPropertyForm').parsley();
Dropzone.options.createDropzone = {
url: `${baseUrl}administrator/properties`,
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFileSize:2048,
uploadMultiple: false,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submitCreateForm");
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
e.preventDefault();
if (wrapperThis.files.length) {
wrapperThis.processQueue();
} else {
wrapperThis.submit();
}
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button class='btn btn-block btn-danger'><i class='fa-times fa'></button>");
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('sending', function (data, xhr, formData) {
formData.append("country", $("#country").val());
formData.append("county", $("#county").val());
formData.append("town", $("#town").val());
formData.append("postcode", $("#postcode").val());
formData.append("description", $("#description").val());
formData.append("address", $("#address").val());
formData.append("bathrooms", $("#bathrooms").val());
formData.append("price", $("#price").val());
formData.append("bedrooms", $("#bedrooms").val());
formData.append("propertyTypeId", $("#propertyType").val());
formData.append("type", $(".type").val());
});
this.on('success', function (files, response) {
toastr.success(response.message);
setTimeout(function () {
location.reload();
}, 1000);
});
this.on('error', function (file, error, xhr) {
file.status = 'queued';
if (xhr.status === 422){
toastr.error('An error occurred, please confirm that you have filled all inputs and try again');
}else{
toastr.error('An error occurred');
}
});
this.on("maxfilesexceeded", function(file) {
wrapperThis.removeFile(file);
});
}
};

How to show the modal in without reloading the page

Here i did form validation ,after form validation all fields filled and click the INVITE QUOTES button means i want show modal, and i want to fill the modal form after filled all field means i want to close that modal,but dont want to refresh the page,Here i click INVITE QUOTES button means page is refreshing and modal is not showing how can do this?
<script>
/*$('#businessForm').submit(function (e) {
e.preventDefault();
validateForm();
});*/
function validateForm() {
var ratesfor = document.forms["myForm"]["ratesfor"].value;
if (ratesfor == null || ratesfor == "") {
document.getElementById("rate_err").innerHTML = "Field is empty";
}
var no = document.forms["myForm"]["no"].value;
if (no == null || no == "") {
document.getElementById("no_err").innerHTML = "Field is empty";
}
var breath = document.forms["myForm"]["breath"].value;
if (breath == null || breath == "") {
document.getElementById("b_t_err").innerHTML = "Field is empty";
}
var height = document.forms["myForm"]["height"].value;
if (height == null || height == "") {
document.getElementById("height_err").innerHTML = "Field is empty";
}
var truck_type = document.forms["myForm"]["truck_type"].value;
if (truck_type == null || truck_type == "") {
document.getElementById("truck_type_err").innerHTML = "Field is empty";
}
var datepicker = document.forms["myForm"]["datepicker-13"].value;
if (datepicker == null || datepicker == "") {
document.getElementById("pickup_err").innerHTML = "Field is empty";
}
var myTime = document.forms["myForm"]["myTime"].value;
if (myTime == null || myTime == "") {
document.getElementById("time_err").innerHTML = "Field is empty";
}
var from = document.forms["myForm"]["from"].value;
if (from == null || from == "") {
document.getElementById("from_err").innerHTML = "Field is empty";
}
var to = document.forms["myForm"]["to"].value;
if (to == null || to == "") {
document.getElementById("to_err").innerHTML = "Field is empty";
return false;
}
else{
$('#businessForm').submit(function (e) {
e.preventDefault();
})
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
}
}
</script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#Register").click(function(){
$("#myModal").hide();
$("#myModal_Register").modal();
});
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Rates For</label>
<input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
<span id="rate_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="length">Length</label>
<input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="length"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="breadth">Breadth</label>
<input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="breadth"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="height">Height</label>
<input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="height"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Type Of Truck</label>
<select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
<option value="feet">feet</option>
<option value="mm">mm</option>
<option value="mtr">mtr</option>
</select><span id="truck_type_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="date">Date of PickUp</label>
<br>
<input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
<span id="pickup_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="time">Time of PickUp</label>
<br>
<input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
<span id="time_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="experience">Destination</label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
<option value="">From</option>
<option value="1">Ahmedabad</option>
<option value="2">Bangalore</option>
</select>
</div>
<span id="from_err"></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="experience"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
<option value="">To</option>
<option value="1">Guragon</option>
<option value="2">Hyderabad</option>
</select>
</div>
<span id="to_err"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
</div>
</div>
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
<div class="modal-footer">
<p>Not a member? <b>Sign Up</b>
</p>
<!--<p>Forgot Password?</p>-->
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
<!--#####
Register From Start
#####--->
<div class="modal fade" id="myModal_Register" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Registration</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Confirm Password</label>
<input type="text" class="form-control" id="psw" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-info btn-block">Submit</button>
</form>
</div>
<!-- <div class="modal-footer">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>-->
</div>
</div>
</div>
</div>

Bro check this line:
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
here you are using button type submit, submit button will submit the form and reloads the page. Instead use:
<button type="button" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>

Bootstrap Modal - Submit not working

I am using bootstrap for building a new website and I have a registration form inside a modal! Here is the code of my modal/registration form:
<!-- BEGIN # MODAL REGISTRATION -->
<div class="modal fade" id="registration-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<div class="icon-wrapper"> <i class="fa fa-anchor fa-4x"></i> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<div class="icon-wrapper"> <i class="fa fa-close"></i> </div>
</button><br>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Registration Form -->
<form method="post" action="register.php" id="registration-form" class="form-horizontal">
<div class="col-sm-12">
<p>Willkommen zur Registrierung</p><br>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Schule:</label>
<div class="col-sm-10">
<select class="form-control" name="schule" id="schule" data-conditional="schule">
<option value="no_selected" checked>Bitte auswählen</option>
<option value="AHS Waldschule 1">AHS Waldschule 1</option>
<option value="AHS Waldschule 2">AHS Waldschule 2</option>
<option value="AHS Waldschule 3">AHS Waldschule 3</option>
</select>
</div>
</div>
<div class="form-group">
<div class="hide conditional-logic" data-condition="schule" data-match="AHS Waldschule 1">
<div class="form-group">
<label for="inputKlasse" class="col-sm-2 control-label">Klasse:</label>
<div class="col-sm-10">
<select class="form-control" name="klasse">
<option>1A</option>
<option>1B</option>
<option>1C</option>
<option>1D</option>
<option>2A</option>
<option>2B</option>
<option>2C</option>
<option>2D</option>
</select>
</div>
</div>
</div>
<div class="hide conditional-logic" data-condition="schule" data-match="AHS Waldschule 2">
<div class="form-group">
<label for="inputKlasse" class="col-sm-2 control-label">Klasse:</label>
<div class="col-sm-10">
<select class="form-control" name="klasse">
<option>3A</option>
<option>3B</option>
<option>3C</option>
<option>3D</option>
<option>4A</option>
<option>4B</option>
<option>4C</option>
<option>4D</option>
</select>
</div>
</div>
</div>
<div class="hide conditional-logic" data-condition="schule" data-match="AHS Waldschule 3">
<div class="form-group">
<label for="inputKlasse" class="col-sm-2 control-label">Klasse:</label>
<div class="col-sm-10">
<select class="form-control" name="klasse">
<option>5A</option>
<option>5B</option>
<option>5C</option>
<option>5D</option>
<option>6A</option>
<option>6B</option>
<option>6C</option>
<option>6D</option>
</select>
</div>
</div>
</div>
</div>
<hr>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Anrede:</label>
<div class="col-sm-10">
<select class="form-control" name="anrede">
<option>Herr</option>
<option>Frau</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputVorname" class="col-sm-2 control-label">Vorname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="vorname" placeholder="Ihr Vorname">
</div>
</div>
<div class="form-group">
<label for="inputNachname" class="col-sm-2 control-label">Nachname:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="nachname" placeholder="Ihr Nachname">
</div>
</div>
<div class="form-group">
<label for="inputStrasse" class="col-sm-2 control-label">Strasse:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="strasse" placeholder="Ihre Adresse">
</div>
</div>
<div class="form-group">
<label for="inputPLZ" class="col-sm-2 control-label">PLZ:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="plz" placeholder="Ihre Postleitzahl">
</div>
</div>
<div class="form-group">
<label for="inputOrt" class="col-sm-2 control-label">Ort:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ort" placeholder="Ihr Wohnort">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" placeholder="Ihre E-Mail Adresse">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon:</label>
<div class="col-sm-10">
<input type="tel" class="form-control" name="telefon" placeholder="Ihre Telefonnummer">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<p>Text Text Text
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" name="submit" class="btn btn-warning btn-lg btn-block" value="Registrieren" />
</div>
</div>
</form>
<!-- End # Registration Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL REGISTRATION -->
I made form action="register.php" and my register.php looks like this:
<?php
include 'inc/database.php';
// Check if form is submitted
if (isset ($_POST['submit'])) {
$schule = mysqli_real_escape_string ($mysqli, $_POST['schule']);
$klasse = mysqli_real_escape_string ($mysqli, $_POST['klasse']);
$anrede = mysqli_real_escape_string ($mysqli, $_POST['anrede']);
$vorname = mysqli_real_escape_string ($mysqli, $_POST['vorname']);
$nachname = mysqli_real_escape_string ($mysqli, $_POST['nachname']);
$strasse = mysqli_real_escape_string ($mysqli, $_POST['strasse']);
$plz = mysqli_real_escape_string ($mysqli, $_POST['plz']);
$ort = mysqli_real_escape_string ($mysqli, $_POST['ort']);
$email = mysqli_real_escape_string ($mysqli, $_POST['email']);
$telefon = mysqli_real_escape_string ($mysqli, $_POST['telefon']);
// Set Timezone
date_default_timezone_set('Austria/Vienna');
$time = date('h:i:s a', time());
// Validate Input
if (!isset ($schule) || $schule == '' || !isset($klasse) || $klasse == '' || !isset($anrede) || $anrede == '' || !isset($vorname) || $vorname == '' || !isset($nachname) || $nachname == '' || !isset($strasse) || $strasse == '' || !isset($plz) || $plz == '' || !isset($ort) || $ort == '' || !isset($email) || $email == '' || !isset($telefon) || $telefon == '') {
$error = "Es müssen alle Felder ausgefüllt werden!";
header("Location: index.php?error=".urlencode($error));
exit();
} else {
$query = "INSERT INTO user (schule, klasse, anrede, firstname_parent, lastname_parent, street_parent, plz_parent, city_parent, email, phonenumber_parent, time)
VALUES ('$schule','$klasse', '$anrede', '$vorname', '$nachname', '$strasse', '$plz', '$ort', '$email', '$telefon','$time')";
if(!mysqli_query($mysqli, $query)) {
die ('Error!' .mysqli_error($mysqli));
} else {
header("Location: admin.php");
exit();
}
}
}
My problem is that absolutley nothing happens when I click on the "Register" button. Does anyone know what I am doing wrong? I looked for more than 3 hours now but I am unable to find the problem :(!
I hope that someone can help me.
Thanks in advance!
Chris

In the form group section just before the submit button section you haven't closed your 'p' tag. I think this may be stopping the submit button from working?
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<p>Text Text Text
</div>
</div>

Form.Serialize with checkbox array

I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function
This is the form:
<form class="form" id="formNewClient" role="form">
<ul class="nav nav-tabs">
<li class="active"><i class="fa fa-user"></i> Dados Cliente</li>
<li><i class="fa fa-phone"></i> Dados Phonepark</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="clientdata">
<div class="row">
<div class="col-md-12">
<div class="page-header"><h3>Dados Pessoais</h3></div>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="name">Nome Completo:*</label>
<input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="email">Email:</label>
<input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="addressone">Morada:</label>
<input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="address2">Morada (cont.):</label>
<input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
</div>
<div class="form-group col-md-3">
<label for="postalcode">Código Postal:</label>
<input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
</div>
<div class="form-group col-md-3">
<label for="city">Localidade:</label>
<input type="text" name="clientCity" class="form-control" placeholder="Localidade">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="clientNif">NIF</label>
<input type="text" name="clientNif" class="form-control " placeholder="NIF">
</div>
<div class="form-group col-md-4">
<label for="clientBirthdate">Data de Nascimento</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
<input type='text' name="clientBirthdate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-4">
<label for="sex">Sexo:</label>
<br>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="M">
Masculino
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="F">
Feminino
</label>
</div>
</div>
</div>
<!--END CLIENTDATA-->
<div class="tab-pane" id="phoneparkdata">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Dados Phonepark</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Documentos:</h4></div>
<div class="form-group col-md-4">
<label for="document">Tipo de Documento:</label>
<select name="documenttype" class="form-control">
<?php selectListDocuments();?>
</select>
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento:*</label>
<input type="text" name="documentNumber" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento (Secundário):</label>
<input type="text" name="documentNumberSec" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Comunicações:</h4></div>
<div class="form-group col-md-4">
<label for="phone1">Telemóvel:*</label>
<input type="text" name="clientPhonePri" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="phone2">Telemóvel Secundário:</label>
<input type="text" name="clientPhoneSec" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<h4>Perfil:</h4>
<label for="profile">Perfil(s) a utilizar:*</label>
<?php
profileCheckBoxes();
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="activationDate">Data de Activação:</label>
<div class="form-group">
<div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientActivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="limitDate">Data de Limite:</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientDeactivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
</div>
</div>
<!--END PHONEPARKDATA-->
</div>
<!--END TAB-CONTENT-->
<div class="row">
<div class="col-md-4 col-lg-4 pull-right">
<button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
</div>
</div>
</form>
And this is the php function that generates the checkboxes:
function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
while($row = mysqli_fetch_array($listProfiles)){
?>
<label class="checkbox-inline">
<input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
<?php echo $row['Nome']; ?>
</label>
<?php
}
}
}
How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?

This jQuery documentation page explains how to use the serialize function:
http://api.jquery.com/serialize/
If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:
foreach ($_POST['profiles'] as $profile) {
//process code here
}

jQuery's form.serialize only pass checksboxes that are checked.
if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.
I would also change the checkboxes name to "profiles"