Showing Form Entry on Modal Window Bootstrap / jQuery

Showing Form Entry on Modal Window Bootstrap / jQuery - javascript

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 ########## -->

Related

How to get value from radio button stored on modal using javascript

<!-- 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);
}
});
});

Add data to dynamic table from modal form

I have a page that contains a form to collect some info. As part of that is a table where I'm trying to add rows of data from a modal form. Eventually, everything would be submitted to a SQL database.
Effectively, the whole form looks like:
Field 1
Field 2
Field 3
Field 5
Field 6
Field 7
Field 8
Delete
First
row
button
Second
row
Field 9
Submit
So field 1-3 would be appended to the beginning of each row upon submission to the SQL DB and 9 to the end.
The issue I'm having is getting the data entered in fields 5-8 on the modal form to appear in the table. What would be the best way to achieve this? I'm new to this so any help would be great.
I've had a look around and I see lots of way to get data out of a table to a modal form or to enter through fields in the table and add a new row that way like this (Add/Delete table rows dynamically using JavaScript) but I'd prefer to use a modal as my form for the table will end up being quite big.
HTML Form
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span> <br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
Modal
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form name="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<textarea class="form-control" name="components" id="components" required></textarea>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="classification" id="classification" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="button" class="btn btn-primary add-modal-waste" data-dismiss="modal"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>
</div>
</div>

move modal outside the form into a separate form
add submit listener to it (also add id and disable modal dismiss)
on modal form submit, validate data and create and append a table row, in which also add hidden inputs with values in a form of an array (userEntry[0][reference] etc.)
close modal, reset modal form
$(document).ready(function() {
let counter = 0;
$('#userEntry').on('submit', function(e) {
e.preventDefault();
const rows = [];
$.each($(this).serializeArray(), function(i, field) {
if (i > 0 && field.name === rows[rows.length - 1].name) {
rows[rows.length - 1].value += ';' + field.value;
} else {
rows.push(field);
}
});
let list = '<tr>';
$.each(rows, function(i, field) {
list += '<td>' + field.value + '<input type="hidden" name="userEntry[' + String(counter) + '][' + field.name + ']" value="' + field.value + '"/>' + '</td>';
});
list += '<td><button class="btn btn-warning" onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';
$('#userList tbody').append(list);
$('#AddModal').modal('hide');
counter++;
$(this)[0].reset();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal" data-target="#AddModal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span>
<br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
</div>
</form>
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="components" name="components" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="classification" name="classification" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="submit" class="btn btn-primary add-modal-waste"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>

Specific Javascript function not recognized? (ASP.NET MVC) JS/CSS/HTML

I am trying to use a form wizard within my program using a template i had found off the internet at freefrontend. However the one JS function being used is not being picked up in the program. As shown by the console on chrome, i receive the following exception:
My program code is as follows (HTML / JS)
#{
ViewBag.Title = "LoginSignUp";
Layout = "~/Views/Shared/LoginSignUp.cshtml";
#Scripts.Render("~/bundles/jquery")
}
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152092/smartwizard/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152091/smartwizard/smart_wizard_theme_arrows.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1581152197/smartwizard/jquery.smartWizard.min.js"></script>
<div class="container">
<div class="row d-flex justify-content-center mt-200"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch multistep Wizard </button> </div> <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Smart Wizard modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<div id="smartwizard">
<ul>
<li>Step 1<br /><small>Account Info</small></li>
<li>Step 2<br /><small>Personal Info</small></li>
<li>Step 3<br /><small>Payment Info</small></li>
<li>Step 4<br /><small>Confirm details</small></li>
</ul>
<div class="mt-4">
<div id="step-1">
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Name" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Email" required> </div>
</div>
<div class="row mt-3">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Password" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Repeat password" required> </div>
</div>
</div>
<div id="step-2">
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Address" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="City" required> </div>
</div>
<div class="row mt-3">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="State" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Country" required> </div>
</div>
</div>
<div id="step-3" class="">
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Card Number" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Card Holder Name" required> </div>
</div>
<div class="row mt-3">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="CVV" required> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="Mobile Number" required> </div>
</div>
</div>
<div id="step-4" class="">
<div class="row">
<div class="col-md-12"> <span>Thanks For submitting your details with BBBootstrap.com. we will send you a confirmation email. We will review your details and revert back.</span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#smartwizard').smartWizard({
selected: 0,
theme: 'arrows',
autoAdjustHeight: true,
transitionEffect: 'fade',
showStepURLhash: false,
});
});
</script>
CSS has been placed in a separate file and appears to be working correctly.
Any suggestions as to why this may be?

You just need to include the jQuery library before the other libraries.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

How to hide form in modal in javascript

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

Bootstrap modal open on clicking image

when i click menu-5_1.png the below model should pop up
<li class="men_5l" ><a id = "pop" href="#"><span><img src="images/menu_5_1.PNG" alt=""></span> <p>Mp3</p></a></li>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="myModalLabel">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<asp:Button ID="Button1" class="btn btn-primary btn-sm" runat="server"
Text="log in" />
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtPagingGoto" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<asp:TextBox ID="txtEmail" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<asp:Button ID="Button2" class="btn btn-primary btn-sm" runat="server" Text="Register"/>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<div style="height:20px;width:100%;"> Facebook</div><div style="margin-top: 35px; width: 100%;"> <a href="#" class="btn btn-danger">
Google +</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#pop").click(function () {
$('#myModal').modal('show');
});
});
</script>

Try:
$(document).ready(function () {
$("ul").on('click','#pop',function () {
$('#myModal').modal('show');
});
});

I think you have missed below reference libraries in your application.
https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js
$(document).ready(function () {
$("#pop").click(function () {
$('#myModal').modal('show');
});
});
Demo:
https://jsfiddle.net/zz9wqroc/

We Keep Coding

JavaScript is the programming language of the Web.

Showing Form Entry on Modal Window Bootstrap / jQuery - javascript

Related

How to get value from radio button stored on modal using javascript

Add data to dynamic table from modal form

Specific Javascript function not recognized? (ASP.NET MVC) JS/CSS/HTML

How to hide form in modal in javascript

Bootstrap modal open on clicking image

Categories

Resources