How to show a popup modal in codeIgniter?

How to show a popup modal in codeIgniter? - javascript

I have written a javascript click function to a class to display a popup when the relevant class be clicked. When i just put an alert it gives me the correct output. but the popup modal is doesn't show up
Model
I am using following model function
function get_reservation($type, $title, $date_cal)
{
$this->db->select('reservations.*');
$this->db->from('reservations');
$this->db->where('(reservations.type like "' . $type . '%" and reservations.title like "' . $title . '%" and reservations.date_cal like "' . $date_cal . '%" )');
$this->db->where('is_deleted', '0');
$query = $this->db->get();
return $query->result();
}
And i am calling that method in the following controller funtion
Controller
function get_reservations_records()
{
$this->load->model('mycal_model');
$type = $this->input->post('type', TRUE);
$title = $this->input->post('title', TRUE);
$date_cal = $this->input->post('date_cal', TRUE);
$data['reservation_records'] = $this->mycal_model->get_reservation($type,$title,$date_cal);
echo $this->load->view('reservation_list_view', $data);
}
Here i am passing data to another view. and i am calling that method in the javascript.
View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
#body{
margin: 0 15px 0 15px;
}
#container{
margin: 10px;
border: 1px solid #D0D0D0;
-webkit-box-shadow: 0 0 8px #D0D0D0;
}
.calendar{
/* background-color: yellow;*/
}
table.calendar{
margin: auto;
border-collapse: collapse;
}
.calendar .days td {
width:90px;
height: 100px;
padding: 4px;
border: 1px solid #999;
vertical-align: top;
background-color: #DEF;
}
.calendar .days td:hover{
background-color: #fff;
}
.calendar .highlight {
font-weight: bold;
color: #EF1BAC;
}
.calendar .content .rp_am_no{
float: left;
display: inline-block;
width: 40px;
background-color: #E13300;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".calendar .content .rp_am_no").click(function() {
var title = "RP";
var type = "AM";
var date_cal = $(this).attr("id");
$.ajax({
type: 'POST',
url: '<?php echo site_url(); ?>/my_calendar/get_reservations_records',
data: "type=" + type + "&title=" + title + "&date_cal=" + date_cal,
success: function(msg) {
//alert(msg);
$('#reservation_detail_model_body').html(msg);
$('#reservation_detail_model').modal('show');
},
error: function(msg) {
alert("Error Occured!");
}
});
});
});
</script>
<div id="container">
<div id="body">
<?php echo $calendar; ?>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="reservation_detail_model" class="modal fade" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 class="modal-title">Reservation Details</h4>
</div>
<div class="modal-body" id="reservation_detail_model_body">
<!--reservation_list_view goes here-->
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-info" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My popup doesn't show up. But when i put an alert and check it gives me the correct output. I can't figure out what is wrong with this. If anyone has an idea it would be a help.

You are including jQuery more than once, you have actually included jQuery in your head section, remove those two before your custom javascript, that's why you are getting $(...).modal is not a function error:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Remove style="display: none;" from your <div> tag

Try
$('#reservation_detail_model_body').html(msg);
$('#reservation_detail_model').css('display','block');

<?php
class ajax extends CI_Controller
{
public function get_sms_provider($id)
{
$edit_profile=$this->db->get_where("tbl_sms_provider",array("sms_provider_id"=>$id));
if(isset($edit_profile))
{
foreach($edit_profile->result() as $row)
{
?>
<form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_sms_provider/edit/do_update/<?php echo $row->sms_provider_id ;?>" enctype="multipart/form-data">
<div class="form-group">
<label>SMS Provider Name</label>
<input class="form-control" id="txt_sms_provider_name" name="txt_sms_provider_name" value="<?php echo $row->sms_provider_name ;?>">
</div>
<div class="form-group">
<label>SMS Provider Url</label>
<input class="form-control" id="txt_sms_provider_url" name="txt_sms_provider_url" value="<?php echo $row->sms_provider_url ;?>">
</div>
<div class="form-group">
<label>User Name</label>
<input class="form-control" id="txt_sms_provider_user" name="txt_sms_provider_user" value="<?php echo $row->sms_provider_user ;?>">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" id="txt_sms_provider_password" name="txt_sms_provider_password" value="<?php echo $row->sms_provider_password ;?>">
</div>
<div class="form-group">
<label>Status</label>
<?php
$radio_array=array("Active","In-Active");
for($i=0;$i<count($radio_array);$i++)
{
if($radio_array[$i]==$row->sms_provider_status)
{
?>
<input type="radio" checked id="rdo_sms_provider_status" name="rdo_sms_provider_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
<?php
}
else
{
?>
<input type="radio" id="rdo_sms_provider_status" name="rdo_sms_provider_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
<?php
}
?>
<?php
}
?>
</div>
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<?php
}
}
}
public function get_settings()
{
$edit_profile=$this->db->get_where("tbl_settings");
if(isset($edit_profile))
{
foreach($edit_profile->result() as $row)
{
?>
<form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_settings/edit/do_update" enctype="multipart/form-data">
<div class="control-group success">
<div class="col-lg-6">
<div class="form-group">
<label>Website Title </label>
<input type="text" id="txt_title" name="txt_title" class="form-control" value="<?php echo $row->settings_website_title; ?>" >
</div>
<div class="form-group">
<label>Meta Keywords </label>
<textarea id="txt_keyword" name="txt_keyword" class="form-control" ><?php echo $row->settings_meta_keywords; ?></textarea>
</div>
<div class="form-group">
<label>Meta Description </label>
<textarea id="txt_desc" name="txt_desc" class="form-control" ><?php echo $row->settings_meta_keywords; ?></textarea>
</div>
<div class="form-group">
<label>Website Name </label>
<input type="text" id="txt_name" name="txt_name" class="form-control" value="<?php echo $row->settings_website_title; ?>" >
</div>
<div class="form-group">
<label>Currency Code </label>
<input type="text" id="txt_code" name="txt_code" class="form-control" value="<?php echo $row->settings_currency_code; ?>" >
</div>
<div class="form-group">
<label >Currency Symbol </label>
<input type="text" id="txt_symbol" name="txt_symbol" class="form-control" value="<?php echo $row->settings_currency_symbol; ?>" >
</div>
<div class="form-group">
<label class="control-label" for="typeahead">Address </label>
<textarea id="txt_addr" name="txt_addr" class="form-control" ><?php echo $row->settings_address; ?></textarea>
</div>
<div class="form-group">
<label >Phone </label>
<input type="text" id="txt_phone" name="txt_phone" class="form-control" value="<?php echo $row->settings_phone; ?>" >
</div>
<div class="form-group">
<label >Fax </label>
<input type="text" id="txt_fax" name="txt_fax" class="form-control" value="<?php echo $row->settings_fax; ?>" >
</div>
<div class="form-group">
<label >Contact Email </label>
<input type="text" id="txt_email" name="txt_email" class="form-control" value="<?php echo $row->settings_contact_email; ?>" >
</div>
<div class="form-group">
<label >Map Address </label>
<input type="text" id="txt_map_addr" name="txt_map_addr" class="form-control" value="<?php echo $row->settings_map_address; ?>" >
</div>
<div class="form-group">
<label >Toll Free Number </label>
<input type="text" id="txt_toll_free" name="txt_toll_free" class="form-control" value="<?php echo $row->settings_toll_free; ?>" >
</div>
<div class="form-group">
<label >Minimum Single Piece Qty</label>
<input class="form-control" id="txt_single_min_qty" name="txt_single_min_qty" type="text" value="<?php echo $row->settings_single_min_qty; ?>">
</div>
<div class="form-group">
<label >Minimum Total Piece Qty</label>
<input class="form-control" id="txt_total_min_qty" name="txt_total_min_qty" type="text" value="<?php echo $row->settings_total_min_qty; ?>">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label >Logo </label>
<br>
<img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_logo; ?>" >
<input type="file" id="img_logo" name="img_logo" >
</div>
<div class="form-group">
<label>Small Logo </label>
<br>
<img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_small_logo; ?>" >
<input type="file" id="img_logo_small" name="img_logo_small" >
</div>
<div class="form-group">
<label>Footer Logo </label>
<br>
<img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_footer_logo; ?>" >
<input type="file" id="img_logo_footer" name="img_logo_footer" >
</div>
<div class="form-group">
<label >Favicon</label>
<br>
<img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_favicon; ?>" >
<input type="file" id="img_favicon" name="img_favicon" class="span6 typeahead" >
</div>
<div class="form-group">
<label >Facebook Url </label>
<input type="text" id="txt_fb_url" name="txt_fb_url" class="form-control" value="<?php echo $row->facebook_url; ?>" >
</div>
<div class="form-group">
<label >Google+ Url</label>
<input type="text" id="txt_google_url" name="txt_google_url" class="form-control" value="<?php echo $row->google_plus_url; ?>" >
</div>
<div class="form-group">
<label >Twitter Url</label>
<input type="text" id="txt_twitter_url" name="txt_twitter_url" class="form-control" value="<?php echo $row->twitter_url; ?>" >
</div>
<div class="form-group">
<label >Pinterest Url</label>
<input type="text" id="txt_linkedin_url" name="txt_linkedin_url" class="form-control" value="<?php echo $row->pinterest_url; ?>" >
</div>
<div class="form-group">
<label >Instagram Url</label>
<input type="text" id="txt_instagram_url" name="txt_instagram_url" class="form-control" value="<?php echo $row->instagram_url; ?>" >
</div>
<div class="form-group">
<label >Show Badges</label>
<input id="inlineCheckbox1" id="chk_show_badges" name="chk_show_badges" type="checkbox" <?php if(trim($row->settings_show_badges)=="1"){echo " checked='checked'";} ?> value="1">
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
<?php
}
}
}
public function get_cms()
{
$edit_profile=$this->db->get("tbl_cms");
if(isset($edit_profile))
{
foreach($edit_profile->result() as $row)
{
?>
<form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_cms/edit/do_update" enctype="multipart/form-data">
<div class="col-lg-6">
<div class="form-group">
<label>About Us</label>
<textarea class="form-control" id="txt_about_us" name="txt_about_us" rows="3"><?php echo $row->cms_about_us ;?></textarea>
</div>
<div class="form-group">
<label>Privacy Policy</label>
<textarea class="form-control" id="txt_privacy_policy" name="txt_privacy_policy" rows="3"><?php echo $row->cms_privacy_policy ;?></textarea>
</div>
<div class="form-group">
<label>Copy Right</label>
<textarea class="form-control" id="txt_copy_right" name="txt_copy_right" rows="3"><?php echo $row->cms_copy_right ;?></textarea>
</div>
<div class="form-group">
<label>Trade Mark</label>
<textarea class="form-control" id="txt_trademark" name="txt_trademark" rows="3"><?php echo $row->cms_trademark ;?></textarea>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Terms & Conditions</label>
<textarea class="form-control" id="txt_terms_conditions" name="txt_terms_conditions" rows="3"><?php echo $row->cms_terms_conditions ;?></textarea>
</div>
<div class="form-group">
<label>Contact Us</label>
<textarea class="form-control" id="txt_contact_us" name="txt_contact_us" rows="3"><?php echo $row->cms_contact_us ;?></textarea>
</div>
<div class="form-group">
<label>Bank Details</label>
<textarea class="form-control" id="txt_bank_details" name="txt_bank_details" rows="3"><?php echo $row->cms_bank_details ;?></textarea>
</div>
</div>
<div class="col-lg-12">
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
<?php
}
}
}
public function get_slider($id)
{
$edit_profile=$this->db->get_where("tbl_slider",array("slider_id"=>$id));
if(isset($edit_profile))
{
foreach($edit_profile->result() as $row)
{
?>
<form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_slider/edit/do_update/<?php echo $row->slider_id ;?>" enctype="multipart/form-data">
<div class="form-group">
<label>Title</label>
<input class="form-control" id="txt_slider_title" name="txt_slider_title" value="<?php echo $row->slider_title ;?>">
</div>
<div class="form-group">
<label>Slider Image</label><br><img src="<?php echo base_url(); ?>files/user/slider/<?php echo $row->slider_image; ?>" width="200px"><input type="file" id="img_slider" name="img_slider">
</div>
<div class="form-group">
<label>Href</label>
<input class="form-control" id="txt_slider_href" name="txt_slider_href" value="<?php echo $row->slider_href ;?>">
</div>
<div class="form-group">
<label>Order Number</label>
<input class="form-control" id="txt_slider_order" name="txt_slider_order" value="<?php echo $row->slider_order ;?>">
</div>
<div class="form-group">
<label>Content</label>
<input class="form-control" id="txt_slider_content" name="txt_slider_content" value="<?php echo $row->slider_content ;?>">
</div>
<div class="form-group">
<label>Position</label>
<input class="form-control" id="txt_slider_position" name="txt_slider_position" value="<?php echo $row->slider_content_position ;?>">
</div>
<div class="form-group">
<label>Status</label>
<?php
$radio_array=array("Active","In-Active");
for($i=0;$i<count($radio_array);$i++)
{
if($radio_array[$i]==$row->slider_status)
{
?>
<input type="radio" checked id="rdo_status" name="rdo_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
<?php
}
else
{
?>
<input type="radio" id="rdo_status" name="rdo_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
<?php
}
?>
<?php
}
?>
</div>
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<?php
}
}
}
public function manage_slider($order_id,$order_status)
{
$data['order_status']=$order_status;
$this->db->where('order_id',$order_id);
$this->db->update('tbl_order',$data);
echo '<div class="alert alert-success">
×
<strong>Order Status Changed Successfully to : '.$order_status.'</strong>
</div>';
}
}
?>

Related

How to auto compute values from database using JavaScript

I want to auto compute the remaining stock from inventory by typing in the input type named used. What I want to happen is after I type a number in 'Withdrawn' it should subtract to quantity then show the result to remaining stock. The values came from the database.
Here's what I did but I didn't work I don't know why can you please help me? I am still a beginner btw so correct my code if it looks wrong. Thank you
list.php:
<div class="modal fade" id="updatebtnmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update Used</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="myForm" action="<?php echo base_url().'admin/inventory/updateused/'.$inv['i_id'];?>" method="POST"
class="form-container mx-auto shadow-container" style="width:80%" enctype="multipart/form-data">
<div class="form-group">
<input type="hidden" name="update_id" id="update_id">
<label for="cname">Category</label>
<input type="text" class="form-control my-2
<?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="cname" id="cname"
placeholder="Enter Item name" value="<?php echo set_value('cname',$inv['cat_id']); ?>" readonly>
<?php echo form_error('cname'); ?>
<span></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="update_id" id="update_id">
<label for="name">Item Name</label>
<input type="text" class="form-control my-2
<?php echo (form_error('name') != "") ? 'is-invalid' : '';?>" name="name" id="name"
placeholder="Enter Item name" value="<?php echo set_value('name'); ?>" readonly>
<?php echo form_error('name'); ?>
<span></span>
</div>
<div class="form-group">
<label for="d_date">Delivered Date</label>
<input type="text" class="form-control my-2
<?php echo (form_error('d_date') != "") ? 'is-invalid' : '';?>" id="d_date" name="d_date"
placeholder="Delivered Date" value="<?php echo set_value('d_date'); ?>"readonly>
<?php echo form_error('d_date'); ?>
<span></span>
</div>
<div class="form-group">
<label for="used">Withdrawn</label>
<input type="number" class="form-control my-2
<?php echo (form_error('used') != "") ? 'is-invalid' : '';?>" id="used" name="used" class="used" onchange="calc()"
placeholder="Enter No. Withdrawn Items" value="<?php echo set_value('used'); ?>">
<?php echo form_error('used'); ?>
<span></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" class="form-control my-2
<?php echo (form_error('quantity') != "") ? 'is-invalid' : '';?>" id="quantity" name="quantity" class="quantity"
placeholder="Enter Quantity" value="<?php echo set_value('quantity'); ?>">
<?php echo form_error('quantity'); ?>
<span></span>
</div>
<div class="form-group">
<label for="exp_date">Expiration Date</label>
<input type="text" class="form-control my-2
<?php echo (form_error('e_date') != "") ? 'is-invalid' : '';?>" id="e_date" name="e_date"
placeholder="Expiration Date" value="<?php echo set_value('e_date'); ?>"readonly>
<?php echo form_error('e_date'); ?>
<span></span>
</div>
<div class="form-group">
<label for="rem_qty">Remaining Stock</label>
<input type="number" class="form-control my-2
<?php echo (form_error('rem_qty') != "") ? 'is-invalid' : '';?>" id="rem_qty" name="rem_qty" class="rem_qty"
placeholder="Enter No. Remaining Stock" >
<?php echo form_error('rem_qty'); ?>
<span></span>
</div>
</div>
</div>
<button type="submit" name="updatedata" class="btn btn-primary ml-2">Make Changes</button>
Back
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Js:
function calc() {
var quantity = document.getElementById("quantity").innerHTML;
var used = document.getElementById("used").value;
var rem_qty = parseFloat(quantity) - used
if (!isNaN(rem_qty))
document.getElementById("rem_qty").innerHTML = rem_qty
}

Try this javascript code
function calc() {
var quantity = document.getElementById("quantity").value;
var used = document.getElementById("used").value;
var rem_qty = 0;
if(quantity >= used){
rem_qty = parseFloat(quantity) - used;
}
if(rem_qty != 0){
document.getElementById("rem_qty").value = rem_qty
}
}
I hope this code will help you out.

JQuery repeating fields messes with Bootstrap layout on removing rows

I have a form with a series of fields I want to make repeating. I have operational code however when I click on any remove button other than the first my code re-arranges the fields in the row like so:
My code is shown below, I think I'm going wrong with the :first selectors????
<div class="row">
<div class="col-12">
<div id="repeatingTides" class="row">
<div class="col-md-2 col-lg-4 tidePort">
<div class="form-group ">
<label for="tidePort">Tide Port</label>
<input type="text" id="tidePort" name="tidePort[]" class="form-control <?php echo (!empty($data['formData']['tidePort_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['tidePort']; ?>"/>
<span class="invalid-feedback"><?php echo $data['formData']['tidePort_error']; ?></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideHW">
<label for="hwTime">HW Time & Height</label>
<div class="input-group ">
<input type="time" id="hwTime" name="hwTime[]" class="form-control <?php echo (!empty($data['formData']['hwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwTime']; ?>"/>
<input type="number" step="0.01" id="hwHeight" name="hwHeight[]" class="form-control <?php echo (!empty($data['formData']['hwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwHeight']; ?>"/>
<span class="invalid-feedback"><?php echo $data['formData']['hwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['hwHeight_error']; ?></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideLW">
<label for="lwTime">LW Time & Height</label>
<div class="input-group ">
<input type="time" id="lwTime" name="lwTime" class="form-control <?php echo (!empty($data['formData']['lwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwTime']; ?>"/>
<input type="number" step="0.01" id="lwHeight" name="lwHeight[]" class="form-control <?php echo (!empty($data['formData']['lwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwHeight']; ?>"/>
<div class="input-group-append">
<button class="btn btn-ym-success btn-add-tide" type="button"><i class="fas fa-plus text-white"></i></button>
</div>
<span class="invalid-feedback"><?php echo $data['formData']['lwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['lwHeight_error']; ?></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var controlFormTides = $('#repeatingTides:first');
controlFormTides.find('.tideLW:not(:last) .btn-add-tide')
.removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide')
.removeClass('btn-ym-success').addClass('btn-ym-danger')
.html('<i class="fas fa-minus text-white"></i>');
});
$(document).on('click', '.btn-add-tide', function(e)
{
e.preventDefault();
var controlFormTides = $('#repeatingTides:first'),
currentTideLW = $(this).parents('.tideLW:first'),
currentTidePort = $('.tidePort:first'),
currentTideHW = $('.tideHW:first'),
newTidePortEntry = $(currentTidePort.clone()).appendTo(controlFormTides);
newTideHWEntry = $(currentTideHW.clone()).appendTo(controlFormTides);
newTideLWEntry = $(currentTideLW.clone()).appendTo(controlFormTides);
controlFormTides.find('.tideLW:not(:last) .btn-add-tide')
.removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide')
.removeClass('btn-ym-success').addClass('btn-ym-danger')
.html('<i class="fas fa-minus text-white"></i>');
}).on('click', '.btn-remove-tide', function(e)
{
e.preventDefault();
$('.tideHW:first').remove();
$('.tidePort:first').remove();
$(this).parents('.tideLW:first').remove();
return false;
});
</script>
</div>
</div>

In your current you were adding all divs separately instead you can put all 3 divs i.e : tidePort ,tideHW..etc in some outer div and simply use .clone() to clone that entire div and make change to same cloned div . Then, append this cloned div using $("#repeatingTides").append(controlFormTides) .
Now, to remove the divs you can simply use $(this).parents('.outer').remove(); this will remove entire div which was added.
Demo Code :
$(document).on('click', '.btn-add-tide', function(e) {
e.preventDefault();
//get first div insde repeatingtildes
var controlFormTides = $('#repeatingTides .outer:first').clone(true);
$(controlFormTides).find('button.btn')
.removeClass('btn-add-tide btn-ym-success').addClass('btn-remove-tide btn-ym-danger')
.html('<i class="fa fa-minus"></i>');//add remove class
$("#repeatingTides").append(controlFormTides)
}).on('click', '.btn-remove-tide', function(e) {
e.preventDefault();
$(this).parents('.outer').remove();//remove closest class .outer
return false;
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-12">
<div id="repeatingTides">
<!--added this div-->
<div class="outer row">
<div class="col-md-2 col-lg-4 tidePort">
<div class="form-group ">
<label for="tidePort">Tide Port</label>
<input type="text" id="tidePort" name="tidePort[]" class="form-control <?php echo (!empty($data['formData']['tidePort_error'])) ? 'is-invalid' : ''; ?>" value="1" />
<span class="invalid-feedback"></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideHW">
<label for="hwTime">HW Time & Height</label>
<div class="input-group ">
<input type="time" id="hwTime" name="hwTime[]" class="form-control <?php echo (!empty($data['formData']['hwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwTime']; ?>" />
<input type="number" step="0.01" id="hwHeight" name="hwHeight[]" class="form-control <?php echo (!empty($data['formData']['hwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['hwHeight']; ?>" />
<span class="invalid-feedback"><?php echo $data['formData']['hwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['hwHeight_error']; ?></span>
</div>
</div>
<div class="col-md-5 col-lg-4 tideLW">
<label for="lwTime">LW Time & Height</label>
<div class="input-group ">
<input type="time" id="lwTime" name="lwTime" class="form-control <?php echo (!empty($data['formData']['lwTime_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwTime']; ?>" />
<input type="number" step="0.01" id="lwHeight" name="lwHeight[]" class="form-control <?php echo (!empty($data['formData']['lwHeight_error'])) ? 'is-invalid' : ''; ?>" value="<?php echo $data['formData']['lwHeight']; ?>" />
<div class="input-group-append">
<button class="btn btn-ym-success btn-add-tide" type="button"><i class="fa fa-plus "></i></button>
</div>
<span class="invalid-feedback"><?php echo $data['formData']['lwTime_error']; ?></span>
<span class="invalid-feedback"><?php echo $data['formData']['lwHeight_error']; ?></span>
</div>
</div>
</div>
</div>

Dropdown list set put selected value from database

I am trying to create a drop down menu that will select a value that is stored in the database. Right now the code creates a dropdown with the first option selected. I have read through several tutorials, and tried to apply them, but I cannot get this working. I hope someone can help.
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</div>
Whole code :
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
session_start();
include("../includes/connect.php");
if (isset($_SESSION['logged_in'])) {
if(isset($_POST['btnSlaOp'])) {
$id=$_POST['id'];
$uitgeleend=$_POST['uitgeleend'];
$nr=$_POST['nr'];
$model=$_POST['model'];
$serienummer=$_POST['serienummer'];
$capaciteit=$_POST['capaciteit'];
$uptodate=$_POST['uptodate'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql="UPDATE ipads SET uitgeleend='$uitgeleend', nr='$nr', model='$model', serienummer='$serienummer', capaciteit='$capaciteit', uptodate='$uptodate', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$result=$db->query($sql);
header("location:overzicht-ipads.php");
} else if (isset($_POST['btnSlaOpInGs'])) {
$id=$_POST['id'];
$uitgeleend=$_POST['uitgeleend'];
$nr=$_POST['nr'];
$model=$_POST['model'];
$serienummer=$_POST['serienummer'];
$capaciteit=$_POST['capaciteit'];
$uptodate=$_POST['uptodate'];
$persoon=$_POST['persoon'];
$datumuitgeleend=$_POST['datumuitgeleend'];
$datumretour=$_POST['datumretour'];
$opmerking=$_POST['opmerking'];
$sql ="UPDATE ipads SET nr='$nr', model='$model', serienummer='$serienummer', capaciteit='$capaciteit', uptodate='$uptodate', persoon='$persoon', datumuitgeleend='$datumuitgeleend', datumretour='$datumretour', opmerking='$opmerking' WHERE id='$id'";
$sql .="INSERT INTO geschiedenis (SELECT * FROM ipads WHERE id='$id')";
$sql .="UPDATE ipads SET uitgeleend='Nee', persoon='', datumuitgeleend='', datumretour='', opmerking='' WHERE id='$id'";
$result=mysqli_multi_query($db, $sql);
header("location:overzicht-ipads.php");
}
if(isset($_GET['id'])) {
$id=$_GET['id'];
$sql="SELECT id, uitgeleend, nr, model, serienummer, capaciteit, uptodate, persoon, datumuitgeleend, datumretour, opmerking FROM ipads WHERE id='$id'";
$result=$db->query($sql);
$rij=$result->fetch_assoc();
$uitgeleend=$rij['uitgeleend'];
$nr=$rij['nr'];
$model=$rij['model'];
$serienummer=$rij['serienummer'];
$capaciteit=$rij['capaciteit'];
$uptodate=$rij['uptodate'];
$persoon=$rij['persoon'];
$datumuitgeleend=$rij['datumuitgeleend'];
$datumretour=$rij['datumretour'];
$opmerking=$rij['opmerking'];
include("../includes/get_header_wn.php");
?>
<h1 class="page-title">Wijzigen</h1>
<ul class="breadcrumb">
<li>Home </li>
<li class="active">Leen iPad <?php echo $nr ?></li>
</ul>
</div>
<form id="gegevensForm" class="col-xs-4" form method="POST" action="overzicht-ipads-edit.php">
<input type="hidden" name="id" value="<?php echo $id?>">
<div class="form-group">
<label>Uitgeleend</label>
<input type="text" class="form-control" name="uitgeleend" value="<?php echo $uitgeleend ?>" />
</div>
<div class="form-group">
<label>Nr</label>
<input type="text" class="form-control" name="nr" value="<?php echo $nr ?>" />
</div>
<div class="form-group">
<label>Model</label>
<input type="text" class="form-control" name="model" value="<?php echo $model ?>" />
</div>
<div class="form-group">
<label>Serienummer</label>
<input type="text" class="form-control" name="serienummer" value="<?php echo $serienummer ?>" />
</div>
<div class="form-group">
<label>Capaciteit</label>
<input type="text" class="form-control" name="capaciteit" value="<?php echo $capaciteit ?>" />
</div>
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
</div>
<div class="form-group">
<label>Persoon</label>
<input type="text" class="form-control" name="persoon" value="<?php echo $persoon ?>" />
</div>
<div class="form-group">
<label>Datum uitgeleend</label>
<input type="text" id="datepicker" class="form-control" name="datumuitgeleend" value="<?php echo $datumuitgeleend ?>" />
</div>
<div class="form-group">
<label>Datum retour</label>
<input type="text" id="datepicker1" class="form-control" name="datumretour" value="<?php echo $datumretour ?>" />
</div>
<div class="form-group">
<label for="comment">Opmerking</label>
<textarea class="form-control" rows="5" id="comment" name="opmerking" /><?php echo $opmerking ?></textarea>
</div>
<button class="btn btn-primary pull-right" name="btnSlaOp" input type="submit"><i class="fa fa-save"></i> Opslaan</button>
<input type="button" name="btnCancel" value="Annuleer" class="btn btn-primary pull-left">
<button class="btn btn-primary pull-middle" name="btnSlaOpInGs" type="submit"><i class="fa fa-save"></i> Opslaan & Archiveren</button>
<?php
include('../includes/get_footer.php');
?>
</form>
<?php
}
} else {
header("location:overzicht-ipads.php");
}
?>

php: if($selectedVal == "yourVal") echo "selected";
e.g.:
<div class="form-group">
<label>Up-to-Date</label>
<select class="form-control" name="uptodate"/>
<option value="Ja" <?php if($selectedVal == "Ja") echo "selected";?>>Ja</option>
<option value="Nee" <?php if($selectedVal == "Nee") echo "selected";?>>Nee</option>
</select>
</div>
edit: in your case, replace $selectedVal with $uptodate

Form serialize with ajax post

I was trying to post the form data with onclick event in an ajax function.but the data are not being posted in the next page. I was using the serialize method of from data submission but its not working. Meanwhile when I use jQuery .val function it captures the right data in th right field
Here is my html:
<form id="customer_from" class="form-group">
<div class="row">
<div class="col-lg-2">
<div id="customer_information" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Customer Information
</div>
<div id="registry_details" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Registry Details
</div>
<div id="send_email" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
E-mail
</div>
<div id="add_comment" style="background-color:grey;padding:5px;text-align:center;border:1px solid white;cursor: pointer; cursor: hand;height:50px;font-size:15px;" data-registry-id="<?php echo $_POST['order_number']; ?>" data-order-ref="<?php echo $_POST['order_ref']; ?>" data-registry-type="<?php echo $_POST['registry_type']; ?>" data-customer-id="<?php echo $data['customer_id'];?>">
Add Comment
</div>
</div>
<div class="col-lg-10" id="dynamic" >
<div class="col-lg-5">
<label for='customer_id'> Customer ID: <span class='required-field'>*</label>
<input name='customer_id' type='text' value="<?php echo $data['customer_id'] ?>" class='form-control' required /> </span>
<label for='customer_name'> Customer Name: <span class='required-field'>*</label>
<input name='customer_name' type='text' value="<?php echo $data['firstname'] ?>" class='form-control' required /> </span>
<label for='customer_email'> E-mail: <span class='required-field'>*</label>
<input name='customer_email' type='text' value="<?php echo $data['email'] ?>" class='form-control' required /> </span>
<label for='customer_telephone1'> Telephone#1: <span class='required-field'>*</label>
<input name='customer_telephone1' type='text' value="<?php echo $data['phone'] ?>" class='form-control' required /> </span>
<label for='customer_telephone2'> Telephone#2:<span class='required-field'>*</label>
<input name='customer_telephone2' type='text' value="<?php echo $data['alt_phone'] ?>" class='form-control' required /> </span>
<label class="checkbox-inline"><input type="checkbox" value="yes">Pattern</label>
</div>
<div class="col-lg-5">
<label for='customer_address'> Address: <span class='required-field'>*</label>
<input name='customer_address' type='text' value="<?php echo $data['address'] ?>" class='form-control' required /> </span>
<label for='customer_city'> City: <span class='required-field'>*</label>
<input name='customer_city' type='text' value="<?php echo $data['city'] ?>" class='form-control' required /> </span>
<label for='customer_province'> Province: <span class='required-field'>*</label>
<input name='customer_province' type='text' value="<?php echo $data['province'] ?>" class='form-control' required /> </span>
<label for='customer_postal'> Postal code: <span class='required-field'>*</label>
<input name='customer_postal' type='text' value="<?php echo $data['postal_code'] ?>" class='form-control' required /> </span>
<label for='customer_country'> Country: <span class='required-field'>*</label>
<select id = "customer_country" name="customer_country" class="form-control" title="Select a Category" required>
<?php echo $customer_country; ?>
</select>
<label class="checkbox-inline"><input type="checkbox" value="yes">Newsletter</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-11 col-md-12">
<input type="button" class="btn btn-success" id="update-registry" value="Update Registry" style="float:right;">
<input type="button" class="btn btn-danger" id="delete-registry" data-registry="<?php echo $_POST['order_ref'];?>" data-type="<?php echo $_POST['registry_type']; ?>" value="Delete" style="float:left;">
</div>
</div>
</div>
</form>
and here is the ajax call:
$("#update-registry").on("click",function(){
$.ajax({
type: "POST",
url: "ajax/update_customer.php",
data:$("from#customer_form").serializeArray(),
beforeSend: function() {
},
success: function(msg) {
$("#registry").find(".update_registry").html(msg);
},
error: function() {
alert("failure");
}
});
})

See the form ID:
<form id="customer_from"
There is a typo:
data:$("from#customer_form").serializeArray(),
//------^^^^----------^^^^should be from
//------^^^^should be form
change from to form. Even better as IDs are unique so there is no need to prefix the tag name:
data:$("#customer_from").serializeArray(),

formData (id +string) not working

my javascript:
function updatedata(str){
var id = str;
var formData= new FormData($('#registrationform'+str)[0]);//serialize all form data including the file data
$.ajax({
url: "update_registration.php?id="+id,//php page to process all form data
type: 'POST',
data: formData,
async: false,
success: function (data) {
$('#info2').html(data);//div where data are displayed
viewdata();
},
cache: false,
contentType: false,
processData: false
});
return false;
}
my html page:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Reg No.</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Picture</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Course</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info">Class Code</th>
<th colspan="2" style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Course Schedule </span></th>
<th colspan="3" style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Full Name</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Municipality/City</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Company Sponsor</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Date Of Registration</span></th>
<th style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Approved By</span></th>
<th colspan="2" style="text-align:center; border-bottom:hidden" valign="top" class="info"><span class="info" style="text-align:center">Action</span></th>
</tr>
</thead>
<tbody>
<?php
include "connect_database.php";
$fetchquery9 = "SELECT * FROM `registration`";
$fetch9 = mysqli_query($conn, $fetchquery9);
while($row = mysqli_fetch_assoc($fetch9))
{
?>
<tr style="text-align:center">
<td><?php echo $row['reg_number']; ?></td>
<?php echo "<td>".'<img src="data:image/jpeg;base64,'.base64_encode( $row['picture'] ).'" />'." </td>";?>
<td><?php echo $row['course']; ?></td>
<td><?php echo $row['class_code']; ?></td>
<td><?php echo $row['start_date_reg']; ?></td><td><?php echo $row['end_date_reg']; ?></td>
<td style="border-right:hidden"><?php echo $row['surname']; ?></td>
<td style="border-right:hidden"><?php echo $row['first_name']; ?></td>
<td><?php echo $row['middle_name']; ?></td>
<td><?php echo $row['municipality_city']; ?></td>
<td><?php echo $row['company_sponsor']; ?></td>
<td><?php echo $row['date_of_reg']; ?></td>
<td><?php echo $row['approved_by']; ?></td>
<td style="border-right:hidden"><a class="btn btn-warning btn-sm" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#myModal<?php echo $row['reg_number']; ?>"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></td>
<td><a class="btn btn-danger btn-sm data-toggle=confirmation data-popout=true" onclick="deletedata('<?php echo $row['reg_number']; ?>')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $row['reg_number']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $row['reg_number']; ?>" aria-hidden="true">
<div class="modal-dialog" style="width:80%" >
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel<?php echo $row['reg_number']; ?>">Edit Data</h4>
</div>
<br/>
<div id="info3" align="center"></div>
<br/>
<div class="modal-body">
<form id="registrationform<?php echo $row['reg_number']; ?>" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
<div class="form-group">
<img id="image<?php echo $row['reg_number']; ?>" src="data:image/jpeg;base64,<?php echo base64_encode($row['picture']); ?>" alt="Click to Upload an Image" style="max-height:192px; max-width:192px; min-height:192px; max-width:192px; width:192px; height:192px; text-align:center; line-height:192px; vertical-align:central" onClick="uploadedit('<?php echo $row['reg_number']; ?>')"/>
<input type="file" name="file" id="file<?php echo $row['reg_number']; ?>" style="display:none" onchange="previewedit('<?php echo $row['reg_number']; ?>');" accept="image/jpeg,image/x-png" class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<div class="form-group">
<label for="registrationno">Registration No.</label>
<input type="number" min="0" id="registrationno<?php echo $row['reg_number']; ?>" value="<?php echo $row['reg_number']; ?>" name="registrationno" class="form-control">
</div>
</div>
</div>
</div>
<input type="hidden" id="hidden3<?php echo $row['reg_number']; ?>" value="<?php echo $row['reg_number']; ?>" name="hidden3" class="form-control">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="course">Course</label>
<select type="text" id="course<?php echo $row['reg_number']; ?>" value="<?php echo $row['course']; ?>" onchange="getfeex('<?php echo $row['reg_number']; ?>');" name="course" class="form-control">
<option value="<?php echo $row['course']; ?>"><?php echo $row['course']; ?></option>
<?php
include "connect_database.php";
$fetchquery = "SELECT `course_description` FROM `list_of_courses` ORDER BY `course_description`";
$fetch = mysqli_query($conn, $fetchquery);
while ($rows = mysqli_fetch_assoc($fetch))
{
echo "<option value=\"".$rows['course_description']."\">".$rows['course_description']."</option>";
}
?>
</select>
</div>
</div>
<input type="hidden" id="hidden2<?php echo $row['reg_number']; ?>" value="<?php echo $row['course']; ?>" name="hidden2" class="form-control">
<div class="col-md-4">
<div class="col-md-9">
<div class="form-group">
<label for="classcode">Class Code</label>
<input type="text" id="classcode<?php echo $row['reg_number']; ?>" value="<?php echo $row['class_code']; ?>" name="classcode" class="form-control">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<span class="glyphicon glyphicon-list-alt"></span> view class list
</div>
</div>
</div>
<input type="hidden" id="hidden<?php echo $row['reg_number']; ?>" value="<?php echo $row['class_code']; ?>" name="hidden" class="form-control">
<div class="col-md-4">
<div class="form-group">
<label for="dateofregistration">Date of Registration</label>
<input type="date" id="dateofregistration<?php echo $row['reg_number']; ?>" value="<?php echo $row['date_of_reg']; ?>" name="dateofregistration" class="form-control" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="companysponsor">Company Sponsor</label>
<input type="text" id="companysponsor<?php echo $row['reg_number']; ?>" value="<?php echo $row['company_sponsor']; ?>" name="companysponsor" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="telno">Tel No.</label>
<input type="number" min="0" id="telno<?php echo $row['reg_number']; ?>" value="<?php echo $row['tel_no']; ?>" name="telno" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" id="surname<?php echo $row['reg_number']; ?>" value="<?php echo $row['surname']; ?>" name="surname" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname<?php echo $row['reg_number']; ?>" value="<?php echo $row['first_name']; ?>" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="middlename">Middle Name</label>
<input type="text" id="middlename<?php echo $row['reg_number']; ?>" value="<?php echo $row['middle_name']; ?>" name="middlename" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email<?php echo $row['reg_number']; ?>" value="<?php echo $row['email']; ?>" name="email" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="cellphone">Cellphone No.</label>
<input type="number" min="0" id="cellphone<?php echo $row['reg_number']; ?>" value="<?php echo $row['cellphone']; ?>" name="cellphone" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="landline">Landline</label>
<input type="number" min="0" id="landline<?php echo $row['reg_number']; ?>" value="<?php echo $row['land_line']; ?>" name="landline" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="street">Street No. and Street Name</label>
<input type="number" min="0" id="street<?php echo $row['reg_number']; ?>" value="<?php echo $row['st_no_and_st_name']; ?>" name="street" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="barangay">Barangay</label>
<input type="text" id="barangay<?php echo $row['reg_number']; ?>" value="<?php echo $row['brgy']; ?>" name="barangay" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="municipalitycity">Municipality/City</label>
<input type="text" id="municipalitycity<?php echo $row['reg_number']; ?>" value="<?php echo $row['municipality_city']; ?>" name="municipalitycity" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="district">District</label>
<input type="text" id="district<?php echo $row['reg_number']; ?>" value="<?php echo $row['district']; ?>" name="district" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="province">Province</label>
<input type="text" id="province<?php echo $row['reg_number']; ?>" value="<?php echo $row['province']; ?>" name="province" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="nationality">Nationality</label>
<input type="text" id="nationality<?php echo $row['reg_number']; ?>" value="<?php echo $row['nationality']; ?>" name="nationality" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="birthplace">Birthplace</label>
<input type="text" id="birthplace<?php echo $row['reg_number']; ?>" value="<?php echo $row['birthplace']; ?>" name="birthplace" class="form-control">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="dateofbirth">Date of Birth</label>
<input type="date" id="dateofbirth<?php echo $row['reg_number']; ?>" value="<?php echo $row['date_of_birth']; ?>" name="dateofbirth" class="form-control">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="sex">Gender</label>
<select name="sex" id="sex<?php echo $row['reg_number']; ?>" value="<?php echo $row['sex']; ?>" class="form-control">
<option value="<?php echo $row['reg_number']; ?>"><?php echo $row['sex']; ?></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="age">Age</label>
<input type="number" min="0" id="age<?php echo $row['reg_number']; ?>" value="<?php echo $row['age']; ?>" name="age" class="form-control">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="civilstatus">Civil Status</label>
<select type="text" id="civilstatus<?php echo $row['reg_number']; ?>" value="<?php echo $row['civil_status']; ?>" name="civilstatus" class="form-control">
<option value="<?php echo $row['reg_number']; ?>"><?php echo $row['civil_status']; ?></option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="persontocontact">Person to contact incase of emergency</label>
<input type="text" id="persontocontact<?php echo $row['reg_number']; ?>" value="<?php echo $row['person_to_contact']; ?>" name="persontocontact" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="contactno">Contact No.</label>
<input type="number" min="0" id="contactno<?php echo $row['reg_number']; ?>" value="<?php echo $row['contactno']; ?>" name="contactno" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="educationalattainment">Educational Attainment</label>
<input type="text" id="educationalattainment<?php echo $row['reg_number']; ?>" value="<?php echo $row['highest_educational_attainment']; ?>" name="educationalattainment" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="school">School/Training Center</label>
<input type="text" id="school<?php echo $row['reg_number']; ?>" value="<?php echo $row['school']; ?>" name="school" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="coursedegree">Course/Degree</label>
<input type="text" id="coursedegree<?php echo $row['reg_number']; ?>" value="<?php echo $row['course_degree']; ?>" name="coursedegree" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="col-md-12" style="font-size:x-large; color:#009 ;font-weight:bold!important">COURSES TAKEN (Kitchen/Galley Related Trainings)</p>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label>Tittle of Course</label>
<input type="text" class="form-control" id="titleofcourse1<?php echo $row['reg_number']; ?>" value="<?php echo $row['title_of_course1']; ?>" name="titleofcourse1"/><br>
<input type="text" class="form-control" id="titleofcourse2<?php echo $row['reg_number']; ?>" value="<?php echo $row['title_of_course2']; ?>" name="titleofcourse2"/><br>
<input type="text" class="form-control" id="titleofcourse3<?php echo $row['reg_number']; ?>" value="<?php echo $row['title_of_course3']; ?>" name="titleofcourse3"/><br>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Month and Year Taken</label>
<input type="month" class="form-control" id="yeartaken1<?php echo $row['reg_number']; ?>" value="<?php echo $row['year_taken1']; ?>" name="yeartaken1"/><br>
<input type="month" class="form-control" id="yeartaken2<?php echo $row['reg_number']; ?>" value="<?php echo $row['year_taken2']; ?>" name="yeartaken2"/><br>
<input type="month" class="form-control" id="yeartaken3<?php echo $row['reg_number']; ?>" value="<?php echo $row['year_taken3']; ?>" name="yeartaken3"/><br>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>School Training Center</label>
<input type="text" class="form-control" id="trainingcenter1<?php echo $row['reg_number']; ?>" value="<?php echo $row['school_training_center1']; ?>" name="trainingcenter1"/><br>
<input type="text" class="form-control" id="trainingcenter2<?php echo $row['reg_number']; ?>" value="<?php echo $row['school_training_center2']; ?>" name="trainingcenter2"/><br>
<input type="text" class="form-control" id="trainingcenter3<?php echo $row['reg_number']; ?>" value="<?php echo $row['school_training_center3']; ?>" name="trainingcenter3"/><br>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Certificates Achieved</label>
<input type="text" class="form-control" id="certifications1<?php echo $row['reg_number']; ?>" value="<?php echo $row['certifications_achieved1']; ?>" name="certifications1"/><br>
<input type="text" class="form-control" id="certifications2<?php echo $row['reg_number']; ?>" value="<?php echo $row['certifications_achieved2']; ?>" name="certifications2"/><br>
<input type="text" class="form-control" id="certifications3<?php echo $row['reg_number']; ?>" value="<?php echo $row['certifications_achieved3']; ?>" name="certifications3"/><br>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" align="center">
<p class="col-md-12" style="font-size:x-large; color:#009 ;font-weight:bold!important">ACCOUNTING</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-6">
<p>Approved by</p><input type="text" class="form-control" id="name<?php echo $row['reg_number']; ?>" value="<?php echo $row['approved_by']; ?>" name="name" readonly/>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="form-group">
<input type="radio" name="choice" value="Cash" id="cash" onChange="radiobutton1x('<?php echo $row['reg_number']; ?>');">
<label for="cashamount">Cash</label>
<input type="number" min="0" class="form-control" name="cashamount" id="cashamount<?php echo $row['reg_number']; ?>" value="<?php echo $row['amount_cash']; ?>" onchange="x('<?php echo $row['reg_number']; ?>');" readonly/>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="form-group">
<input type="radio" name="choice" value="Check" id="check" onChange="radiobutton2x('<?php echo $row['reg_number']; ?>');">
<label for="check_no">Check No.</label>
<input type="number" min="0" class="form-control" name="check_no" id="check_no<?php echo $row['reg_number']; ?>" value="<?php echo $row['check_no']; ?>" readonly/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="bank">Bank</label>
<input type="text" class="form-control" id="bank<?php echo $row['reg_number']; ?>" value="<?php echo $row['bank']; ?>" name="bank" readonly/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="check_amount">Amount</label>
<input type="number" min="0" class="form-control" id="checkamount<?php echo $row['reg_number']; ?>" value="<?php echo $row['amount_check']; ?>" name="checkamount" onchange="y('<?php echo $row['reg_number']; ?>');" readonly/>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="form-group">
<input type="radio" name="choice" value="Card" id="cards" onChange="radiobutton3x('<?php echo $row['reg_number']; ?>');">
<label for="card">Card</label>
<input type="text" class="form-control" name="card" id="card<?php echo $row['reg_number']; ?>" value="<?php echo $row['card']; ?>" readonly/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Type</label>
<input type="type" class="form-control" id="cardtype<?php echo $row['reg_number']; ?>" value="<?php echo $row['card_type']; ?>" name="cardtype" readonly/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Appr Code</label>
<input type="text" class="form-control" id="appr_code<?php echo $row['reg_number']; ?>" value="<?php echo $row['appr_code']; ?>" name="appr_code" readonly/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="card_amount">Amount</label>
<input type="number" min"0" class="form-control" id="card_amount<?php echo $row['reg_number']; ?>" value="<?php echo $row['amount_card']; ?>" name="card_amount" onchange="z('<?php echo $row['reg_number']; ?>');" readonly/>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<div class="col-md-12">
<div class="form-group">
<label for="charge">Charge</label>
<select type="text" class="form-control" id="charge<?php echo $row['reg_number']; ?>" value="<?php echo $row['charge']; ?>" name="charge">
<option value="<?php echo $row['reg_number']; ?>"><?php echo $row['charge']; ?></option>
<option value="Personal">Personal</option>
<option value="Company">Company</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="modeofpayment">Payment</label>
<select type="text" class="form-control" id="modeofpayment<?php echo $row['reg_number']; ?>" value="<?php echo $row['mode_of_payment']; ?>" name="modeofpayment">
<option value="<?php echo $row['reg_number']; ?>"><?php echo $row['mode_of_payment']; ?></option>
<option value="Full">Full</option>
<option value="Partial">Partial</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label>Tuition</label>
<input type="text" class="form-control" id="tuition<?php echo $row['reg_number']; ?>" value="<?php echo $row['tuition']; ?>" name="tuition"/>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="balance">Balance</label>
<input type="text" class="form-control" id="balance<?php echo $row['reg_number']; ?>" value="<?php echo $row['balance']; ?>" name="balance" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="viewdata();">Close</button>
<button type="button" onclick="updatedata('<?php echo $row['reg_number']; ?>')" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
php
<?php print_r($_POST);; print_r($_FILES) ?> //print all post
I want to see all form data display in array as result of new formData but it only display Array ( ) nothing more.
I'm guessing that it can't find the the form element because of the +str on the form id
What should i change to see all form in array?

HTML:
<form action="." method="post" id="form">
<input type="text" name="name" value="Ajay">
<input type="text" name="location" value="Chennai">
<button id="button">Button</button>
</form>
<div class="frmData">POST Values printed here..</div>
jQuery:
This function should be inside the document ready function.
$('#button').click(function(){
var frmData = $('#form').serialize();
$('.frmData').html(frmData);
});

found an alternative solution on this
function updatedata(str){
var id = str;
var registrationno = $('#registrationno'+str).val();
var course = $('#course'+str).val();
var classcode = $('#classcode'+str).val();
var dateofregistration = $('#dateofregistration'+str).val();
var companysponsor = $('#companysponsor'+str).val();
var telno = $('#telno'+str).val();
var surname = $('#surname'+str).val();
var firstname = $('#firstname'+str).val();
var middlename = $('#middlename'+str).val();
var email = $('#email'+str).val();
var cellphone = $('#cellphone'+str).val();
var landline = $('#landline'+str).val();
var street = $('#street'+str).val();
var barangay = $('#barangay'+str).val();
var municipalitycity = $('#municipalitycity'+str).val();
var district = $('#district'+str).val();
var province = $('#province'+str).val();
var nationality = $('#nationality'+str).val();
var birthplace = $('#birthplace'+str).val();
var dateofbirth = $('#dateofbirth'+str).val();
var sex = $('#sex'+str).val();
var age = $('#age'+str).val();
var civilstatus = $('#civilstatus'+str).val();
var persontocontact = $('#persontocontact'+str).val();
var contactno = $('#contactno'+str).val();
var educationalattainment = $('#educationalattainment'+str).val();
var school = $('#school'+str).val();
var coursedegree = $('#coursedegree'+str).val();
var nameofcompany1 = $('#nameofcompany1'+str).val();
var nameofcompany2 = $('#nameofcompany2'+str).val();
var nameofcompany3 = $('#nameofcompany3'+str).val();
var typeofcompany1 = $('#typeofcompany1'+str).val();
var typeofcompany2 = $('#typeofcompany2'+str).val();
var typeofcompany3 = $('#typeofcompany3'+str).val();
var datefrom1 = $('#datefrom1'+str).val();
var datefrom2 = $('#datefrom2'+str).val();
var datefrom3 = $('#datefrom3'+str).val();
var dateto1 = $('#dateto1'+str).val();
var dateto2 = $('#dateto2'+str).val();
var dateto3 = $('#dateto3'+str).val();
var position1 = $('#position1'+str).val();
var position2 = $('#position2'+str).val();
var position3 = $('#position3'+str).val();
var titleofcourse1 = $('#titleofcourse1'+str).val();
var titleofcourse2 = $('#titleofcourse2'+str).val();
var titleofcourse3 = $('#titleofcourse3'+str).val();
var yeartaken1 = $('#yeartaken1'+str).val();
var yeartaken2 = $('#yeartaken2'+str).val();
var yeartaken3 = $('#yeartaken3'+str).val();
var trainingcenter1 = $('#trainingcenter1'+str).val();
var trainingcenter2 = $('#trainingcenter2'+str).val();
var trainingcenter3 = $('#trainingcenter3'+str).val();
var certifications1 = $('#certifications1'+str).val();
var certifications2 = $('#certifications2'+str).val();
var certifications3 = $('#certifications3'+str).val();
var cashamount = $('#cashamount'+str).val();
var charge = $('#charge'+str).val();
var modeofpayment = $('#modeofpayment'+str).val();
var tuition = $('#tuition'+str).val();
var balance = $('#balance'+str).val();
var card = $('#card').val();
var cardtype = $('#cardtype'+str).val();
var card_amount = $('#card_amount'+str).val();
var appr_code = $('#appr_code'+str).val();
var bank = $('#bank'+str).val();
var check_no = $('#check_no'+str).val();
var checkamount = $('#checkamount'+str).val();
var hidden = $('#hidden'+str).val();
var hidden2 = $('#hidden2'+str).val();
var hidden3 = $('#hidden3'+str).val();
var $form = $('#myModal'+str),
formData = new FormData(),
files = $form.find('[name="file"]')[0].files;
$.each(files, function(i, file) {
// Prefix the name of uploaded files with "uploadedFiles-"
// Of course, you can change it to any string
formData.append('file', file);
});
$.ajax({
url: "update_registration.php?registrationno="+registrationno+"&course="+course+"&classcode="+classcode+"&dateofregistration="+dateofregistration+"&companysponsor="+companysponsor+"&telno="+telno+"&surname="+surname+"&firstname="+firstname+"&middlename="+middlename+"&email="+email+"&cellphone="+cellphone+"&landline="+landline+"&street="+street+"&barangay="+barangay+"&municipalitycity="+municipalitycity+"&district="+district+"&province="+province+"&nationality="+nationality+"&birthplace="+birthplace+"&dateofbirth="+dateofbirth+"&sex="+sex+"&age="+age+"&civilstatus="+civilstatus+"&persontocontact="+persontocontact+"&contactno="+contactno+"&educationalattainment="+educationalattainment+"&school="+school+"&coursedegree="+coursedegree+"&nameofcompany1="+nameofcompany1+"&nameofcompany2="+nameofcompany2+"&nameofcompany3="+nameofcompany3+"&typeofcompany1="+typeofcompany1+"&typeofcompany2="+typeofcompany2+"&typeofcompany3="+typeofcompany3+"&datefrom1="+datefrom1+"&datefrom2="+datefrom2+"&datefrom3="+datefrom3+"&dateto1="+dateto1+"&dateto2="+dateto2+"&dateto3="+dateto3+"&position1="+position1+"&position2="+position2+"&position3="+position3+"&titleofcourse1="+titleofcourse1+"&titleofcourse2="+titleofcourse2+"&titleofcourse3="+titleofcourse3+"&yeartaken1="+yeartaken1+"&yeartaken2="+yeartaken2+"&yeartaken3="+yeartaken3+"&trainingcenter1="+trainingcenter1+"&trainingcenter2="+trainingcenter2+"&trainingcenter3="+trainingcenter3+"&certifications1="+certifications1+"&certifications2="+certifications2+"&certifications3="+certifications3+"&cashamount="+cashamount+"&charge="+charge+"&modeofpayment="+modeofpayment+"&tuition="+tuition+"&balance="+balance+"&card="+card+"&cardtype="+cardtype+"&card_amount="+card_amount+"&appr_code="+appr_code+"&bank="+bank+"&check_no="+check_no+"&checkamount="+checkamount+"&hidden="+hidden+"&hidden2="+hidden2+"&hidden3="+hidden3+"&id="+id,
type: 'POST',
data: formData,
async: false,
success: function (data) {
$('#info2').html(data);
viewdata();
},
cache: false,
contentType: false,
processData: false
});
return false;}

Develop Reference

JavaScript is the programming language of the Web.

How to show a popup modal in codeIgniter? - javascript

Remove style="display: none;" from your <div> tag

Try $('#reservation_detail_model_body').html(msg); $('#reservation_detail_model').css('display','block');

Related

How to auto compute values from database using JavaScript

JQuery repeating fields messes with Bootstrap layout on removing rows

Dropdown list set put selected value from database

Form serialize with ajax post

formData (id +string) not working

Categories

Resources