使用下拉提交按钮发布两种形式之一

我试图发布两组不同的混合值。每个表单将共享一些用户提交的文字，如姓名和电子邮件。使用下拉提交按钮发布两种形式之一

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

这将是理想的选择两个表格之间的下拉并提交。

来源

2013-04-25 eddiejason

好，只用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事件和隐藏的形式被默认的。这将导致这样的事情：

<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-25 20:16:49 Julian

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

通过使用你自己的例子，这应该为你工作：

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

这是促成这件事情（使用jQuery）的JavaScript：

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

的例子也可作为一个的jsfiddle： https://jsfiddle.net/k1jf4b4L/

希望它可以帮助一点

来源

2016-09-09 11:40:57 codelock

使用下拉提交按钮发布两种形式之一

回答

相关问题