Question

我一直无法创建自定义的逐步表单。我在一个页面上有8种不同的表单，每个步骤完成后，每个表单都使用CSS隐藏。我在这里做了一些研究，但我发现的所有帖子都涉及单独提交每个表格。我遇到的问题是同时发布所有表单。我的HTML看起来基本上是这样的：

<form  method="post" action="">
  <h1>Choose an animal</h1>
  <label for="step1-a">
    Dog<input id="step1-a" value="dog" type="radio" name="step1">
  </label>
  <label for="step1-b">
    Owl<input id="step1-b" value="owl" type="radio" name="step1">
  </label>
  <label for="step1-c">    
    Moose<input id="step1-c" value="moose" type="radio" name="step1">
  </label>
  <input id="submit-button" type="submit" value="I'm hidden">
</form>
<form method="post" action="">
  <h1>Next, choose a color</h1>
  <label for="step2-a">
    Red<input id="step2-a" value="red" type="radio" name="step2">
  </label>
  <label for="step2-b">
    Green<input id="step2-b" value="green" type="radio" name="step2">
  </label>
  <label for="step2-c">    
    Blue<input id="step2-c" value="blue" type="radio" name="step2">
  </label>
  <input id="submit-button" type="submit" value="I'm hidden">
</form>
<label for="submit-button>Submit All</label>

上面的代码将获得第一个结果，但没有别的。我正在使用PHP：

<?php
  echo "You chose " . $_POST['step1']."and ".$_POST['step2'].". Well done.";
?>

这给出了以下结果：

You chose dog and . Well done.

我怎样才能发布所有表格？我做错了吗？谢谢！

Answer 1

您可以使用ajax。

form.php的

<?php if(isset($_POST['step1'])&&isset($_POST['step2'])&&isset($_POST['step3'])){
  echo "You chose " . $_POST['step1']." and ".$_POST['step2']." and ".$_POST['step3'].". Well done.";die;
}?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"0"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Data form</title>
</head>
<script>
$(document).ready(function(){
    $("a.btn").click(function(){
        var datastring = $("#form1").serialize();
        datastring +="&" + $("#form2").serialize();
        datastring +="&" + $("#form3").serialize();
        $.ajax({
            type: "POST",
            url: "form.php",
            data: datastring,
            success: function(data) {
                console.log(data);
                alert(data);
            },
            error: function() {
                alert('error handing here');
            }
        });
    });
});

</script>
<body>
<form id="form1">
 <input name="step1" value="1" type="text"/>
</form>
<form id="form2">
 <input name="step2" value="2" type="text"/>
</form>
<form id="form3">
 <input name="step3" value="3" type="text"/>
</form>
 <a class="btn btn-success">Submit All</a>
</body>
</html>

Answer 2

$_POST['step2']

您没有任何名称为＆＃39; step2＆＃39;的字段。在你的表格上。尝试将其更改为＆＃39; step1＆＃39;或更改第二种形式的字段名称。

Answer 3

它不可用，因为HTTP不支持它。

使用JavaScript收集所有输入并提交。
将两种形式合二为一。

使用PHP同时在一个页面上提交多个表单

3 个答案:

您可以使用ajax。

form.php的