Develop Reference

How to fill field in a modal with a existing contact when opening?

Hello I´m building a contact book where you can add and edit contacts. Now I want the "edit" button to open a modal where you can make changes in the contact and save. Why is it not working with document.getElementById("name").value = kontakt.name; to get the data of an existing contact in a modal when opening?
It worked before when using a html site. So there is no problem with the syntax
I have this modal
<div class="container">
<h2></h2>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Kontakt erstellen</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-label" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-label" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-label" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()" >Speichern</button>
</div>
</div>
</div>
</div>
</div>
This is the edit button which is created in the table with every new contact
// edit button
var button = document.createElement('button');
button.onclick = function() {
Initialize(kontakt.id);
$('#dialog').modal('show');
This is the initialize function which should put the contact data in the empty fields. Here comes the error from. It says TypeError: document.getElementById(...) is null
function kontaktBearbeitenInit(id) {
let kontakt = kontakteSpeicher.findContacttoId(id);
document.getElementById("name").disabled = true;
document.getElementById("name").value = kontakt.name;
document.getElementById("email").value = kontakt.email;
document.getElementById("Ort").value = kontakt.ort;
document.getElementById("plz").value = kontakt.plz;
document.getElementById("strasse").value = kontakt.strasse;
}

Try replace
document.getElementById("Ort").value = kontakt.ort;
to
document.getElementById("ort").value = kontakt.ort;
const container = document.getElementsByClassName('container')[0];
var button = document.createElement('button');
container.appendChild(button);
button.innerHTML = 'Create';
button.classList.add('btn', 'btn-primary');
button.onclick = function() {
$('#dialog').show();
Initialize();
}
function closeModal() {
$('#dialog').hide();
}
function Initialize() {
let kontakt = {
name: 'John',
email: 'test#example.com',
ort: 'ort',
plz: 'plz',
strasse: 'strasse'
}
document.getElementById("name").disabled = true;
document.getElementById("name").value = kontakt.name;
document.getElementById("email").value = kontakt.email;
document.getElementById("ort").value = kontakt.ort;
document.getElementById("plz").value = kontakt.plz;
document.getElementById("strasse").value = kontakt.strasse;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2></h2>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Kontakt erstellen</h4>
<button type="button" class="close" data-dismiss="modal" onclick="closeModal()">×</button>
</div>
<div class="modal-body">
<div class="container">
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-label" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-label" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">PLZ</label>
<div class="col-sm-10">
<input type="number" class="form-label" placeholder="PLZ" id="plz">
</div>
</div>
<div class="form-group row">
<label for="ort" class="col-sm-2 col-form-label">Ort</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="ort" placeholder="Ort">
</div>
</div>
<div class="form-group row">
<label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
<div class="col-sm-10">
<input type="text" class="form-label" id="strasse" placeholder="Strasse und Hausnummer">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
</div>
</div>
</div>
</div>
</div>

My data inserts but data table wont reload (codeigniter)

I am using an ajax code that inserts data into the database using modal however, the ajax.reload doesn't work because of some problems. I used the console and network tab of the chrome to see what is the error. It seems that the value for my ajax data is NULL. I Hope someone can help me.
Screenshots of the error from console
Screenshot from network
Screenshot of null values
Ajax code and Controller function
$('#newConsigneeSubmit').on("click", function(){
var supp_code = $("input[name=supp_code]").val();
var address1 = $("input[name=address1]").val();
var address2 = $("input[name=address2]").val();
var country = $("input[name=country] ").val();
var description = $("input[name=description]").val();
var tel_num = $("input[name=tel_num]").val();
var fax_num = $("input[name=fax_num]").val();
var contact_person = $("input[name=contact_person]").val();
var email = $("input[name=email]").val();
var consol_agent = $("input[name=consol_agent]").val();
var disc1 = $("input[name=disc1]").val();
var disc2 = $("input[name=disc2]").val();
var disc3 = $("input[name=disc3]").val();
var disc4 = $("input[name=disc4]").val();
var disc5 = $("input[name=disc5]").val();
var last_transaction = $("input[name=last_transaction]").val();
var old_supplier = $("input[name=old_supplier]").val();
var sfm_table = $('#datatable-buttons').DataTable();
$.ajax({
url:'<?php echo base_url(); ?>SFM/insert',
type:'post',
data:{
'supp_code' : supp_code , 'address1' : address1 , 'address2' : address2 ,'country' : country ,
'description' : description ,'tel_num' : tel_num , 'fax_num' : fax_num ,'contact_person' : contact_person ,
'email' : email , 'consol_agent' : consol_agent , 'disc1' : disc1 ,'disc2' : disc2
, 'disc3' : disc3 ,'disc4' : disc4 , 'disc5' : disc5 ,'last_transaction' : last_transaction ,'old_supplier' : old_supplier
},
success: function(data) {
if(data) {
sfm_table.ajax.reload()
$("#sfm_modal").modal('hide');
swal("Data Inserted", {
icon: "success"
});
} else {
swal("Error", {
icon: "error"
});
}
}
});
});
function insert()
{
$data1 = array(
'SUPP_CODE'=> $this->input->post('supp_code'),
'ADDRESS'=> $this->input->post('address1'),
'ADDRESS2'=> $this->input->post('address2'),
'COUNTRY'=> $this->input->post('country'),
'DESCRIPTION'=> $this->input->post('description'),
'TEL_NO'=> $this->input->post('tel_num'),
'FAX_NO'=> $this->input->post('fax_num'),
'CONTACT'=> $this->input->post('contact_person'),
'EMAIL'=> $this->input->post('email'),
'CONS_AGENT'=> $this->input->post('consol_agent'),
'DISC1'=> $this->input->post('disc1'),
'DISC2'=> $this->input->post('disc2'),
'DISC3'=> $this->input->post('disc3'),
'DISC4'=> $this->input->post('disc4'),
'DISC5'=> $this->input->post('disc5'),
'LAST_TRANS'=> $this->input->post('last_transaction'),
'SUPP_CODE2'=> $this->input->post('old_supplier')
);
$insertReturn = $this->system_model->insert('fo_supp', $data1);
echo json_encode($insertReturn);
}
SFM_VIEW
<!-- page content -->
<div class="right_col" role="main">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Supplier Master File
<small></small>
</h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Settings 1
</a>
</li>
<li>
<a href="#">Settings 2
</a>
</li>
</ul>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div style="overflow: hidden;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#sfm_modal" style="float: right;">
<i class="material-icons"></i>
<span>Add New Data</span>
</button>
</div>
<table id="datatable-buttons" name="sfm_table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Supplier Code
</th>
<th>Address
</th>
<th>Country
</th>
<th>Description
</th>
<th>Telephone Number
</th>
<th>Fax Number
</th>
<th>Contact Person
</th>
<th>Email
</th>
<th>Actions
</th>
<th>Consolidating Agent
</th>
<th>Discount 1
</th>
<th>Discount 2
</th>
<th>Discount 3
</th>
<th>Discount 4
</th>
<th>Discount 5
</th>
<th>Last Transaction
</th>
<th>Old Supplier
</th>
</tr>
</thead>
<tbody>
<?php if(!empty($fo_supp)): ?>
<?php foreach($fo_supp as $supp): ?>
<tr>
<td>
<?=$supp->SUPP_CODE?>
</td>
<td>
<?=$supp->ADDRESS." ".$supp->ADDRESS2?>
</td>
<td>
<?=$supp->COUNTRY?>
</td>
<td>
<?=$supp->DESCRIPTION?>
</td>
<td>
<?=$supp->TEL_NO?>
</td>
<td>
<?=$supp->FAX_NO?>
</td>
<td>
<?=$supp->CONTACT?>
</td>
<td>
<?=$supp->EMAIL?>
</td>
<td>
<a href="#sfm_modal_edit" data-target="#sfm_modal_edit" id='<?=$supp->SUPP_CODE?>' class="edit" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
</a>
<a href="#deleteEmployeeModal" class="delete" data-toggle="modal">
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</a>
</td>
<td>
<?=$supp->CONS_AGENT?>
</td>
<td>
<?=$supp->DISC1?>
</td>
<td>
<?=$supp->DISC2?>
</td>
<td>
<?=$supp->DISC3?>
</td>
<td>
<?=$supp->DISC4?>
</td>
<td>
<?=$supp->DISC5?>
</td>
<td>
<?= $supp->LAST_TRANS ?>
</td>
<td>
<?=$supp->SUPP_CODE2?>
</td>
</tr>
<?php endforeach;?>
<?php else: ?>
<tr>
<?php for($i = 0; $i < 10; $i++): ?>
<td>
<span class="text-danger"> Not Available </span>
</td>
<?php endfor; ?>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<!--MODAL HERE-->
<div class="modal fade" name="sfm_modal " id="sfm_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Create New Supplier
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form id="form1" class="form-horizontal">
<div class="form-group form-group-sm">
<!-- left column -->
<div class="col-sm-6">
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Supplier Code</label>
<span class="label label-default">Supplier Code</span>
<div class="col-sm-10">
<input type="text" name="supp_code" id="supp_code" class="form-control" data-inputmask="'mask': '999999'">
</div>
</div>
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Address</label>
<span class="label label-default">Address</span>
<div class="col-sm-10">
<input type="text" name="address1" class="form-control col-md-10" id="address1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Address 2</label>
<span class="label label-default">Address 2</span>
<div class="col-sm-10">
<input type="text" name="address2" class="form-control col-md-10" id="address2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Country</label>
<span class="label label-default">Country</span>
<div class="col-sm-10">
<input type="text" name="country" id="country" class="form-control col-md-10" />
</div>
</div>
<!-- <div class="form-group"><label for="new_zip" class="col-sm-2 control-label bg-danger" style = "visibility: hidden;">Description</label><span class="label label-default" >Supplier Code</span><div class="col-sm-3"><input type="text" class="form-control" id="new_zip" placeholder=""></div><div class="col-sm-7"><label for="new_zip_detail" class="sr-only" style = "visibility: hidden;">City, State Country</label><input type="text" class="form-control" id="new_zip_detail" placeholder="City, State Country" disabled=""></div></div> -->
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Description</label>
<span class="label label-default">Description</span>
<div class="col-sm-10">
<input type="text" name="description" class="form-control" id="description" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Telephone Number</label>
<span class="label label-default">Telephone Number</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="tel_num" id="tel_num" data-inputmask="'mask' : '(999) 999-9999'">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Fax Number</label>
<span class="label label-default">Fax Number</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="fax_num" id="fax_num" data-inputmask="'mask' : '(999) 999-9999'">
</div>
</div>
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Consolidating Agent</label>
<span class="label label-default">Consolidating Agent</span>
<div class="col-sm-10">
<input type="text" name="consol_agent" class="form-control" id="consol_agent" placeholder="">
</div>
</div>
</div>
<!-- right column -->
<div class="col-sm-6">
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Email</label>
<span class="label label-default">Email</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_name" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Contact Person</label>
<span class="label label-default">Contact Person</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="contact_person" id="contact_person" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_subname" class="col-sm-2 control-label" style="visibility: hidden;">Discount 1</label>
<span class="label label-default">Discount 1</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc1" id="disc1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_address" class="col-sm-2 control-label bg-danger" style="visibility: hidden;">Discount 2</label>
<span class="label label-default">Discount 2</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc2" id="disc2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_addresssub" class="col-sm-2 control-label" style="visibility: hidden;">Discount 3</label>
<span class="label label-default">Discount 3</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="disc3" id="disc3" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 4</label>
<span class="label label-default">Discount 4</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="disc4" id="disc4" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Discount 5</label>
<span class="label label-default">Discount 5</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="disc5" id="disc5" placeholder="">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Last Transaction</label>
<span class="label label-default">Last Transaction</span>
<div class="col-sm-10">
<input type="text" class="form-control" name="last_transaction" id="last_transaction" data-inputmask="'mask': '9999/99/99'">
</div>
</div>
<div class="form-group">
<label for="new_phone" class="col-sm-2 control-label" style="visibility: hidden;">Old Supplier</label>
<span class="label label-default">Old Supplier</span>
<div class="col-sm-10">
<input type="phone" class="form-control" name="old_supplier" id="old_supplier" placeholder="">
</div>
</div>
</div>
</div>
</div>
<!-- End main input boxes, starting a new "row" -->
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" id="newConsigneeReset">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="newConsigneeSubmit">Add</button>
</div>
<!-- End Modal Footer -->
</form>
</div>
<!-- End modal body div -->
</div>
<!-- End modal content div -->
</div>
<!-- End modal dialog div -->
</div>
<!-- End modal div -->
</div>
<!-- END DIV -->
</div>
</div>
</div>
<!-- /page content -->

Errors 01 - Close </form> before the div
</form>
</div> <--- THIS DIV
remove id from <button> and use only for <form>
# change button type
<button type="submit" class="btn btn-primary">Add</button>
# use below form ID
<form id="form1" class="form-horizontal">
In JS
#change
$('#newConsigneeSubmit').on("click", function(){
# to this
$("#form1").submit(function (e) {
#change
var supp_code = $("input[name=supp_code]").val();
# to this
var supp_code = $('#supp_code').val();
FYI: Before you insert check all the data has passed to your controller. (print_r($arrayName);die;)

Ajax PHP Form Submission with Image and Text

I'm writing an app that allows my wife to add her recipes to a database i have set up. I have a form set up with both text and a file input for an image. It works fine and she can upload text and image to the database. Now, I'm trying to add a feature so that she can edit it. It's the same exact form only the data goes to a different PHP file for processing. When she clicks the "Edit" button it populates all the text inputs with the data pulled from the server and she can edit. She can also add a new photo if she wishes. Despite the fact that it's the same form, it will not upload the image. The text uploads fine, but the $_POST['recipeImage'] is always empty when I look at the object being sent to the server (recipeImage: "");
I am baffled and cannot see why this isn't working. Here is the code:
HTML FORM (IMAGE UPLOAD IS A BOTTOM):
<div id="editRecipeModal">
<div class="col-md-8">
<div class="card">
<form action="../PHP/modify_recipe.php" method="POST" role="form" class="form-horizontal" enctype="multipart/form-data" id="editRecipeForm" name="editRecipeForm">
<input class="form-control" type="hidden" value="" id="creatorIdEdit" name="creatorId">
<input class="form-control" type="hidden" value="" id="recipeIdEdit" name="recipeId" value="">
<div class="card-header card-header-text" data-background-color="purple">
<h4 class="card-title"><i class="far fa-edit"></i> Edit Recipe</h4>
</div>
<div class="card-content"
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Name</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" name="name" maxlength="150" id="editRecipeName" required>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Prep Time</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="prepTime" id="editPrepTime" required>
<span class="help-block">Numbers Only. In minutes... ie: 120 Minutes</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Servings</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="servings" id="editServings" required>
<span class="help-block">Numbers Only...</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Calories</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="calories" id="editCalories" required>
<span class="help-block">Numbers Only</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Brief Description</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="description" id="editBriefDescription" rows="5" required></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<label class="col-sm-2 label-on-left">Ingredients</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="ingredients" id="editPasteIngredientsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Steps</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="directions" id="editPasteStepsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Search Tags</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" id="editTags" name="tags" required>
</div>
</div>
</div><br> <br> <br> <br>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" data-style="btn btn-primary btn-round" title="vegOrVegan" data-size="7" id="vegOrVeganEditSelect">
<option disabled selected>Dietary Restrictions</option>
<option value="" name="">None</option>
<option value="T" name="T">Vegetarian</option>
<option value="VG" name="VG">Vegan</option>
</select>
<input type="hidden" id="vegOrVeganEdit" name="vegOrVegan">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="suggestedPairingEditSelect" data-style="btn btn-primary btn-round" title="Suggested Pairing" data-size="7">
<option disabled selected>Suggested Pairing</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="RW" name="RW">Red Wine</option>
</select>
<input type="hidden" id="suggestedPairingEdit" name="suggestedPairing" value="">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="" data-style="btn btn-primary btn-round" title="Some Other Attributes" data-size="7">
<option disabled selected>Some Other Attributes</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="WW" name="WW">Red Wine</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;">
</div>
</div>
<div class="row" style="width: 80%; margin: 0 auto;">
<div class="col-sm-4"></div>
<div class="col-sm-4" style="text-align: center;">
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail">
<img src="../assets/img/placeholder.jpg" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"></div>
<div>
<span class="btn btn-rose btn-round btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="recipeImage" id="recipeImageEdit" />
</span>
<i class="fa fa-times"></i> Remove
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br><br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4" style=" text-align: center; margin: 0; padding: 0;"><button class="btn btn-primary btn-lg modRecButton" type="submit" id="submitRecipe">Submit Changes</button></div>
<div class="col-sm-4 closePanel" style="text-align: center; margin: 0; padding: 0;" id="closePanel"><button type="button" class="btn btn-default btn-lg">Cancel Changes</button>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</form>
</div>
</div>
</div>
AJAX CODE
$(document).ready(function(e) {
$("#editRecipeForm").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "../PHP/modify_recipe.php",
type: "POST",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function(response) {
let parsedResponse = JSON.parse(response);
let newObject = parsedResponse[0]
if (parsedResponse == 'notModified') {
showErrorModal();
}else{
reBuildAfterObjectChange(newObject.recipeId, parsedResponse);
}
},
error: function() {
showErrorModal();
}
});
}));
});
PHP CODE
<?php
include 'db_operations.php';
if(isset($_POST['name'])&& isset($_POST['description']) && isset($_POST['ingredients'])&& isset($_POST['directions']) && isset($_POST['suggestedPairing']) && isset($_POST['prepTime']) && isset($_POST['servings']) && isset($_POST['calories']) && isset($_POST['vegOrVegan']) && isset($_POST['recipeId']) && isset($_POST['creatorId']))
{
$result = '';
$name = $_POST['name'];
$description = $_POST['description'];
$ingredients = $_POST['ingredients'];
$ingredients = str_replace(';', '-', $ingredients);
$ingredients = str_replace('\n', ';', $ingredients);
$directions = $_POST['directions'];
$directions = str_replace(';', '-', $directions);
$directions = str_replace('\n', ';', $directions);
$suggestedPairing = $_POST['suggestedPairing'];
$prepTime = $_POST['prepTime'];
$servings = $_POST['servings'];
$calories = $_POST['calories'];
$vegOrVegan = $_POST['vegOrVegan'];
$recipeId = $_POST['recipeId'];
$creatorId = $_POST['creatorId'];
$tags = $_POST['tags'];
$time=time();
$lastModified = (date("Y-m-d H:i:s", $time));
modifyRecipe_recipes($name, $description, $ingredients, $directions, $suggestedPairing, $prepTime, $servings, $calories, $vegOrVegan, $lastModified, $creatorId, $recipeId, $tags);
}
if(isset($_POST['recipeImage'])){
$size = $_FILES['recipeImage']['size'];
if($size > 0){
$tmp_dir = $_FILES["recipeImage"]["tmp_name"];
$tmpImg = $_FILES['recipeImage']['name'];
$ext = strtolower(pathinfo($tmpImg, PATHINFO_EXTENSION));
$recipeImage = rand(10000, 10000000).".".$ext;
move_uploaded_file($tmp_dir, "../userRecipeImages/".$recipeImage);
$sql = 'UPDATE recipes SET recipeImage = :recipeImage WHERE creatorId = :creatorId AND recipeId= :recipeId';
$stmt = $conn->prepare($sql);
$stmt->bindParam(':creatorId', $creatorId, PDO::PARAM_STR);
$stmt->bindParam(':recipeImage', $recipeImage, PDO::PARAM_STR);
$stmt->bindParam(':recipeId', $recipeId, PDO::PARAM_STR);
$stmt->execute();
}
}
$modifiedRecipeDate = getLastModified_recipes($lastModified, $creatorId);
if ($modifiedRecipeDate === $lastModified) {
$newObject = getSingleRecipeById_recipes($recipeId, $creatorId);
echo json_encode($newObject);
}
else {
$result = "notModified";
echo json_encode($result);
}
?>

You obviously forgot to change $_POST['recipeImage'] to $_FILES['recipeImage']
Files are contained in the $_FILES global variable not $_POST
Change this
if(isset($_POST['recipeImage'])){
to
if(isset($_FILES['recipeImage'])){

I want a modal pop after the song ends in default audio player can any one help me with code

below is my modal i want this to open automatically once the song gets over in default audio player
<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">
<button type="submit" class="btn btn-primary btn-sm">
Submit</button>
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" id="namea" 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">
<input type="text" class="form-control" placeholder="Name" />
</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">
<input type="text" class="form-control" id="txtEmail" placeholder="Email" <input type="text" />
</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" id="mobile" 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" id="password" 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" id="password1" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<button type="button" onclick="ValidateName();myFunction();ValidateNo();checkEmail();" class="btn btn-primary btn-sm" >
Save & Continue</button>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
OR</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">
Facebook <a href="#" class="btn btn-danger">
Google +</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login And Register -->
<!-- Java scripts -->
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".pop").click(function () {
$("#myModal").modal();
});
});
</script>

Html5 audio player has events which will get triggered when the audio stops playing
var aud = document.getElementById("myAudio");
aud.onended = function() {
alert("The audio has ended");
};
Refer this page

Form.Serialize with checkbox array

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

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

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