Question

我正在尝试发布两组不同的混合值。每个表单将共享一些用户提交的文本，如姓名和电子邮件。

<form method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join1"/>
</form>

<form method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
<input type="submit" name="submit" value="join2"/>
</form>

<possible dropdown>

最好在两个表单之间选择Dropdown并提交。

Answer 1

好吧，只使用html你会遇到问题，因为提交按钮只提交自己的表单。拥有其他形式的表格也是无效的。

然而，使用javascript实现目标是一种技巧！

只需一点功能即可隐藏除一个以外的所有其他形式：

function showform(index){
    var forms = document.forms;
    for(var i=0;i<forms.length;i++)
        forms[i].style.display=(i==index?"block":"none");
}

然后，您只需在下拉列表中添加onchange-event并默认隐藏其中一个表单。这将导致类似这样的事情：

<html>
<head>
<style language="css" type="text/css">
    form input{display:block;width:100px;}
</style>
<script language="javascript" type="text/javascript">
function showform(index){
    var forms = document.forms;
    for(var i=0;i<forms.length;i++)
        forms[i].style.display=(i==index?"block":"none");
}
</script>
</head>
<body>

<select onchange='showform(this.selectedIndex);'>
<option>form1</option>
<option>form2</option>
</select>

<form  method="post" action="url1">
<input type="hidden" name="donate" value="food"/>
<input type="hidden" name="days" value="30"/>
<input type="text" name="cans" value="5"/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join1"/>
</form>

<form id='form2' style='display:none' method="post" action="url2">
<input type="hidden" name="donate" value="shoes"/>
<input type="text" name="pairs" value="2"/>
<input type="text" name="style" value=""/>
<input type="text" name="full_name" value=""/>
<input type="text" name="email" value=""/>
<input type="submit" name="submit" value="join2"/>
 </form>

</body></html>

如果您不喜欢javascript，则需要在php中使用select元素的附加表单并仅插入所需的表单（或隐藏其他表单）。

Answer 2

我已经看到了计划多表单设置方式的一些设计问题，有更好的技术可以解决这个问题 - 但我会尝试帮助您使用自己的技术。

通过使用您自己的示例，这应该适合您：

$(function() {

$("#arvo").click(function() {

    var koodi = randomIntFromInterval(1,9);

    if ($('#kaytetyt > pre:contains(' + koodi + ')').length > 0) {

        $("#console").append("<pre class='red'>" + koodi + " is used, randoming new one</pre>");

        do {
            koodi = randomIntFromInterval(1,9);
        } while ($('#kaytetyt > pre:contains(' + koodi + ')').length > 9);

        $("#kaytetyt").append("<pre class='new'>" + koodi + "<pre>");
        $("#console").append("<pre class='new'>" + koodi + "</pre>");

    } else {
        $("#console").append("<pre>" + koodi + "</pre>");
        $("#kaytetyt").append("<pre>" + koodi + "</pre>");
    }
});

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

});

这是实现它的javascript（使用jQuery）：

<form id="join1" method="post" action="url1">
<input type="hidden" name="donate" value="food">
<input type="hidden" name="days" value="30">
<input type="text" name="cans" value="5">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>

<form id="join2" method="post" action="url1">
<input type="hidden" name="donate" value="shoes">
<input type="text" name="pairs" value="">
<input type="text" name="style" value="">
<input type="text" name="full_name" value="">
<input type="text" name="email" value="">
</form>

<select id="formList">
<option value="">Select form..</option>
<option value="join1">Join1</option>
<option value="join2">Join2</option>
</select>
<button id="submitBtn">Submit</button>

该示例也可用作jsfiddle： https://jsfiddle.net/k1jf4b4L/

希望它有所帮助

使用下拉提交按钮发布两个表单中的一个

2 个答案: