我有一个表,并且在此表中,我使用窗体运行while循环。 我通过Ajax提交了此表单。
例如:
while循环给出5个结果,所以我有5个按钮具有不同的隐藏数据。 当我按下第一个按钮时,我从Ajax获得了正确的数据,但是当我按下其他按钮时,我却没有从Ajax获得任何结果。
由于搜索功能,我使用表格,所以我想将其保留为表格。
(function($) {
function jobDetails(e) {
var formData = $('#jobForm').serialize() //serialize data from form
$.ajax({
url: 'jobdetails.php',
dataType: 'json',
type: 'post',
data: formData,
success: function(data, textStatus) {
// success
}
});
e.preventDefault();
}
$('#jobForm').click(jobDetails);
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="pull-right">
<input type="text" class="search" placeholder="Wat zoekt u?" onkeydown="onkeypressed(event, this);">
</div>
<span class="counter pull-right"></span>
<table width="100%" class="table table-striped table-bordered table-hover table-bordered results" id="searchTable">
<thead>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<?php
if(isset($_GET['search'])){
$resource_id = ($_GET['machine']);
$jobs = "SELECT * FROM ";
$stmt = $pdo->prepare($jobs);
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
<tr>
<td>
<form id="jobForm" method="post">
<input type="hidden" name="machine" value="<?php echo $resource_id; ?>">
<input type="hidden" name="base" value="<?php echo $row[" WORKORDER_BASE_ID "]; ?>">
<input type="hidden" name="lot" value="<?php echo $row[" WORKORDER_LOT_ID "]; ?>">
<input type="hidden" name="split" value="<?php echo $row[" WORKORDER_SPLIT_ID "]; ?>">
<input type="hidden" name="sub" value="<?php echo $row[" WORKORDER_SUB_ID "]; ?>">
<input type="hidden" name="seq" value="<?php echo $row[" SEQUENCE_NO "]; ?>">
<input type="hidden" name="part" value="<?php echo $row[" PART_ID "]; ?>">
<button id="jobdetails" type="button" class="btn btn-default col-lg-12">
<?php echo $row["WORKORDER_BASE_ID"]."/".$row["WORKORDER_LOT_ID"].".".$row["WORKORDER_SPLIT_ID"]."-".$row["WORKORDER_SUB_ID"].":".$row["SEQUENCE_NO"];?>
</button>
</form>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</body>
答案 0 :(得分:2)
您正在使用while循环生成表单,但是您正在为错误的表单标记使用id
属性。如您所说,如果有5种形式,则将有5种相同的id="jobForm"
,但是id
在页面中应该是唯一的。使用类代替。
检查我在以下代码段中所做的更改:
<?php
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
<tr>
<td>
<form id="jobForm" class="jobForm" method="post"> // added class attribute with form tag.
<input type="hidden" name="machine" value="<?php echo $resource_id; ?>">
<input type="hidden" name="base" value="<?php echo $row["WORKORDER_BASE_ID"]; ?>">
<input type="hidden" name="lot" value="<?php echo $row["WORKORDER_LOT_ID"]; ?>">
<input type="hidden" name="split" value="<?php echo $row["WORKORDER_SPLIT_ID"]; ?>">
<input type="hidden" name="sub" value="<?php echo $row["WORKORDER_SUB_ID"]; ?>">
<input type="hidden" name="seq" value="<?php echo $row["SEQUENCE_NO"]; ?>">
<input type="hidden" name="part" value="<?php echo $row["PART_ID"]; ?>">
<button id="jobdetails" class="jobdetails" type="button" class="btn btn-default col-lg-12">
<?php echo $row["WORKORDER_BASE_ID"]."/".$row["WORKORDER_LOT_ID"].".".$row["WORKORDER_SPLIT_ID"]."-".$row["WORKORDER_SUB_ID"].":".$row["SEQUENCE_NO"];?>
</button>
</form>
</td>
</tr>
<?php
}
(function($){
function jobDetails( this,e ){
var formData = this.parents('form:first').serialize() //// Changed from direct #id to this object so it always refers to the clicked button.
$.ajax({
url: 'jobdetails.php',
dataType: 'json',
type: 'post',
data: formData,
success: function( data, textStatus ){
// success
}
});
e.preventDefault();
}
$('.jobForm').click( function(){ // Changed from id (#) to class (.)
$this = $(this);
jobDetails($this, event);
});
})(jQuery);
答案 1 :(得分:1)
您知道代码的问题是,不能有多个具有相同名称的ID。 这是基本规则。因此,要避免存在类名功能。
这是您的html,我已使所有表单的ID唯一,因此我们可以轻松选择需要提交的ID,我还向按钮和自定义数据属性添加了类,通过它们我们可以获取表单的current_id。我希望id是所有行中的唯一记录。
<?php
if(isset($_GET['search'])){
$resource_id = ($_GET['machine']);
$jobs = "SELECT * FROM ";
$stmt = $pdo->prepare($jobs);
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
<tr>
<td>
<form id="jobForm_<?php echo $row['id']; ?>" method="post">
<input type="hidden" name="machine" value="<?php echo $resource_id; ?>">
<input type="hidden" name="base" value="<?php echo $row["WORKORDER_BASE_ID"]; ?>">
<input type="hidden" name="lot" value="<?php echo $row["WORKORDER_LOT_ID"]; ?>">
<input type="hidden" name="split" value="<?php echo $row["WORKORDER_SPLIT_ID"]; ?>">
<input type="hidden" name="sub" value="<?php echo $row["WORKORDER_SUB_ID"]; ?>">
<input type="hidden" name="seq" value="<?php echo $row["SEQUENCE_NO"]; ?>">
<input type="hidden" name="part" value="<?php echo $row["PART_ID"]; ?>">
<button id="jobdetails" class="buttonsubmit" data-id="<?php echo $row['id']; ?>" type="button" class="btn btn-default col-lg-12">
<?php echo $row["WORKORDER_BASE_ID"]."/".$row["WORKORDER_LOT_ID"].".".$row["WORKORDER_SPLIT_ID"]."-".$row["WORKORDER_SUB_ID"].":".$row["SEQUENCE_NO"];?>
</button>
</form>
</td>
</tr>
<?php
}
}
?>
您不需要父字段和其他字段,您只需传递表单的当前ID并采用该特定表单即可:
现在单击按钮:
$('.buttonsubmit').click( function(){
var unique_form_id = $(this).data('id');
jobDetails(unique_form_id);
});
function jobDetails(unique_id){
var formData = $("#jobForm_".unique_id).serialize() //// Changed from direct #id to this object so it always refers to the clicked button.
$.ajax({
url: 'jobdetails.php',
dataType: 'json',
type: 'post',
data: formData,
success: function( data, textStatus ){
// success
}
});
e.preventDefault();
}