我正在尝试在一个表单中使用两个提交按钮。听起来不难...我也是这么想的。似乎提交按钮的变量不会被发送。只需一个按钮即可正常工作,或者按钮没有区别。
该消息.js只是显示 toastr 错误/成功消息。
form_handler.php :
<?php
require_once ('dbconnect.php');
$nr = $_POST["nr"];
$description = $_POST["description"];
$price = $_POST["price"];
$size = $_POST["size"];
if (isset($_POST["submit"]) && $_POST["submit"] == "Add") {
if(isset($_POST["nr"], $_POST["description"], $_POST["price"])){
$sql =" INSERT INTO artikelstamm (nr, description, size, price) VALUES ('$nr', '$description', '$size', '$price')";
$ergebnis = mysqli_query($db_link, $sql);
//or die("Error: ".mysqli_error($db_link));
if(!$ergebnis){
header('Content-type: text/javascript');
$arr = array(
'message' => '...',
'title' => 'Error'
);
echo json_encode($arr);
}else{
header('Content-type: text/javascript');
$arr = array(
'message' => '...',
'title' => 'Success'
);
echo json_encode($arr);
}
}
} elseif (isset($_POST["submit"]) && $_POST["submit"] == "Delete") {
print_r($_POST);
}
.HTML:
<!-- Content -->
<article class="first">
<h2>Article</h2>
</article>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="9u skel-cell-important">
<?php require_once('article/showArticles.php');
?>
</div>
<div class="3u">
<section>
Form here<br /><br />
<form action="form_handler.php" method="post" id="schuma">
<input type="text" name="nr" placeholder="Nr" /><br />
<input type="text" name="description" placeholder="Description" /><br />
<input type="text" name="size" placeholder="Size" /><br />
<input type="text" name="price" placeholder="Price" /><br />
<input id="btnAdd" type="submit" name="submit" value="Add" />
<input id="btnDel" type="submit" name="submit" value="Delete" />
</form>
<script src="article/message.js"></script>
</section>
</div>
</div>
</div>
</div>
留言.js :
$('#schuma').on('submit', function(){
var that = $(this),
contents = that.serialize();
$.ajax({
url: 'form_handler.php',
type: 'POST',
data: contents,
dataType: 'JSON',
success: function(data) {
console.log(data)
toastr.options = {
"closeButton": true,
"debug": false,
"positionClass": "toast-top-full-width",
"onclick": null,
"showDuration": "20000",
"hideDuration": "20000",
"timeOut": "20000",
"extendedTimeOut": "20000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
if(data.title == "Success"){
toastr.success(data.message, data.title);
}
else{
toastr.error(data.message, data.title);
}
}
});
return false;
});
编辑:新代码
好的,
这花了一段时间,因为您没有显示所有代码。看起来您的form
实际上是通过 AJAX 提交的,而不是您最初显示的通过 PHP。您正在禁用表单的提交方式并使用 AJAX 提交,这完全没问题,但是在您的 AJAX 中,您使用.serialize()
来获取所有表单数据,问题是.serialize()
不会包含带有 type="submit"
的按钮。因此,您的 PHP 最终未设置该字段。
要解决此问题,您需要修改 JS 并手动将该信息插入到发送的内容中。我们可以通过以下方式使用 .serializeArray()
来做到这一点:
$('form#schuma input[type=submit]').click(function () {
var contents = $(this).closest('form').serializeArray();
contents.push({name: "submit", value: this.value});
$.ajax({
url: 'form_handler.php',
type: 'POST',
data: contents,
dataType: 'JSON',
success: function (data) {
console.log(data);
// your other code
}
});
return false;
});
我认为最好给出相同的名称:
<input id="btnAdd" type="submit" name="submit" value="Add" />
<input id="btnDel" type="submit" name="submit" value="Delete" />
在 PHP 中,您可以检查:
if (isset($_POST["submit"]) && $_POST["submit"] == "Add") {
// Do add
} elseif (isset($_POST["submit"]) && $_POST["submit"] == "Delete") {
// Do delete
}