如何在没有jquery的情况下在一个页面上切换表单

How to switch forms on one page without jquery?

本文关键字：一个 表单 jquery 情况下      更新时间：2023-09-26

这似乎很简单，但我在任何地方都找不到解决方案。我需要有选项卡或标签的选项来改变来回从一种形式到另一种，并有我的复制/重置按钮与任何形式正在使用的工作。

下面是一个单独的表单的示例，我需要添加大约3个并保持其格式。(我的实际页面有一个CSS样式格式，并且有大约10个项目要填写):

UPDATE:在实验了答案之后，我已经意识到我也需要一种方法来做到这一点，在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，请给我一点关于如何使用它的更多解释，因为我还没有那么有经验，我没有办法使用jquery，因为我只能在公司的电脑上工作，我无法下载任何文件。我在记事本上写我的页面，更不用说在研究了jQuery之后，我仍然不知道它到底是做什么的。

更新为fiddle: 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:)

编写一个点击处理程序来处理选项卡和导航样式。通常在没有jQuery的情况下，我们只会使用querySelectorAll来制作dom元素列表来进行操作，但遗憾的是它在IE7中不可用，所以:

(function(){
    var clack = function(e){
        
        // IE is whack, apparently
        var e = e || window.event;
        if( e.srcElement ) {
            e.target = e.srcElement;
        };
        
        var divs = document.getElementById("awesome-container").childNodes;
        for (var i = 0; i < divs.length; i++){
            if (divs[i].firstChild !== null) { // ignore text nodes
                divs[i].style.display = "none";
            }
        }
        document.getElementById(e.target.getAttribute("data-container")).style.display = "block";
        var links = document.getElementById("tab-nav").childNodes;
        for (var j = 0; j < links.length; j++) {
            if (links[j].firstChild !== null) { // ignore text nodes
                links[j].className = "";
            }
        }
        e.target.className = "selected";
    };
    var links = document.getElementById("tab-nav").childNodes;
    for (var i = 0; i < links.length; i++) {
        if (links[i].firstChild !== null) { // you get the idea
            links[i].onclick = clack;
        }
    }
})();

那应该能让你走起来!

查看它的实际效果:查看小提琴:http://jsfiddle.net/f8Qvd/5/

相关文章：