javascript-如何在没有jquery的情况下切换一页上的表单？

2022-07-29 09:45:04

这似乎很简单,但是我在任何地方都找不到解决方案.我需要具有选项卡或带有选项的标签,以从一种形式来回切换到另一种形式,并且我的复制/重置按钮可以与正在使用的任何形式一起使用.

这是一个孤独形式的示例,我需要再添加约3个并保持其格式. (我的实际页面具有CSS样式格式,并且还有大约10项需要填写)：

更新：在这里尝试了到目前为止的答案之后,我意识到我还需要一种可以在IE7中运行的方法.

<head>
<title>Form Switching</title>
</head>

<body>

<!-- First Form -->
<form name="data_entry" id="frm" action="#">
  <h2>Form 1</h2>

  <table cellspacing="5" cellpadding="3">
    <tr>
  <td>Name:</td>
      <td><textarea name="name" rows="2" cols="30" id="txt_name"></textarea></td>
    </tr>
    <tr>
      <td>Color:</td>
      <td><select name="color" id="txt_color">
          <option value=""></option>
          <option value="It is red">Red</option>
          <option value="It is blue">Blue</option>
        </select></td>
    </tr>
    <tr>
      <td>Phone Number:</td>
      <td><textarea name="phone" rows="5" cols="30" id="txt_phone"></textarea></td>
    </tr>
    <tr>
      <td>Distance:</td>
      <td><textarea name="distance" rows="1" cols="30" id="txt_distance"></textarea></td>
    </tr>

    <tr> 
      <!--COPY BUTTON-->
      <td><input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy" 
onClick="document.data_entry.holdtext.value = 'Name:&nbsp;' + document.data_entry.name.value + '\n' + 'Color:&nbsp;' + document.data_entry.color.value + '\n' + 'Phone:&nbsp;' + document.data_entry.phone.value + '\n' + 'Distance:&nbsp;' + document.data_entry.distance.value; javascript:selectcopy('data_entry.holdtext');javascript:validateForm()"></td>
      <!--RESET BUTTON-->
      <td><input type="button" style="font-weight:bold;" name="reset_form" value="Reset" onClick="this.form.reset();" /></td>
    </tr>

  </table>


  <!-- Invisible text box that concatenates all the text boxes into one so they can be copied -->
  <TEXTAREA name="holdtext" readonly="readonly" style="height:1px;width:1px;border:0" ID="holdtext"></TEXTAREA>
</form>

<SCRIPT LANGUAGE="JavaScript">

// ---------- Function to copy text to clipboard ----------
    function selectcopy(fieldid)
    {
    var field=document.getElementById(fieldid) || eval('document.'+fieldid)
    field.select()
    if (field.createTextRange)
    {field.createTextRange().execCommand("Copy")}
    }

</SCRIPT>
</body>
</html>

如果需要更多的Javascript,请给我更多有关如何使用它的解释,因为我还没有使用Java的经验,而且我无法使用jquery,因为我只能在我使用的公司计算机上使用它无法下载任何文件到.我正在用记事本编写页面,即使在重新研究jQuery之后也更不用说了,我仍然不知道它的真正作用.

解决方法:

小提琴更新：http://jsfiddle.net/f8Qvd/5/

更新#2现在应该可以在IE7中使用

如果没有jQuery,这并不是很难,尽管我认为您应该在工作中与人们讨论他们的文件下载策略.无论如何,如果您想在没有jQuery的情况下进行操作,只需将所有表单添加到某些div中,并确保将它们全部放入一个不错的容器div中,以使您的生活更轻松.

您还可以制作一个带有链接或可点击div的导航栏(如果需要,可以选择将其样式化为选项卡),并带有对相应表单容器ID的一些引用,例如：

<div id="tab-nav">
    <a href="javascript:;" class="selected" data-container="form-1-container">form1</a>
    <a href="javascript:;" data-container="form-2-container">form2</a>
    <a href="javascript:;" data-container="form-3-container">form3</a>
</div><!-- #tab-nav -->

<div id="awesome-container">
    <div id="form-1-container">first tab</div>
    <div id="form-2-container">second tab</div>
    <div id="form-3-container">third tab</div>
</div><!-- #awesome-container -->

确保为它们提供所有唯一的id属性,并使用一些不错的旧CSS设置最初隐藏的div的样式：

#tab-nav {
    border: 1px solid black;
    width: 400px;
    text-align: center;
}

#tab-nav a {
    margin-left:25px;
    margin-right:25px;
    text-decoration: none;
}

#tab-nav a.selected {
    background: #ccd;
    border: 1px solid #999;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

#awesome-container {
    width:400px;
    height: 300px;
    border: 1px solid blue;
}

#awesome-container div {
    width: 400px;
    height:300px;
    margin:0;
}

#awesome-container #form-1-container {
    background: #ddd;
}
#awesome-container #form-2-container {
    background: #f06;
    display: none;
}
#awesome-container #form-3-container {
    background: #04b;
    display: none;
}

我的天哪,这些标签会很漂亮！

继续…到javascript

码农公寓

相关文章