一个表单中的两个按钮


Two buttons in one form

我正在尝试在一个表单中使用两个提交按钮。听起来不难...我也是这么想的。似乎提交按钮的变量不会被发送。只需一个按钮即可正常工作,或者按钮没有区别。

该消息.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
}