Develop Reference

How to insert dynamic data and static input data to mysql using ajax, dynamic data will not insert

I have a modal form with static input fields and dynamic input fields.
currently the data is being sent to the mysql database, the static fields are being inserted into the database but the dynamic fields are not being inserted.
The form data has to inserted into three mysql tables. tables are orders, products and sma.
HTML input code
<div class="modal fade" tabindex="-1" role="dialog" id="insertModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="well form-horizontal" action="" method="post" id="">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Insert Order Details</h3>
</div><hr>
<fieldset>
<!-- Text input-->
<div class="form-group">
<label for="customer" class="col-md-4 control-label">Customer Name</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="customer" id="customer" placeholder="Customer" class="form-control" type="text">
<label id="lblcustomer" style="color:red"></label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label for="date" class="col-md-4 control-label">Date</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input name="date" id="date" placeholder="Date" class="form-control" type="date">
<label id="lbldate" style="color:red"></label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label for="invoice" class="col-md-4 control-label">Invoice</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="invoice" id="invoice" placeholder="Invoice" class="form-control" type="text">
<label id="lblinvoice" style="color:red"></label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="container">
<label for="product" class="col-md-4 control-label">Product Description</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea name="product[]" id="product" class="form-control" placeholder="Product Description"></textarea>
<label id="lblproduct" style="color:red"></label>
</div>
Add More
</div>
</div>
<!-- Text input-->
<div class="form-group" id="container1">
<label for="sma_number" class="col-md-4 control-label">SMA Number</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-barcode"></i></span>
<input name="sma_number[]" id="sma_number" placeholder="SMA Number" class="form-control" type="text">
<label id="lblsma_number" style="color:red"></label>
</div>
Add More
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label for="ebay" class="col-md-4 control-label">eBay Item Number</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-qrcode"></i></span>
<input name="ebay" id="ebay" placeholder="eBay Number" class="form-control" type="text">
<label id="lblebay" style="color:red"></label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label for="shipper" class="col-md-4 control-label">Shipped With</label>
<div class="col-md-7 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<select name="shipper" id="shipper" class="form-control selectpicker">
<option value=" ">Please select Shipping Company</option>
<option>DHL</option>
<option>TNT</option>
<option>FEDEX</option>
<option>AUSPOST</option>
<option>PickUp</option>
</select>
<label id="lblshipper" style="color:red"></label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label for="tracking" class="col-md-4 control-label">Tracking Number</label>
<div class="col-md-7 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="tracking" id="tracking" placeholder="Tracking No" class="form-control" type="text">
<label id="lbltracking" style="color:red"></label>
</div>
</div>
</div>
</fieldset>
<!-- Button -->
<div class="modal-footer">
<input type="button" name="save" id="save" value="Save Order" class="btn btn-success">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
Ajax script
<script>
$(document).ready(function(e){
//Variables
var html = '<div class="form-group"><label class="col-md-4 control-label">Product</label><div class="col-md-6 inputGroupContainer1" style="padding-left: 20px"><input name="product[]" id="product[]" placeholder="Product" class="form-control" type="text"></div><button id="remove" class="btn btn-danger i_remove_me pull-left" >-</button></div';
var maxRows = 5;
var x = 1;
//Add Rows to the form
$("#add").click(function(e){
e.preventDefault();
if(x <= maxRows){
$("#container").append(html);
x++;
}
});
//Remove rows from the from
$("#container").on('click','#remove', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
$(document).ready(function(e){
//Variables
var html1 = '<div class="form-group"><label class="col-md-4 control-label">SMA</label><div class="col-md-4 inputGroupContainer1" style="padding-left: 20px"><input name="sma_number[]" id="sma_number[]" placeholder="SMA Number" class="form-control" type="text"></div><button id="remove" class="btn btn-danger i_remove_me pull-left" >-</button></div';
var maxRows = 5;
var x = 1;
//Add Rows to the form
$("#add1").click(function(e){
e.preventDefault();
if(x <= maxRows){
$("#container1").append(html1);
x++;
}
});
//Remove rows from the from
$("#container1").on('click','#remove', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
</script>
<script>
//datatable
$(document).ready(function() {
$("#emp_table_details").DataTable();
});
$(document).ready(function() {
//Save Or Insert Data
$(document).on('click', '#save', function() {
var customer = $("#customer").val();
var date = $("#date").val();
var invoice = $("#invoice").val();
var product = $("#product").val();
var sma_number = $("#sma_number").val();
var ebay = $("#ebay").val();
var shipper = $("#shipper").val();
var tracking = $("#tracking").val();
if (customer == "") {
$("#lblcustomer").html("Customer Name Required!");
} else if (date == "") {
$("#lbldate").html("Date Required!");
} else if (invoice == "") {
$("#lblinvoice").html("Invoice Number Required!");
} else if (product == "") {
$("#lblproduct").html("Product Required!");
} else if (sma_number == "") {
$("#lblsma_number").html("SMA Number Required!");
} else if (ebay == "") {
$("#lblebay").html("eBay Number Required!");
} else if (shipper == "") {
$("#lblshipper").html("Shipper Required!");
} else if (tracking == "") {
$("#lbltracking").html("Tracking Required!");
} else {
$.ajax({
url: "ajaxsave.php",
type: "post",
data: {
customer: customer,
date: date,
invoice: invoice,
product: product,
sma_number: sma_number,
ebay: ebay,
shipper: shipper,
tracking: tracking
},
success: function() {
alert('Your Data Save Sucessful');
//document.getElementById('insert_form').reset();
//$("#emp_table_details").load('select_data.php');
$("#insertModal").modal('hide');
location.reload();
}
});
}
});
</script>
PHP insert to MYSQL code
<?php include 'config/config.php'; ?>
<?php
global $con;
//if (isset($_POST)) {
$customer = $_POST['customer'];
$date = $_POST['date'];
$invoice = $_POST['invoice'];
$product = $_POST['product'];
$sma_number = $_POST['sma_number'];
$ebay = $_POST['ebay'];
$shipper = $_POST['shipper'];
$tracking = $_POST['tracking'];;
$sql = "INSERT INTO orders(customer, date, invoice, ebay, shipper, tracking)
VALUES('$customer','$date','$invoice','$ebay','$shipper','$tracking')";
$query = mysqli_query($con, $sql);
$newOrderId = mysqli_insert_id($con);
if($query){
$sql1 = "INSERT INTO products(id, product) VALUES('$newOrderId','$product')";
$sql2 = "INSERT INTO sma(id, sma_number) VALUES('$newOrderId','$sma_number')";
$result = mysqli_query($con,$sql1);
$result2 = mysqli_query($con,$sql2);
}
?>

Adapt your AJAX call as follows:
var form = $("#submissionForm")[0]; //remember to give your form name the id submissionForm
var formData = new FormData(form);
$.ajax({
url: "ajaxsave.php",
type: "post",
data: formData,
contentType: false,
cache: false,
processData: false,
async: true,
success: function() {
alert('Your Data Save Sucessful');
//document.getElementById('insert_form').reset();
//$("#emp_table_details").load('select_data.php');
$("#insertModal").modal('hide');
location.reload();
}
});
You can then check what values your PHP file receive by writing them to file as follows:
<?php
$output = "POSTed variables:\n";
$customer = $_POST['customer']; $output .= "customer = $customer\n";
$date = $_POST['date']; $output .= "date = $date\n";
$invoice = $_POST['invoice']; $output .= "invoice = $invoice\n";
$products = $_POST['product'];
if (is_array($products))
{
for ($i=0; $i<sizeof($products); $i++)
{
$products[$i]; //the value of the array at index i. Save each of these to the database
$output .= "product[".$i."] = $products[$i]\n";
}
}
$sma_number = $_POST['sma_number'];
if (is_array($sma_number))
{
for ($i=0; $i<sizeof($sma_number); $i++)
{
$sma_number[$i]; //the value of the array at index i. Save each of these to the database
$output .= "sma_number[".$i."] = $sma_number[$i]\n";
}
}
$ebay = $_POST['ebay']; $output .= "ebay = $ebay\n";
$shipper = $_POST['shipper']; $output .= "shipper = $shipper\n";
$tracking = $_POST['tracking']; $output .= "tracking = $tracking\n";
file_put_contents( 'POSTed_vars.txt', $output ); // DEBUG
?>
I tested the code by filling out your modal form with multiple products and multiple sma numbers. The text file POSTed_vars.txt contained the following, which was exactly what I inserted into the form. It is now just your job to write those values to the database.
POSTed variables:
customer = John Doe
date = 2019-10-05
invoice = inv12345
product[0] = Blue Teddy Bear
product[1] = Green Teddy Bear
product[2] = Red Teddy Bear
sma_number[0] = sma12345
sma_number[1] = sma67891
ebay = ebay12345
shipper = DHL
tracking = track12345
Hope it helps

First time using prepared statements but query is not activating

I have just started using prepared statements as it was brought to my attention by another user. However, after I started to implement it, it doesn't seem to properly add the new record to the database. When I click on Submit, it just shows the register success div that I have setup.
login.php (Where the form is located)
<form id="signupform" class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="username" class="col-md-3 control-label">Username</label>
<div class="col-md-9">
<input type="text" class="form-control" name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="age" class="col-md-3 control-label">Age</label>
<div class="col-md-9">
<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' maxlength="3" class="form-control" name="age" placeholder="Age">
</div>
</div>
<div class="form-group">
<label for="region" class="col-md-3 control-label">Region</label>
<div class="col-md-9">
<input type="text" class="form-control" name="region" placeholder="Region">
</div>
</div>
<div class="form-group">
<label for="address" class="col-md-3 control-label">Address</label>
<div class="col-md-9">
<input type="text" class="form-control" name="address" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="Postcode" class="col-md-3 control-label">Postcode</label>
<div class="col-md-9">
<input type="text" class="form-control" name="postcode" placeholder="Postcode">
</div>
</div>
<div class="form-group">
<label for="language" class="col-md-3 control-label">Language</label>
<div class="col-md-9">
<input type="text" class="form-control" name="language" placeholder="Language">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="submit" class="btn btn-info"><i class="icon-hand-right"></i>Submit</button>
</div>
</div>
</form>
JavaScript:
<script type="text/javascript">
$(function() {
$("#signupform").bind('submit',function() {
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
var age = $('#age').val();
var region = $('#region').val();
var address = $('#address').val();
var postcode = $('#postcode').val();
var language = $('#language').val();
$.post('scripts/register.php',{username:username, email:email, password:password, firstname:firstname, lastname:lastname, age:age, region:region, address:address, postcode:postcode, language:language}, function(data){
$('#signupsuccess').show();
}).fail(function(){{
$('#signupalert').show();
}});
return false;
});
});
</script>
register.php
<?php
include 'connection.php';
if($conn->connect_error){
die("Connection failed: " . $conn->connect_error);
}
$stmt = $conn->prepare("INSERT INTO `users` (`ID`, `Username`, `Password`, `Email`, `First_Name`, `Last_Name`, `Age`, `Region`, `Address`, `Postcode`, `Language`) VALUES ('NULL', '?', '?', '?', '?', '?', '?', '?', '?', '?', '?')");
$stmt->bind_param(NULL, $username, $password, $email, $firstName, $lastName, $age, $region, $address, $postcode, $language);
$username = $_POST['username'];
$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
$email = $_POST['email'];
$firstName = $_POST['firstname'];
$lastName = $_POST['lastname'];
$age = $_POST['age'];
$region = $_POST['region'];
$address = $_POST['address'];
$postcode = $_POST['postcode'];
$language = $_POST['language'];
$stmt->execute();
$stmt->close();
?>

You're getting values from elements you think have id's (like #username) but none of your inputs has id="username". You can either add the id's to your input elements or you can change your selectors, e.g. $('[name="username"]')

Bootstrap Modal issue with fileinput

I have a real interesting problem with a bootstrap modal, let's start from beginning.
I have a list of inventories - with the function that you can book, edit, view, and delete. See image
All my functions works except edit, the problem I have with edit is that I can only edit one item before a page refresh. If I click edit on the first row that image shown is used on any subsequent edit I do - if I click the 2 or 3 row edit I get the first image - see popup image
This is the javascript to call the modal to pop up, as you can see I'm clearing the form first - making an Ajax call to get the data for that button. I only have a problem with an image not being able to show the actual image for an item.
//
// Edit the inventory
//
function edit_inventory(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('[name="image_name]').empty();
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('warehouse/inventory/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
var previewimage = data.image_name;
$('[name="image_name]').val(data.image_name);
$('[name="id"]').val(data.id);
$('[name="user_id"]').val(data.user_id);
$('[name="name"]').val(data.name);
$('[name="description"]').val(data.description);
$('[name="type_id"]').val(data.type_id);
$('[name="certifications_id"]').val(data.certifications_id);
$('[name="condition_id"]').val(data.condition_id);
$('[name="location_id"]').val(data.location_id);
$('[name="location_in_warehouse"]').val(data.location_in_warehouse);
$('[name="quantity_id"]').val(data.quantity_id);
$('[name="size_id"]').val(data.size_id);
$('[name="skills_required_id"]').val(data.skills_required_id);
$('[name="use_id"]').val(data.use_id);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Inventory'); // Set title to Bootstrap modal title
$("#image_name").fileinput({
uploadUrl: "<?php echo site_url('warehouse/inventory/ajax_fileupload')?>",
deleteUrl: "<?php echo site_url('warehouse/inventory/ajax_deletefile')?>",
showUpload: true,
uploadAsync: true,
// your upload server url
allowedFileExtensions : ['jpg', 'jpeg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000,
minFileCount: 1,
maxFileCount: 5,
maxFilesNum: 10,
initialPreview: [
// IMAGE DATA
"<?php echo site_url('assets/uploads/')?>/" + previewimage,
],
initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
initialPreviewConfig: [
{caption: previewimage, size: 576237, width: "120px", url: "warehouse/inventory/ajax_fileupload", key: 1},
],
layoutTemplates: {
main1: "{preview}\n" +
"<div class=\'input-group {class}\'>\n" +
" <div class=\'input-group-btn\'>\n" +
" {browse}\n" +
" {upload}\n" +
" {remove}\n" +
" </div>\n" +
" {caption}\n" +
"</div>"
}
});
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
For each item that I select to edit, I'm calling the backend to get the latest image from the database, each time a new image name is set in
var previewimage = data.image_name;
For the file input, I'm using the krajee bootstrap fileinput library, as I need to upload images. http://plugins.krajee.com/file-input/demo
You would expect by adding the new previewimage variable to the
initialPreview: [
// IMAGE DATA
"<?php echo site_url('assets/uploads/')?>/" + previewimage,
],
It would show a different image - somehow the first edit click done that image resides in the modal and is not cleared.
I have tried several things to clear the modal e.g.
$('#image_name').val('');
$('form').find('input[type=file]').val('');
Nothing works, it seems that I'm not getting the right element to clear or there is something in the krajee bootstrap file input that is not cleared correctly.
This is the code for my modal
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Inventory Form</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal" role="form" data-toggle="validator">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label">Select File</label>
<div class="col-md-9">
<input id="image_name" name="image_name[]" type="file" multiple class="file-loading">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Name</label>
<div class="col-md-9">
<input name="name" placeholder="Item Name" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Description</label>
<div class="col-md-9">
<input name="description" placeholder="Give a Description" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Location in Warehouse</label>
<div class="col-md-9">
<input name="location_in_warehouse" placeholder="Give details on were to find in Warehouse" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Type</label>
<div class="col-md-9">
<select id="types" name="type_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Usage</label>
<div class="col-md-9">
<select id="usages" name="use_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Skills Required</label>
<div class="col-md-9">
<select id="skills" name="skills_required_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Certifications</label>
<div class="col-md-9">
<select id="certificates" name="certifications_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Location</label>
<div class="col-md-9">
<select id="locations" name="location_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Quantity</label>
<div class="col-md-9">
<input name="quantity_id" placeholder="Quantity" class="form-control" type="number" data-validate="true" data-error="Only numbers allowed" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Condition</label>
<div class="col-md-9">
<select id="conditions" name="condition_id" class="form-control">
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Item Size</label>
<div class="col-md-9">
<input name="size_id" placeholder="Enter a size of the item" class="form-control" type="text">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I appreciate any help or suggestion to resolve this issue.
Here is the server side code:
switch ($inventory->status) {
case '0':
$row[] = '<img alt="sign in" src="' . base_url() . 'assets/uploads/warehousein.png">';
$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Book" onclick="book_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-check"></i> Book</a>
<a class="btn btn-sm btn-success" href="javascript:void(0)" title="Edit" onclick="edit_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-info" href="javascript:void(0)" title="View" onclick="view_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-list-alt"></i> View</a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="delete" onclick="delete_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
break;
As you can see, I add the inventory->id to the button.

just put this code first before you declare file input
$('#selector').fileinput('destroy');

Show Bootstrap's Alert on successful Submit

I'm trying to work on bootstrap's alert. Particulary this:
<div class="alert alert-success" role="alert">...</div>
I wanted it to pop-up on the modal after I successfully hit the submit button. How do I do that?
Here are my codes:
<!--____________________________ADD AGENT________________________-->
<div class="modal fade" id="addAgent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<form role="form" action="php/addAgent.php" method="POST">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Agent</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="fullname">Full Name</label>
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="First Name" name="fname">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Middle Name" name="mname">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Last Name" name="lname">
</div>
</div>
</div><!--___________FORM GROUP_____________-->
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<label for="sel1">Type:</label>
<select class="form-control" name="agentType" id="sel1">
<option value="1">Broker</option>
<option value="2">Agent</option>
<option value="3">Sub-Agent</option>
</select>
</div>
<div class="col-sm-4">
<label for="sel1">Project:</label>
<select class="form-control" id="sel1">
<option>Mezza</option>
<option>Tivoli Gardens</option>
<option>Verawoods Residences</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="email">Email Address</label>
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="col-sm-4">
<label for="contact">Contact Number</label>
<input type="text" class="form-control" name="contact" id="contact">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="homeAdd">Home Address</label>
<input type="text" class="form-control" name="homeAdd" id="homeAdd">
</div>
</div>
</div>
</form>
</div>
</div> </div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="submit"/>
<button type="button" class="btn btn-default" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div><!--______________________ADD AGENTS MODAL_______________________-->
<!-- Button trigger modal -->
Here's my PHP:
<?php
$user="root"; $pass=""; $db="realesate";
$db = new mysqli('localhost', $user, $pass, $db);
//check connection
if ( $db->connect_error) {
die('Connect Error: ' . $db->connect_errno . ': ' . $db->connect_error );
}
//insert data
$sql = "insert into agent (AgentFName , AgentMName , AgentLName , AgentContact , AgentEmail, AgentAddress , agentType)
values (
'{$db->real_escape_string($_POST['fname'])}' ,
'{$db->real_escape_string($_POST['mname'])}' ,
'{$db->real_escape_string($_POST['lname'])}' ,
'{$db->real_escape_string($_POST['contact'])}' ,
'{$db->real_escape_string($_POST['email'])}' ,
'{$db->real_escape_string($_POST['homeAdd'])}' ,
'{$db->real_escape_string($_POST['agentType'])}')";
$insert = $db->query($sql);
if ($insert) {
echo"";
}
//close connection
$db->close();
?>
How do I do that after I successfully added the values on my database?

If you're not using AJAX to call addAgent.php and your PHP and HTML are in one file, then one way would be to set a variable in your PHP like so:
if ($insert) {
$alert_success = '<div class="alert alert-success" role="alert">...</div>';
}
Then anywhere in your HTML you can add a line that echos that variable.
<?php
echo $alert_success;
?>

You could use a submit handler for your form:
// Add an ID to your form
$( "#formID" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
$(".modal-body, #orModalBodyID"). append('<div class="alert alert-success" role="alert">Post Success</div>')
});
});
You can find more information on jQuery's post() method # their API documentation website

editing multiple users using modal form (javascript, html)

Hi guys the issue I have is within my users admin page, I have displayed all the admin users within a table each assigned a delete and edit button.
When I click on edit the given users details appear in a modal form. Within the edit details there is a password and confirm password box, when I click on the edit details for the first user, the validation for confirm password appears as "passwords don't match" however when I click on the second user the confirm password does not validate.
Below is the source code I am having issues with any help will be much appreciated:
<a rel="tooltip" title="Edit" id="e<?php echo $id; ?>" href="#edit<?php echo $id; ?>" data-toggle="modal" class="btn btn-success"></i>Edit</a>
<div id="edit<?php echo $id;?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="alert alert-info"><strong>Edit User</strong></div>
<form class="form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Firstname</label>
<div class="controls">
<input type="text" id="inputEmail" name="firstname" value="<?php echo $row['firstname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Lastname</label>
<div class="controls">
<input type="text" id="inputEmail" name="lastname" value="<?php echo $row['lastname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Mobile Number</label>
<div class="controls">
<input type="text" id="inputEmail" name="mobilenumber" value="<?php echo $row['mobilenumber']; ?>" required>
</div>
</div>
<input type="hidden" id="inputEmail" name="id" value="<?php echo $row['admin_id']; ?>" required>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="text" name="password" id="password" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Confirm Password</label>
<div class="controls">
<input type="text" name="confirmpassword" id="confirmpassword" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button name="edit" type="submit" class="btn btn-success"> Update</button>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("confirmpassword").onchange = validatePassword;
}
function validatePassword(){
var confirmpassword=document.getElementById("confirmpassword").value;
var password=document.getElementById("password").value;
if(password!=confirmpassword)
document.getElementById("confirmpassword").setCustomValidity("Passwords Don't Match");
else
document.getElementById("confirmpassword").setCustomValidity('');
//empty string means no validation error
}
</script>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> Close</button>
</div>
</div>
<?php
if (isset($_POST['edit'])){
$admin_id=$_POST['id'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$mobilenumber=$_POST['mobilenumber'];
$password= sha1 ($_POST['password']);
mysql_query("update admin set firstname = '$firstname', lastname = '$lastname', mobilenumber = '$mobilenumber', password = '$password' where admin_id='$admin_id'")or die(mysql_error()); ?>
<script>
window.location="adminusers.php";
</script>
<?php
}
}
?>
Validation issue
Validation issue 2