个人中心
gpt4 book ai didi

javascript - 寻找一种动态添加包含多个表单项的 div 的方法

转载 作者：行者123 更新时间：2023-11-30 16:16:02 25 4
gpt4 key购买 nike

我的代码在这个 https://jsfiddle.net/tek8b41g/1/ 中列出

我想这样做，以便在我需要另一次“旅行”时可以添加另一个表格，有没有一种简单的方法可以做到这一点？我正在考虑做隐藏的 div，但想知道是否有其他方法。

提前致谢。

HTML:

<body bg=grey>
  <div id="wrap">
    <tr>
      <form method="POST"><br />
        <div id="center">
          <center>Driver Line Input page </center>
        </div>
        <br />
        <div class="centerDynamic">
          <label>
            <input type="radio" name="countyLabel" value="radio" id="countyLabel_0" />Eagle County</label>

          <label>
            <input type="radio" name="countyLabel" value="radio" id="countyLabel_1" />Summit County</label>
            <br />Driver Name: <input name="dNameT1" type="text" value="" size="25" /><br />Trip Time: <input name="tripTimeT1" type="text" value="" size="5" /><br />First Pickup: <input name="firstPickupT1" type="" value="" size="5" /><br />Town: <input name="townT1" type="text" value="" size="25" id="townT1" /><br />
           <label>Transfer during this trip:<input type="radio" name="transferYesT1" value="radio" id="transferGroup_1T1" />Yes</label>
           <label>
             <input name="transferNoT1" type="radio" id="transferGroup_1a" value="radio" checked="checked" />No</label>
              <br />
              <label for="transferDrivera">Transfer Driver</label> <input type="checkbox" name="transferDriverT1" id="transferDrivera" />
              <br />Need Carseat/Booster?<label>
              <input type="radio" name="carseatYesT1" value="radio" id="RadioGroup1_0" />Carseat</label>
              <label><input type="radio" name="boosterYesT1" value="radio" id="RadioGroup1_1" />Booster</label>
              <label><input type="radio" name="noneT1" value="radio" id="RadioGroup1_2" />None</label>
                 <br /><br />
        </div>
       <input type="button" value="Add Another Trip" onClick="addInput('centerDynamic');" />
      </form>
     </tr>
   </div>
 </body>

CSS:

 @charset "utf-8";
 /* CSS Document */

 #wrap { 
 width: 900px; 
 margin: 0 auto; 
 }
 #centerDynamic{
 width: 500px;
 margin: 0 auto;
 }

Javascript:

  var counter = 1;
  var limit = 34;
  function addInput(centerDynamic){
  if (counter == limit) {
     alert("You have reached the limit of adding " + counter + " inputs");
}
   else{
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 
  document.getElementById(centerDynamic).appendChild(newdiv);
     counter++;
  }
  }

最佳答案

复制表单

目标:点击按钮复制表单。

解决方案:利用 cloneNode() 和 appendChild() 方法

问题:总体而言，OP 的功能不足以处理目标。我们将继续探索解决方案，并尝试突出显示存在差异的某些领域，而不是列出问题所在。

HTML

  • #id :OP 的代码没有出现重复的 id，但我之所以提到这一点，是因为这是一个经常出现的常见错误。复制 HTML 时，重要的是要始终记住 should never be any duplicated ids .

  • name :此属性被表单元素广泛使用，并且在与 <input type="radio"> 一起使用时必不可少。 .对于每组单选按钮，我们应该总是分配一个name 到每个单选按钮。这可确保仅从组中选择一个单选按钮。

  • 提示:分配id时和 name至 <form>和表单元素，让它们具有相同的值会更容易(单选按钮除外)。有关简短的公正解释，请参阅此 post .有varying opinions on this topic ，我的看法是，如果你使用相同的 name和 id在每个表单元素上，那么你就有了所有可用的选项，你不必担心你是否使用了正确的选项。请记住，如果可能的话，尽量保留 id和 name简单而实用，尤其是当您打算复制它们并为其编号时。

CSS

假设这只是一个草稿，而不是一个完成的元素，我们不会深入探讨样式的细节。请注意，我对 CSS 进行了重大更改，所以请随意提问或批评。

JS

我真的不能将 OP 的代码视为复制表单，它更像是一个扩展:

结果:

 // up to 34 extra identical inputs that don't match up to the original form.

 <br><input type='text' name='myInputs[]'>

不是很有用。以下是我所看到的有关复制表单主题的细目分类:

  • 使用 JS 复制表单的常用方法是使用方法 cloneNode() 和 appendChild() .

  • 默认 cloneNode()实际上是 cloneNode(false)该参数是一个 bool 值，用于确定克隆的深度。如果设置为 false 或根本不设置，cloneNode()将生成一个浅 副本——所有属性、值，没有子项。设置为 true，将导致深度复制——所有后代、属性和值——一切(有一个异常(exception)——作为事件监听器/绑定(bind)将不会已复制)。

  • 由于复制了所有属性，这也意味着 id以及。我们必须通过收集克隆中的每个元素并为每个元素分配一个唯一的 id 来为此做好准备。 .该演示通过使用以下内容提供了这一点:

演示

JS中有一步一步的注释。我遗漏了一些细节，因为我不想让你休眠。请注意，这不是实现目标的唯一方法，这只是众多方法之一。

Plunker

片段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35517008</title>
<style>
* { vertical-align: baseline; }
h2 { text-align: center; }
.center { margin: 0 auto; }
fieldset { margin: 0 auto; width: 50%; }
fieldset div { float: left; clear: left; }
#btn1 { position: relative; left: 65%; }
input[type="submit"] { float: right; }
input { margin: 0 5px 5px 0; }
label { padding: 0 0 5px 5px; }
input + input { margin-left: 10px; }

</style>
</head>

<body>

  <h2>Driver Line Input Page</h2>
<input id="btn1" class="center" type="button" value="Add Additional Trip" />

    <form id="line1" name="line1" method="post" class="center">
    <fieldset>
    <legend>Line 1</legend>
    <div>
      <label>
        <input type="radio" name="county" value="radio" id="eagle" />
        Eagle County
        <input type="radio" name="county" value="radio" id="summit" />
        Summit County
        </label>
     </div>
     <div>
      <label for="driver">Driver Name:
      <input name="driver" id="driver" type="text" size="25" />
      </label>
      </div>
      <div>
      <label for="time">Trip Time:
      <input name="time" id="time" type="text" size="5" />
      </label>
      <label for="pickup">First Pickup:
      <input name="pickup" id="pickup" type="text" size="5" />
      </label>
      
      <label for="city">City:
      <input name="ciy"  id="city" type="text" size="25" />
      </label>
      </div>
      <div>
      <label>Transfer Enroute:
        <input type="radio" name="trans" id="yes" />
        Yes
     
        <input type="radio" name="trans" id="no" checked />
        No
     </label>
     
      <label for="tDriver">Transfer Driver:
      <input name="tDriver" id="tDriver" />
      </label>
    </div>
    <div>
      <label>Carseat/Booster Request:
   
        <input type="radio" name="child" id="seat" />
        Carseat
     
        <input type="radio" name="child" id="booster" />
        Booster
      
        <input type="radio" name="child" id="none" checked />
        None
        </label>
        </div>
        <input type="submit" id="submit" name="submit"/>

</fieldset>
      <br />
      <br />
      
    </form>


<script>

/* When the "Add Additional Trip" button is clicked ... */
var btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function(e) {
	
	// Collect all forms into a NodeList
  var forms = document.querySelectorAll('form');
	
	// Total number of forms and the new serial number
  var qty = forms.length;
	var step = (qty + 1).toString();
	
	// The original form
  var template = forms[0];
	
	// Make a clone of the original form
  var dupe = template.cloneNode(true);
	
	// Reference the clone's displayed title
	var line = dupe.querySelector('legend');
	
	// Set clone's title to Line {{number}}
	line.innerHTML = "Line "+ step;
	
	// Set clone's id and name to form{{number}}
  dupe.setAttribute('id', 'line'+ step);
	dupe.setAttribute('name', 'line'+ step);
	
	// Collect all of clone's inputs into a NodeList
	var inputs = dupe.querySelectorAll('input');
	
	// Convert the NodeList into an Array
	var inpArray = Array.prototype.slice.call(inputs);
	
	// Iterate through the Array and assign a unique id and name to each one
	for(var i = 0; i < inpArray.length; i++) {
		var inpID = inpArray[i].getAttribute('id');
		var inpName = inpArray[i].getAttribute('name');
		inpArray[i].setAttribute('id', inpID + step);
		inpArray[i].setAttribute('name', inpName + step);
	}
	
	// Place clone after the last form
  document.body.appendChild(dupe);
}, false);
</script>
</body>
</html>

关于javascript - 寻找一种动态添加包含多个表单项的 div 的方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35517008/

25 4 0
文章推荐： javascript - ng-click 事件似乎不会在简单的 Angular 应用程序中触发
文章推荐： javascript - ngRepeat :dupes - Duplicates in a repeater are not allowed
文章推荐： javascript - 上传文件 Node.js Express put 方法
文章推荐： javascript - 从 laravel 5 中的另一个目录获取 Assets
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com