Develop Reference

Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions

Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored
I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.
https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.
This is the code to make the call:
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
console.log(data);
}
});
});
My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.

It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.
Move your form tag under your first container:
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
End tag
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</form>
</div>
Full example of cleaned up code running:
function test() {
var billName = document.getElementById('bill_name');
var shipName = document.getElementById('ship_name');
var billLine1 = document.getElementById('bill_line_1');
var shipLine1 = document.getElementById('ship_line_1');
var billLine2 = document.getElementById('bill_line_2');
var shipLine2 = document.getElementById('ship_line_2');
var billLine3 = document.getElementById('bill_line_3');
var shipLine3 = document.getElementById('ship_line_3');
var billLine4 = document.getElementById('bill_line_4');
var shipLine4 = document.getElementById('ship_line_4');
var billCounty = document.getElementById('bill_county');
var shipCounty = document.getElementById('ship_county');
var billPostcode = document.getElementById('bill_post');
var shipPostcode = document.getElementById('ship_post');
var billTele = document.getElementById('bill_telephone');
var shipTele = document.getElementById('ship_telephone');
var billEmail = document.getElementById('bill_email');
var shipEmail = document.getElementById('ship_email');
shipName.value = billName.value;
shipLine1.value = billLine1.value;
shipLine2.value = billLine2.value;
shipLine3.value = billLine3.value;
shipLine4.value = billLine4.value;
shipCounty.value = billCounty.value;
shipPostcode.value = billPostcode.value;
shipTele.value = billTele.value;
shipEmail.value = billEmail.value;
}
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
var test = form.serialize();
alert(test);
});
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> ';
cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> ';
cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>';
cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="bill_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Name</div>
</div>
<input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 1</div>
</div>
<input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 2</div>
</div>
<input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 3</div>
</div>
<input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 4</div>
</div>
<input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="bill_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing County</div>
</div>
<input id="bill_county" name="bill_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Postcode</div>
</div>
<input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Telephone Number</div>
</div>
<input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Email Address</div>
</div>
<input id="bill_email" name="bill_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="ship_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Name</div>
</div>
<input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 1</div>
</div>
<input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 2</div>
</div>
<input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 3</div>
</div>
<input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 4</div>
</div>
<input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="ship_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping County</div>
</div>
<input id="ship_county" name="ship_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Postcode</div>
</div>
<input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Telephone Number</div>
</div>
<input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Email Address</div>
</div>
<input id="ship_email" name="ship_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
<button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
</div>
</div>
<br>
<div class="container">
<h2>Extra Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group row">
<label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
<div class="col-7">
<div class="input-group">
<input id="ship_method" name="ship_method" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-anchor"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
<div class="col-7">
<div class="input-group">
<input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
</div>
<span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
</div>
</div>
<div class="form-group row">
<label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
<div class="col-7">
<div class="input-group">
<input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<h2>Item Information</h2>
<div class="row">
<div class="col-12">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>SKU</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="sku" class="form-control" />
</td>
<td>
<input type="number" name="quantity" class="form-control" />
</td>
<td>
<input type="number" name="price" class="form-control" />
</td>
<td>
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

My ajax for the edit button is not working

I have my edit button in the modal in which the user may edit. However, the updating part is not working. I feel that the problem lies in my controller part but up to this point I can't seem to solve it on my own.
The response in the developers console for the ajax is (0) or when I use var_dump($data) from the controller the response is an array. I don't know whats going on. Can anyone help me? I've been doing this for almost 3 days. I was just skipping and going to another module. But I need to finish it now..
Ajax code
$("#form2").submit(function(e) {
var supp_code = $('#supp_codev1').val();
var address1 = $('#address1v1').val();
var address2 = $('#address2v1').val();
var country = $('#countryv1').val();
var description = $('#descriptionv1').val();
var tel_num = $('#tel_numv1').val();
var fax_num = $('#fax_numv1').val();
var contact_person = $('#contact_personv1').val();
var email = $('#emailv1').val();
var consol_agent = $('#consol_agentv1').val();
var disc1 = $('#disc1v1').val();
var disc2 = $('#disc2v1').val();
var disc3 = $('#disc3v1').val();
var disc4 = $('#disc4v1').val();
var disc5 = $('#disc5v1').val();
var last_transaction = $('#last_transactionv1').val();
var old_supplier = $('#old_supplierv1').val();
var sfm_table = $('#datatable-buttons').DataTable();
e.preventDefault();
$.ajax({
url: '<?php echo base_url(); ?>SFM/update',
method: 'POST',
dataType: 'JSON',
data: {
'supp_codev1': 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) {
console.log(data);
if (data) {
$("#sfm_modal_edit").modal('hide');
swal("Data Edited", {
icon: "success"
});
} else {
swal("Error", {
icon: "error"
});
}
}
});
});
Ajax for populating the form
$(document).on("click", ".editBtn", function() {
var rowID = $(this).attr('id');
$.ajax({
url: '<?php echo base_url(); ?>SFM/fetch',
method: "POST",
dataType: "json",
data: {
'id': rowID
},
success: function(data) {
$('#supp_codev1').val(data.fo_supp[0].SUPP_CODE);
$('#address1v1').val(data.fo_supp[0].ADDRESS);
$('#address2v1').val(data.fo_supp[0].ADDRESS2);
$('#countryv1').val(data.fo_supp[0].COUNTRY);
$('#descriptionv1').val(data.fo_supp[0].DESCRIPTION);
$('#tel_numv1').val(data.fo_supp[0].TEL_NO);
$('#fax_numv1').val(data.fo_supp[0].FAX_NO);
$('#contact_personv1').val(data.fo_supp[0].CONTACT);
$('#emailv1').val(data.fo_supp[0].EMAIL);
$('#consol_agentv1').val(data.fo_supp[0].CONS_AGENT);
$('#disc1v1').val(data.fo_supp[0].DISC1);
$('#disc2v1').val(data.fo_supp[0].DISC2);
$('#disc3v1').val(data.fo_supp[0].DISC3);
$('#disc4v1').val(data.fo_supp[0].DISC4);
$('#disc5v1').val(data.fo_supp[0].DISC5);
$('#last_transactionv1').val(data.fo_supp[0].LAST_TRANS);
$('#old_supplierv1').val(data.fo_supp[0].SUPP_CODE2);
}
});
});
Controller
function update()
{
$data = array(
'SUPP_CODE'=> $this->input->post('supp_codev1'),
'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')
);
$supp = $this->input->post('supp_codev1');
$insertReturn2 = $this->system_model->update('fo_supp', $supp ,$data);
echo json_encode($insertReturn2);
}
View
<!--MODAL HERE-->
<div class="modal fade" name="sfm_modal_edit " id="sfm_modal_edit" 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">
Edit Supplier
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form id="form2" 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_codev1" id="supp_codev1" 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="address1v1" class="form-control col-md-10" id="address1v1" 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="address2v1" class="form-control col-md-10" id="address2v1" 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="countryv1" id="countryv1" 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="descriptionv1" class="form-control" id="descriptionv1" 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_numv1" id="tel_numv1" 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_numv1" id="fax_numv1" 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_agentv1" class="form-control" id="consol_agentv1" 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="emailv1" id="emailv1" 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_personv1" id="contact_personv1" 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="disc1v1" id="disc1v1" 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="disc2v1" id="disc2v1" 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="disc3v1" id="disc3v1" 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="disc4v1" id="disc4v1" 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="disc5v1" id="disc5v1" 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_transactionv1" id="last_transactionv1" 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_supplierv1" id="old_supplierv1" 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" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" >Edit</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 -->

object class named "editBtn" not found
do you create "editBtn" object in document?

I cannot figure out how to make the edit button work

This is something I've been working on for a while now, and it's about to be released I just cannot figure out for the life of me on how to make the edit button work. If you can find a way for it to work just leave the java down below and the changes that you've done it would be greatly appreciated.
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-heading">Vehicle Management</div>
<h2>List of your characters' vehicles</h2>
<table class="table table-responsive table-striped">
<thead>
<th>Vehicle Make</th>
<th>Vehicle Model</th>
<th>Vehicle Color</th>
<th>Vehicle Owner</th>
<th>License Plate</th>
<th>Details</th>
<th>Actions</th>
</thead>
<tr ng-show="vehList.length > 0" class="text-left" ng-repeat="veh in vehList">
<td>{{veh.vehmake}}</td>
<td>{{veh.vehmodel}}</td>
<td>{{veh.vehcolor}}</td>
<td>{{veh.vehowner}}</td>
<td>{{veh.vehplate}}</td>
<td>
<span ng-show="veh.details.stolen" class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> Stolen<br /></span>
<span ng-show="veh.details.registrationExpired" class="text-warning">Expired Registration<br /></span>
<span ng-show="veh.details.noRegistration" class="text-warning">No Registration<br /></span>
<span ng-show="veh.details.insuranceExpired" class="text-warning">Expired Insurance<br /></span>
<span ng-show="veh.details.noInsurance" class="text-warning">No Insurance<br /></span>
</td>
<td>
<span ng-show="veh.details.active" class="btn btn-primary glyphicon glyphicon-star"><br/></span>
<span ng-show="veh.details.nonactive" class="btn btn-default glyphicon glyphicon-star-empty"><br/></span>
<button ng-click="edit=true" class="btn btn-primary glyphicon glyphicon-edit"></button>
<button ng-click="deleteVehicle($index)" class="btn btn-danger glyphicon glyphicon-trash"></button>
</td>
</tr>
<!-- Only shown when there's no vehicule already created -->
<tr ng-show="vehList.length == 0">
<td colspan="7" class="text-center">
<h4>No Vehicle Found, Please Create One.</h4>
</td>
<tr>
<td colspan="7" class="text-center">
<button class="btn btn-success" data-toggle="modal" data-target="#modalAdNewVehicle"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</table>
<div class="panel-body">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalAdNewVehicle" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Vehicle Information
</h4>
</div>
<div class="modal-body">
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Make</span>
<input ng-model="newveh.vehmake" autofocus type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Model</span>
<input ng-model="newveh.vehmodel" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Color</span>
<input ng-model="newveh.vehcolor" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Owner</span>
<input ng-model="newveh.vehowner" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Plate</span>
<input ng-model="newveh.vehplate" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="container-fluid text-left">
<div class="checkbox">
<label><input ng-click-"!newveh.details.active" ng-model="newveh.details.active" type="checkbox" value"">Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.nonactive" ng-model="newveh.details.nonactive" type="checkbox" value="">Not Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.stolen" ng-model="newveh.details.stolen" type="checkbox" value="">Stolen</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.registrationExpired" ng-model="newveh.details.registrationExpired" type="checkbox" value="">Expired Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noRegistration" ng-model="newveh.details.noRegistration" type="checkbox" value="">No Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.insuranceExpired" ng-model="newveh.details.insuranceExpired" type="checkbox" value="">Expired Insurance</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noInsurance" ng-model="newveh.details.noInsurance" type="checkbox" value="">No Insurance</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button ng-click="addNewVehicle()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
There is java script for everything else to work, i just cannot figure out how to make the edit button work

How can I pass table data as a HttpPost request with angularjs and JSON?

Hi I have been trying to work out on how to pass table data which has multiple rows obviously. I'm having a hard time since I haven't any idea how to post such a table. So basically, I 'm trying to register an employer to the system, which he or she should add their qualification details through a modal. After that the details they fill gets saved in the html table(view). Finally after the other details are filled all the details including what's in the table should pass through angular controller via service to the database.
Here's my controller.js
This is the function that sends data.
$scope.register = function (isValid) {
console.log($scope.records);
if (isValid) {
var regidetail = {
fname: $scope.registDetails.fname,
lname: $scope.registDetails.lname,
dob: $scope.registDetails.dob,
nic: $scope.registDetails.nic,
Gender: $scope.registDetails.Gender,
email: $scope.registDetails.email,
tel: $scope.registDetails.tel,
id: $scope.registDetails.department,
Designation: $scope.registDetails.Designation,
doj: $scope.registDetails.doj,
addr1: $scope.registDetails.addr1,
addr2: $scope.registDetails.addr2,
addr3: $scope.registDetails.addr3,
addr4: $scope.registDetails.addr4,
qualification_type: $scope.registDetails.qualification_type,
qualification: $scope.registDetails.qualification,
inputdesc: $scope.registDetails.inputdesc,
inputUni: $scope.registDetails.inputUni,
inputDuration: $scope.registDetails.inputDuration,
datepickerDOA: $scope.registDetails.datepickerDOA
};
console.log(regidetail);
UserService.Register(regidetail, function (res) {
EMPID = (res.data);
console.log(res.data);
}
}
}
This is the html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Qualifications</label>
<div class="col-lg-10 col-md-9 ">
<table id="basic-datatables" name="datatables" class="table table-striped table-bordered table-hover" cellspacing="0" width="100">
<thead>
<tr>
<th>Qualification Type</th>
<th>Qualification level</th>
<th>Description</th>
<th>Univercity</th>
<th>Duration</th>
<th>Date of awarded</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(recordIndex, record) in records" style="text-align:center">
<td ng-model="registDetails.qualification_type">{{record.qualification_type}}</td>
<td ng-model="registDetails.qualification">{{record.qualification}}</td>
<td ng-model="registDetails.inputdesc">{{record.inputdesc}}</td>
<td ng-model="registDetails.inputUni">{{record.inputUni}}</td>
<td ng-model="registDetails.inputDuration">{{record.inputDuration}}</td>
<td ng-model="registDetails.datepickerDOA">{{record.datepickerDOA}}</td>
<td><i style="color:crimson" class="fa fa-trash-o"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-10 col-md-9 col-md-offset-3 col-lg-offset-2">
<p data-placement="left" data-toggle="tooltip" title="Add a Qualification">
<button data-toggle="modal" data-target="#addQualificationsModel" class="btn btn-success pull-left" id="btnNewrow" type="button" style="text-align:justify" ng-click="login(frmLogin.$valid)"><span class="fa fa-plus" style="vertical-align:middle; display:inline-block"></span></button>
</p>
</div>
<!--Modal-->
<div class="modal fade" id="addQualificationsModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Qualification Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification Type</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="Education" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="Professional" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification Level</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type=='prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputdesc">Description</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputdesc" class="form-control" id="inputdesc" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputUni">University</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputUni" class="form-control" id="inputUni" placeholder="University" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputDuration">duration</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputDuration" class="form-control" id="inputDuration" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="datepickerDOA">Date Of Awarded</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control datepicker" type="text" ng-model="QualificationDetails.datepickerDOA" id="datepickerDOA">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave" type="button" ng-click="save(QualificationDetails)" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--Modal .End-->
</div>
Any help would be appreciated.
:)

Do
var regidetail = angular.toJson({
<!-- all the content here -->
};
And then
$http.({
method : "POST",
url : "your API server URL",
data : regidetail,
}).then(function (response){
//success callback
alert("hip hip hurray!");
}, function (response){
// error callback
alert("Enter data correctly");
});

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"