javascript - 显示某些字段时表单不会提交

Question

我正在尝试创建一个下拉菜单，允许用户选择他们想要登录的区域。目前，下拉功能可以隐藏用户未登录的区域，并仅显示他们选择的区域。仅使用不带下拉菜单的表单效果很好，可以打开一个新窗口，同时还可以将用户登录到系统。但是，当我添加下拉菜单并将表单包围在标签中时，它允许我输入数据但不处理数据。

如果可能的话，我还想让表单在当前浏览器窗口中打开一个新选项卡(而不是在一个全新的窗口中)。

-除了那些无关紧要的事情之外，我根本无法更改表格，因为它们是从外部来源提供给我的。

这是我的代码:

$(document).ready(function() {
  toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
  //this will call our toggleFields function every time the selection value of our repository field changes
  $("#member").change(function() {
    toggleFields();
  });

});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
  if ($("#member").val() == 1)
    $("#depo").show();
  else
    $("#depo").hide();
  if ($("#member").val() == 2)
    $("#records").show();
  else
    $("#records").hide();
  if ($("#member").val() == 3)
    $("#reporter").show();
  else
    $("#reporter").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="member" name="member">
  <option value="0">---</option>
  <option value="1">Deposition Repository</option>
  <option value="2">Records Repository</option>
  <option value="3">Reporter Area</option>
</select>

<div id="depo">
  <p>Login to Access your Deposition Repository</p>
  <p>
    <script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
    <form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/rbweb/attorney/WC_00LG_PTA.asp">
      User ID:
      <input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
      <input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
      <INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
      <INPUT type="hidden" name="appname" value="">
      <INPUT type="hidden" name="os" value="">
    </form>
  </p>
</div>

<div id="records">
  <p>Login to Access your Records Repository.</p>
  <p>
    <script type="text/javascript" src="http://clients.texasdepos.com/mrweb8/library/js/W0_0000_PTA.js"></script>
    <form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/mrweb8/WC_00LG_PTA.asp">
      User ID:
      <input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
      <input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
      <INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
      <INPUT type="hidden" name="appname" value="">
      <INPUT type="hidden" name="os" value="">
    </form>
  </p>
</div>

<div id="reporter">
  <p>Login to the Reporter Area.</p>
  <p>
    <script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
    <form name="frmrbwebreporter" method="post" action="http://clients.texasdepos.com/rbweb/reporter/WR_00LG_PTA.asp">
      User ID:
      <input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
      <input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
      <INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
      <INPUT type="hidden" name="appname" value="">
      <INPUT type="hidden" name="os" value="">
    </form>
  </p>
</div>

任何帮助将不胜感激!

Answer 1

您的代码存在一些问题，每个问题都可能单独导致此类问题。

您的主要问题是名称和 ID 重复。 IE。您有 3 个名为 frmrbwebattorney 的表单并且所有提交按钮的 ID 均为 btnptarbweb 。当您调用document.frmrbwebattorney时，很可能得到了错误的形式。

简单的解决方案:替换您的 <input type="button" ...>与 <input type="submit" ...>并删除 onclick从他们。因此你的按钮将如下所示:

<input type="button"
       value="Log In" 
       style="font-size:11px; width:64px"
       id="something-unique"
       name="btnptarbweb" />

另请注意:您不能拥有多个样式属性。我将它们合二为一。