0

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

<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>

最好在两个表单之间进行下拉选择并提交。

4

2 回答 2

0

好吧，仅使用 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 中通过为选择元素使用附加表单并仅插入想要的表单（或隐藏其他表单）来执行此操作。

于 2013-04-25T20:16:49.343 回答
0

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

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

<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>

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

$('#submitBtn').on('click',function(){
    var selectedForm = $('#formList').val();
    if(selectedForm){
        $('#'+ selectedForm).submit();
    }
});

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

希望它有点帮助

于 2016-09-09T11:40:57.020 回答