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>
Related
<!-- Custom Modals -->
<div class="row">
<div class="col-md-12">
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="con-close-modalLabel">Tambah Jadwal Shift</h4>
</div>
<div class="modal-body">
<form action="tjadwal.php" method="post" id="insert_form">
<div class="row">
<div class="col-md-6">
<input type="hidden" name="nomor_shift" value="<?php echo $d['nomor_shift']; ?>">
<div class="form-group">
<label for="nama" class="control-label">Nama</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="Nama" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="jabatan" class="control-label">Jabatan</label>
<select class="form-control" id="jabatan" name="jabatan">
<option>SNOC</option>
<option>Control Center</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="tanggal" class="control-label">Tanggal</label>
<input type="date" class="form-control" id="tanggal" name="tanggal" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="shift_mulai" class="control-label">Jam mulai shift</label>
<input type="time" class="form-control" id="shift_mulai" name="shift_mulai" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="shift_selesai" class="control-label">Jam selesai shift</label>
<input type="time" class="form-control" id="shift_selesai" name="shift_selesai" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group no-margin">
<label for="keterangan_shift" class="control-label">Keterangan</label>
<textarea class="form-control autogrow" id="keterangan_shift" name="keterangan_shift" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px;" required=""></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<strong class="col-form-label col-sm-2 pt-0">Status</strong>
<div class="col-sm-10">
<div class="form-group row">
<div class="col-sm-10">
<input type="radio" class="form-check-input" id="status" name="status" value="BELUM JAM SHIFT">
Belum jam shift
</div>
<div class="col-sm-10">
<input type="radio" class="form-check-input" id="status" name="status" value="SEDANG JAM SHIFT">
Sedang jam shift
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-info waves-effect waves-light">Tambah Jadwal</button>
</form>
</div>
</div>
</div>
</div><!-- /.modal -->
JQUERY
$(document).ready(function() {
$('.tombolTambahJadwal').on('click', function() {
$('#con-close-modalLabel').html('Tambah Jadwal Shift');
$('.modal-footer button[type=submit]').html('Tambah Jadwal');
$('#insert_form')[0].reset();
});
$(document).on('click', '.tampilModalUbah', function() {
$('#con-close-modalLabel').html('Ubah Jadwal Shift');
$('.modal-footer button[type=submit]').html('Ubah Jadwal');
$('.modal-body form').attr('action', 'ubahJadwal.php');
var nomor_shift = $(this).data("id");
$.ajax({
url: "idJadwal.php",
method: "POST",
data: { nomor_shift : nomor_shift},
dataType: "json",
success: function(data){
console.log(data);
$('#nama').val(data.nama);
$('#jabatan').val(data.jabatan);
$('#tanggal').val(data.tanggal);
$('#shift_mulai').val(data.shift_mulai);
$('#shift_selesai').val(data.shift_selesai);
$('#keterangan_shift').val(data.keterangan_shift);
$('#status').val(data.status);
$('#nomor_shift').val(data.nomor_shift);
}
});
});
I made one form in html, if user submit form then value stored in form will stored in database.
and i put one option Edit if user click on edit then open that filled form in model, but how to fill the dropdown in html.
this is my form code
<!-- Large Modal -->
<div id="additem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Message Preview</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="additem" enctype="multipart/form-data">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Price with
Discount</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="offerprice">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Product
Availability</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="availability">
<option value="" disabled selected>Product
Availability</option>
<option value="In Stock">In Stock</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
this is my button code for load data when click on edit this code will execute
<button class="adtocart"
onclick="loaddata(${listitem.item_id},'${listitem.name}','${listitem.brand}','${listitem.price}','${listitem.description}','${listitem.availability}','${listitem.itemtype}',${listitem.offerprice});"
data-toggle="modal" data-target="#edititem">
<i class="fa fa-edit"></i>
</button>
this is my javascript function for handel data send by button. this how i fill the value of text box
function loaddata(item_id,name,brand,price,description,availability,itemtype,offerprice)
{
alert("Hello! I am an alert box!");
document.f1.item_id.value=item_id;
document.f1.name.value=name;
document.f1.brand.value=brand;
document.f1.price.value=price;
document.f1.description.value=description;
}
below code is for display filled form for edit data
<!-- Edit Item Model Start -->
<!-- Large Modal -->
<div id="edititem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Edit Item</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="edititem" enctype="multipart/form-data"
name="f1">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="hidden" id="item_id" name="item_id"> <input
type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"
id="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
<!-- Edit Item Model End -->
Actually, I don't really know what you are looking for. But maybe this piece of code would be helpful.
function selectOption(value)
{
// get the select
const selectTest = document.f1.itemtype;
// the loop runs over all options
for (let i = 0; i < selectTest.options.length; i++)
{
if( value === selectTest.options[i].value)
{
// if the "value" is an possible option
// this option is selected and the loop is aborted.
selectTest.options[i].selected = true;
break;
}
}
}
// call the function with the value of the second option
selectOption('test2');
<form name="f1">
<select name="itemtype" >
<option value="test1">TEST 1</option>
<option value="test2">TEST 2</option>
<option value="test3">TEST 3</option>
<option value="test4">TEST 4</option>
<option value="test5">TEST 5</option>
<option value="test6">TEST 6</option>
</select>
</form>
In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model
Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
I have a modal containing two forms, I want to switch between them when one of the radio buttons is checked, so i need to hide one of them in modal load, i did the following code, but it doesn't hide, can anyone help me in that?
The Form need to be hidden on modal load is called LocateOnMap to hide all its content.
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input type="radio" name="optradio">Enter Address</label>
<label class="radio-inline"><input type="radio" name="optradio">Locate on Map</label>
</div>
</div>
<form id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly >
</div><br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly >
</div>
</div>
</div><br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
<script>
initModalfrmmap();
</script>
</div>
</div>
</form>
<form id="EnterAddress">
<label style="color:red;">Hiii</label>
</form>
<script type="text/javascript">
$('#LocateOnMap').hide();
</script>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
</div>
</div>
</div>
You can't have <form></form> under <form></form>, so removed that instead used div. By default assign hidden class to LocateOnMap. Then on change event of radio you can use jquery toggleClass() method to toggle visibility of LocateOnMap & EnterAddress.
$("#modal-Frm").modal("show");
$('input[name=optradio]').change(function() {
$("#EnterAddress,#LocateOnMap").toggleClass("hidden");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input value="address" type="radio" name="optradio" checked>Enter Address</label>
<label class="radio-inline"><input value="location" type="radio" name="optradio">Locate on Map</label>
</div>
</div>
<div>
<div class="hidden" id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly>
</div><br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly>
</div>
</div>
</div><br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
</div>
</div>
</div>
</div>
<div id="EnterAddress">
<label style="color:red;">Hiii</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
</div>
</div>
</div>
On show.bs.modal you can hide the form and set the radio button:
$('#modal-Frm').on('show.bs.modal', function (e) {
$('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
I'd suggest to add a data attribute to each name="optradio" like:
data-form-id="#EnterAddress"
and for the second one:
data-form-id="#LocateOnMap"
In this way, on radio change you can switch between the two forms:
$('[name="optradio"]').on('change', function(e) {
$('#modal-Frm').find('form[id]').hide();
$(this.dataset.formId).show();
})
$('#modal-Frm').on('show.bs.modal', function (e) {
$('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
$('[name="optradio"]').on('change', function (e) {
$('#modal-Frm').find('form[id]').hide();
$(this.dataset.formId).show();
})
function CancelModal() {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-Frm">
Launch modal
</button>
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input type="radio" name="optradio"
data-form-id="#EnterAddress">Enter Address</label>
<label class="radio-inline"><input type="radio" name="optradio" data-form-id="#LocateOnMap">Locate
on Map</label>
</div>
</div>
</form>
<form id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude"
placeholder="Latitude" style="border-radius: 5px;" readonly>
</div>
<br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput"
name="Longitude" placeholder="Longitude" style="border-radius: 5px;"
readonly>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
</div>
</div>
</form>
<form id="EnterAddress">
<label style="color:red;">Hiii</label>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add
</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()"
style="font-weight: bold;">Cancel
</button>
</div>
</div>
</div>
</div>
<form id="LocateOnMap" hidden>
this will make the form hidden on load
document.getElementById("LocateOnMap").style.display="block";
this is to display it
I'm creating a form confirmation window with Bootstrap Modal before user submission.
Here is the html part:
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">Email:</label>
<div class="col-sm-9">
<input type="text" name="Email" id="Email" size="50" maxlength="100" class="form-control" placeholder="Email">
</div>
</div>
<input type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
And here is the jQuery part:
$('#submitBtn').click(function() {
$('#mCompany').text($('#Company').val());
$('#mDepartment').text($('#Department').val());
$('#mUsername').text($('#Username').val());
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
$('#mEmail').text($('#Email').val());
});
You can see and try with this
link to JSFiddle.
Not all fields are required, and what I want to do is to show only the entry with data.
For example in the below image, I don't want the red bordered part to show up.
Example Screen Shot
The sample on JSFiddle has only 6 fields but my form has over 30 fields. I'm wondering if there's a way to show only the fields with data.
Remove below part from HTML
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
remove below part from jquery
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
I make some improvents:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
//console.log(id);
//console.log("#m"+id);
$("#m"+id).text($(this).val());
all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTEL"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->
You can add some classes to know what field did you want to show in the modal and what not to show.... I think could be add dynamical to the modal too...
Add inputs dynamical:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$("#modalBody").html('');
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
if($(this).hasClass('add')){
all = all + $(this).val();
var input = '<div class="row">'
+ '<div class="entryname col-xs-3">' + id + ':</div>'
+ '<div class="entrydata col-xs-9" id="m' + id +'">' + $(this).val(); + '</div>'
+ ' </div>';
//console.log(input);
$("#modalBody").append(input);
}
//console.log(id);
//console.log("#m"+id);
//$("#m"+id).text($(this).val());
// all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control add" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control add" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control add" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control add" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Confirm your entry</h4>
</div>
<div class="modal-body">
<div id="modalBody"></div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->