HTML表单和javascript---在同一个表格中显示不同的表单
Posted
技术标签:
【中文标题】HTML表单和javascript---在同一个表格中显示不同的表单【英文标题】：HTML form and javascript---show different form in same table 【发布时间】：2015-06-25 22:32:22 【问题描述】：我在一个 html 表格中有 4 个表单，使用 4 个按钮来调用表单。
HTML：
<div id="myAccordion">
<table id="edit"
class="table table-striped table-bordered table-hover table-condensed table-nonfluid1 thumbnail">
<tbody>
<tr>
<td width=50%>
<button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
id="cpass"
onclick="document.getElementById('col').style.display = 'inline'">form1
</button>
</td>
<td width=50%>
<button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
id="cinfo"
onclick="document.getElementById('col').style.display = 'inline'">form2
</button>
</td>
</tr>
<tr>
<td width=50%>
<button type="button" class="btn btn-info btn-lg" data-parent="#myAccordion"
id="cmail"
onclick="document.getElementById('col').style.display = 'inline'">form3
</button>
</td>
<td width=50%>
<button type="button" class="btn btn-primary btn-lg" data-parent="#myAccordion"
id="cplace"
onclick="document.getElementById('col').style.display = 'inline'">form4
</button>
</td>
<tr>
<td colspan="2" style="display:none;" id="col">
<div id="form1" class="collapse">
<form method="POST" action="updatepassc.php" novalidate="novalidate" id="1">
<div class="form-group">
<label for="oldpassword" class="control-label ">1:</label>
<input type="password" class="form-control" id="oldpassword"
name="oldpassword">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="newpassword" class="control-label ">2:</label>
<input type="password" class="form-control" id="newpassword"
name="newpassword">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="newpassword1" class="control-label ">3:</label>
<input type="password" class="form-control" id="newpassword1"
name="newpassword1">
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block">yes</button>
</form>
</div>
<div id="form2" class="collapse">
.
<form method="POST" action="updateinfo.php" novalidate="novalidate">
<div class="form-group">
<label for="newinfo" class="control-label ">2</label>
<textarea class="form-control" rows="3" id="newinfo"
name="newinfo">></textarea>
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block">yes</button>
</form>
</div>
<div id="form3" class="collapse">
.
<form method="POST" action="updateinfo.php" novalidate="novalidate">
<div class="form-group">
<label for="newinfo" class="control-label ">3</label>
<textarea class="form-control" rows="3" id="newinfo"
name="newinfo">></textarea>
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block">3</button>
</form>
</div>
<div id="form4" class="collapse">
.
<form method="POST" action="updateinfo.php" novalidate="novalidate">
<div class="form-group">
<label for="newinfo" class="control-label ">4</label>
<textarea class="form-control" rows="3" id="newinfo"
name="newinfo"></textarea>
<span class="help-block"></span>
</div>
<button type="submit" class="btn btn-success btn-block">yes</button>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
我想在 (td id="col") 中显示不同的表单，但它有一个错误，它会同时显示两个表单。我想要如果我点击一个按钮，将打开一个表单，另一个表单将关闭。例如，如果表单 1 打开，则表单 2、3、4 将关闭
这是javascript代码：
<script type="text/javascript">
$(document).ready(function ()
$('#cpass').click(function ()
$('#form1').collapse('show');
if ($('#form2').is(':visible'))
$('#form2').collapse('hide');
);
$('#cinfo').click(function ()
$('#form2').collapse('show');
if ($('#form1').is(':visible'))
$('#form1').collapse('hide');
);
$('#cmail').click(function ()
$('#form3').collapse('show');
if ($('#form4').is(':visible'))
$('#form4').collapse('hide');
);
$('#cplace').click(function ()
$('#form4').collapse('show');
if ($('#form3').is(':visible'))
$('#form3').collapse('hide');
);
);
jsfiddle
我该如何解决这个问题？
【问题讨论】：
不要将<script> 放在 jsfiddle 的 Javascript 面板中，它会自动为您完成。
当我修复它时它可以工作：jsfiddle.net/barmar/oe8035os/1
顺便说一句：***.com/questions/359732/…
你为什么同时使用内联onclick属性和Javascript.click()函数？
为什么需要检查？把它们全部关闭。如果它已经关闭，什么都不会发生。
【参考方案1】：
用 slideUp 和 slideDown 更新了 jQuery 代码。它一次只打开一个表格。还为所有表单添加一个通用的有意义的类名，这样您就可以在不显式使用多个 id/class 的情况下调用 hide/sildeUp
$(document).ready(function ()
$('#cpass').click(function ()
$('#form1').slideDown();
$('#form2,#form3,#form4').slideUp();
);
$('#cinfo').click(function ()
$('#form2').slideDown();
$('#form1,#form3,#form4').slideUp();
);
$('#cmail').click(function ()
$('#form3').slideDown();
$('#form1,#form2,#form4').slideUp();
);
$('#cplace').click(function ()
$('#form4').slideDown();
$('#form1,#form2,#form3').slideUp();
);
);
编辑：删除内联 onclick 和 css 以保持 html 干净
fiddle
【讨论】：
这是一种更简洁的方法。【参考方案2】：虽然有一些方法可以简化你的 JS 代码，但我会保留一般格式并稍微修改一下以达到效果。请注意，您可以使用逗号来选择多个 div 对象。
您可以通过添加类似 rkamath 建议的动画来使代码更简洁。他提供了幻灯片效果。为了您的方便，这里还有一个淡入淡出效果：
$(document).ready(function ()
$('#cpass').click(function ()
$('#form2,#form3,#form4').hide();
$('#form1').fadeIn();
);
$('#cinfo').click(function ()
$('#form1,#form3,#form4').hide();
$('#form2').fadeIn();
);
$('#cmail').click(function ()
$('#form4,#form2,#form1').hide();
$('#form3').fadeIn();
);
$('#cplace').click(function ()
$('#form3,#form2,#form1').hide();
$('#form4').fadeIn();
);
);
这是fiddle。
如果您真的想在此处保留代码的一般结构，则可以：
$('#cpass').click(function ()
$('#form1').collapse('show');
if ($('#form2,#form3,#form4').is(':visible')) $('#form2,#form3,#form4').collapse('hide');
);
$('#cinfo').click(function ()
$('#form2').collapse('show');
if ($('#form1,#form3,#form4').is(':visible'))
$('#form1,#form3,#form4').collapse('hide');
);
$('#cmail').click(function ()
$('#form3').collapse('show');
if ($('#form4,#form2,#form1').is(':visible'))
$('#form4,#form2,#form1').collapse('hide');
);
$('#cplace').click(function ()
$('#form4').collapse('show');
if ($('#form3,#form2,#form1').is(':visible'))
$('#form3,#form2,#form1').collapse('hide');
);
这里是fiddle。
【讨论】：
当我在我的网站中使用 hide() 时，表单无法显示，只显示一个空不需要第 1 行和第 24 到 26 行（正在犯错误）
);
Updated Fiddle
【讨论】：
他的小提琴中的那些行没有问题。错误是因为<script> 行。他发布了一个没有那个的新小提琴链接。
是的，我意识到这一点。我打的是 23 而不是 24。以上是关于HTML表单和javascript---在同一个表格中显示不同的表单的主要内容，如果未能解决你的问题，请参考以下文章
使用Javascript将文本从表单放入表中，当我单击按钮时它会消失
HTML表单和javascript---在同一个表格中显示不同的表单