javascript - php 中的两个操作两个提交按钮？

Question

我有这样的表单标签

sample name:register.php page

<form id="formElem" name="formElem" action="form10.php" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>

</form>

我将此信息发送到下一个 form10.php 页面并在该页面上显示所有 10 个输入值我正在使用 $pd= htmlentities($_POST['pd']); $fname= htmlentities($_POST['fname']); 从中获取值表单标签和这样的 10 个变量，我正在回显那些输入的值成功提交按钮后在 form10.php 文件上。

就像我输入的fname、mname、lname来自form标签并显示在form10.php页面上。

first name <?echo $fname?> 

但现在的问题是用户在表单标记内仅输入 10 个文本框值后就可以看到下一页(form10.php)。但我想为用户提供预览选项，以便用户可以预览填充 1 到 10 个文本框值中的任何一个的下一页。意味着他已填写 fname 和 lname，但未填写其余 8 个字段，他单击预览按钮我想打开 form10_preview.php，与 form10.php 相同，但由于用户仅输入了 fname 和 lname，因此仅回显他提供的那些值.

现在的问题是我怎样才能在一个表单中拥有两个提交按钮和两个操作？

Answer 1

我认为最好在客户端控制表单提交规则。从表单中删除 action，并将按钮类型更改为 button :

<form id="formElem" name="formElem" action="" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button id="register" type="button">Register</button>
<button id="preview" type="button">Preview</button>
</form>

然后让 javascript 控制提交的流程:

var formElem = document.getElementById('formElem'),
    btnSubmit = document.getElementById('register'),
    btnPreview = document.getElementById('preview');

function formSubmit() {
    switch (this.id) {
        case 'register' :
            formElem.action='post10.php';
            break;
        case 'preview' :                    
            formElem.action='preview10.php';
            break;
    }
    formElem.submit();
}

btnSubmit.onclick = formSubmit;
btnPreview.onclick = formSubmit;