php - 如何根据我们点击的按钮使用 jQuery 和 php 发布数据
问题描述
我有以下数据来自我的数据库。
然后我用如下所示的数据构建一个表：
这是我的代码：
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th> Vacancy Number</th>
<th> Vacancy Title</th>
<th> Requirements</th>
<th> Responsibilities</th>
<th> Qualifications</th>
<th> Closing Date</th>
<th> Apply</th>
<tr>
</thead>
<tbody>
<?php
<?php
//Loop through the data
foreach ($currentVacancies as $vacancy) {
$vacancyID = $vacancy->vacancyID;
$roleID = $vacancy->roleID;
$roleShortTitle = $vacancy->roleShortTitle;
$roleLongTitle = $vacancy->roleLongTitle;
$roleDescID = $vacancy->roleDescID;
$roleRequirements = $vacancy->roleRequirements;
$roleResponsibilities = $vacancy->roleResponsibilities;
$roleQualifications = $vacancy->roleQualifications;
$closeDate = $vacancy->closeDate;
$recruitementType = $vacancy->recruitementType;
//Check if the recruitement is internal, external or for both
/* The user can be:
* Online and not signed in
* Online and signed in
* Online, signed in and not staff
* Online, signed in and staff
* We need to check for all these
*/
if($recruitementType === 'Both' || $recruitementType === 'External'){
//display the vacancies
?>
<tr>
<td id="vacancyID">
<?php echo $vacancyID; ?>
</td>
<td id="roleLongTitle">
<?php echo $roleLongTitle; ?>
</td>
<td id="roleRequirements">
<?php echo $roleRequirements; ?>
</td>
<td id="roleResponsibilities">
<?php echo $roleResponsibilities; ?>
</td>
<td id="roleQualifications">
<?php echo $roleQualifications; ?>
</td>
<td id="closeDate">
<?php
//Convert the mySQL date to PHP date
echo convertToDate($closeDate);
?>
</td>
<td>
// Have jQuery code to add a button
</td>
</tr>
<?php
}
}
?>
</tbody>
当我单击下图中标记为 1 的按钮时，我想使用 jQuery 将该信息发布到新页面，如果单击标记为 2 的按钮，我想将该信息发布到新页面。单击按钮时，我无法获得正确的信息。我使用 console.log 检查单击哪个按钮时获得的信息，输出如下： 按钮 1
按钮 2：
我添加按钮并识别点击的代码：
var applyForRole = {
init: function(config){
this.config = config;
this.bindEvents();
$.ajaxSetup({
url: '../../applyForRole.php',
type: 'POST'
});
},
bindEvents: function(){
//Remove the Button
this.config.btn.remove();
this.config.applyBtn = $('<input type="button" value=" Apply " id="toggleButton" \>');
this.config.applyBtn.insertAfter(this.config.closeDate);
this.config.applyBtn.on('click', this.validateInput);
},
//Check input
validateInput: function(){
var self = applyForRole;
var vacancyID = self.config.vacancyID.text();
var roleLongTitle = self.config.roleLongTitle.text();
var closeDate = self.config.closeDate.text();
var roleRequirements = self.config.roleRequirements.text();
var roleResponsibilities = self.config.roleResponsibilities.text();
var roleQualifications = self.config.roleQualifications.text();
console.log(vacancyID);
console.log(roleLongTitle);
console.log(roleRequirements);
console.log(roleResponsibilities);
console.log(roleQualifications);
console.log(closeDate);
console.log($(this));
}
};
//Initiate Object
applyForRole.init({
vacancyID: $('td#vacancyID'),
closeDate: $('td#closeDate'),
roleLongTitle: $('td#roleLongTitle'),
roleRequirements: $('td#roleRequirements'),
roleResponsibilities: $('td#roleResponsibilities'),
roleQualifications: $('td#roleQualifications'),
btn: $('a.btn-primary')
});
有人可以帮助我，以便我可以根据我单击的按钮获得正确的信息。
解决方案
不要将 id 用于非唯一元素，请使用类。
$(document).ready(function(){
$('.toggleButton').click(function(){
var obj = $(this).closest('tr');
var data = {
vacancyID: obj.find('td.vacancyID').text(),
closeDate: obj.find('td.closeDate').text(),
roleLongTitle: obj.find('td.roleLongTitle').text(),
roleRequirements: obj.find('td.roleRequirements').text(),
roleResponsibilities: obj.find('td.roleResponsibilities').text(),
roleQualifications: obj.find('td.roleQualifications').text(),
}
console.log(data);
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th> Vacancy Number</th>
<th> Vacancy Title</th>
<th> Requirements</th>
<th> Responsibilities</th>
<th> Qualifications</th>
<th> Closing Date</th>
<th> Apply</th>
</tr>
</thead>
<tbody>
<?php
<?php
//Loop through the data
foreach ($currentVacancies as $vacancy) {
$vacancyID = $vacancy->vacancyID;
$roleID = $vacancy->roleID;
$roleShortTitle = $vacancy->roleShortTitle;
$roleLongTitle = $vacancy->roleLongTitle;
$roleDescID = $vacancy->roleDescID;
$roleRequirements = $vacancy->roleRequirements;
$roleResponsibilities = $vacancy->roleResponsibilities;
$roleQualifications = $vacancy->roleQualifications;
$closeDate = $vacancy->closeDate;
$recruitementType = $vacancy->recruitementType;
//Check if the recruitement is internal, external or for both
/* The user can be:
* Online and not signed in
* Online and signed in
* Online, signed in and not staff
* Online, signed in and staff
* We need to check for all these
*/
if($recruitementType === 'Both' || $recruitementType === 'External'){
//display the vacancies
?>
<tr>
<td class="vacancyID">
<?php echo $vacancyID; ?>
</td>
<td class="roleLongTitle">
<?php echo $roleLongTitle; ?>
</td>
<td class="roleRequirements">
<?php echo $roleRequirements; ?>
</td>
<td class="roleResponsibilities">
<?php echo $roleResponsibilities; ?>
</td>
<td class="roleQualifications">
<?php echo $roleQualifications; ?>
</td>
<td class="closeDate">
<?php
//Convert the mySQL date to PHP date
echo convertToDate($closeDate);
?>
</td>
<td>
<input type="button" value=" Apply " class="toggleButton" \>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>