我有一个jquery向导,其中我有一个数据表,我可以在其中选择一些行将它们发送到一个表单来创建一个新的meeeting"。
问题在于,当我尝试使用Ajax将数据提交到表单时,会发送所有数据表数据,包括有关数据表的信息,而不仅仅是我选择的值。
除此之外,我怎样才能获取php本身的数据?它只是$ data = $ _POST ['数据']?
我的表单以这种方式设置:
<div class="wizard-container">
<div class="card wizard-card" data-color="red" id="wizardProfile">
<form id ="create_meeting_form" action="create_meeting.php" method="post">
<div class="wizard-header">
<h3 class="wizard-title">Create new meeting</h3>
</div>
<div class="wizard-navigation">
<ul>
<li><a href="#partecipants" data-toggle="tab">Partecipants</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="about">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<div class="form-group label-floating">
<label class="control-label">Title <small>(required)</small></label>
<input name="firstname" type="text" class="form-control">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">record_voice_over</i>
</span>
<div class="form-group label-floating">
<input name="lastname" type="date" class="form-control">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">record_voice_over</i>
</span>
<div class="form-group label-floating">
<input name="lastname" type="time" class="form-control">
</div>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<div class="form-group label-floating">
<label class="control-label">Address <small>(required)</small></label>
<input name="firstname" type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="partecipants">
<h4 class="info-text"> Who would you like to invite? </h4>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div>
<table class="table table-hover" id="meeting_partecipant_table">
<thead>
<tr>
<th><input type="checkbox" name="select_all" value="1" id="example-select-all_partecipant"></th>
<th>Name</th>
<th>Company</th>
<th>Role</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<input type='button' class='btn btn-next btn-fill btn-success btn-wd' name='next' value='Next' />
<input type='submit' class='btn btn-finish btn-fill btn-success btn-wd' name='finish' value='Finish' />
</div>
<div class="pull-left">
<input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
</div>
<div class="clearfix"></div>
</div>
然后我有一个名为tables.js的js来执行此操作:
$(document).ready(function ()
{ //Get data for meetings table located in dashboard.php
var table = $("#meeting_partecipant_table").DataTable(
{
"sAjaxSource": "data_new_meeting_table.php",
columnDefs:
[ {
targets: 0,
orderable: false,
sortable: false,
className: 'select-checkbox' ,
id: 'check'
}
],
select: {
style: 'os',
style: 'multi'
},
// da dove prende i dati
"aoColumns":
[
{
"data": null,
"defaultContent": ""
},
{ "mData": "Name"},
{ "mData": "Company" },
{ "mData": "Role"},
],
'order': [[1, 'asc']]
});
$('#example-select-all_partecipant').on('click', function(){
// Get all rows with search applied
var rows = table.rows({ }).nodes();
alert( 'The table has '+rows.length+' records' );
// Check/uncheck checkboxes for all rows in the table
var rows = table.rows( { selected: false } ).prop('checked', true);
});
$('#create_meeting_form').on('submit', function(e){
e.preventDefault();
var form_data = $('#create_meeting_form').serializeArray();
var data = table.rows( { selected: true } ).data();
console.log(data);
var name = data.Company;
console.log(name);
form_data[form_data.length] = { name: "data", value: JSON.stringify(data) };
//console.log(form_data);
//console.log(data.length);
//var count = table.rows( { selected: true } ).count();
//alert(count);
$.ajax({
url: 'create_meeting.php',
method: 'post',
data: form_data,
success: function(data)
{
alert("success");
}
});
});
});