Question

我对编码很新，这是我建立的第一个网站，所以如果这很简单或我的代码看起来很差，我会道歉。我已经查看了这个问题的答案，并复制了一些解决方案，试图让它们适用于我的表单。我试图将表单克隆为一个整体，然后使用JavaScript和/或JQuery将克隆的对象变为Wire 2 ... 3..etc。任何帮助表示赞赏。

以下是我找到的表格和解决方案：

  var regex = /^(.+?)(\d+)$/i;
var cloneIndex = $(".clonedInput").length;

function clone(){
    $(this).parents(".clonedInput").clone()
        .appendTo("body")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];
            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
            }
        })
        .on('click', 'button.clone', clone)
        .on('click', 'button.remove', remove);
    cloneIndex++;
}
function remove(){
    $(this).parents(".clonedInput").remove();
}
$("button.clone").on("click", clone);

$("button.remove").on("click", remove);
    </script>

<html>
<body>
<div id="clonedInput1" class="clonedInput">
<center><h1>New WIRE</h1></center>
   
<center><div id="wiregauge" name="wiregauge"> Size of Wire<select name="dropdown" value="">
   <option value="18" var message ="18g">18 gauge</option>
   <option value="16" var message ="16g">16 gauge</option>
   <option value="14" var message ="14g">14 gauge</option>
   <option value="12" var message ="12g" >12 gauge</option>
   <option value="10" var message ="10g">10 gauge</option>
    </select></div></center>
    
  <center><p id="lengthconv">25.4 millimeters equals 1 inch</p></center>
       <div id="wirelength" name="wirelength">
<center><div id="wirel">Length of Wire (in MM)<input type="number" min="152.4" max="2540" id="wireli" name="wireli">
<label for="wirel"></label></div></center>
</div>

    

<center><div id="wirenlid"><label for="wirenlid">Text on LEFT side of the Wire</label><input type="text" name="wirenlid" id="wiretextlinput" value=" ">
</div></center>

    
<center>
 Text reads UP <input type="radio" name="left1" id="lup" value="UP"><br>
 Text reads DOWN <input type="radio" name="left1" id="ldwn"value="DOWN">
</center>
    
<center><div id="wireterml1" >Termination on Left Side<select name="wirelt" id="wiretl"> 
    <option name="fork" value="FORK">Fork</option>
    <option name="ring" value="RING">Ring</option>
    <option name="male disconnect" value="MDIS">Male Disconnect</option>
    <option name="female disconnect" value="FMDIS">Female Disconnect</option>
    </select></div></center>
    
    <center><div id="wirenrid">Text on RIGHT side of the Wire<input type="text" id="wiretextrinput" value=" " name="wirenrid"></div>
       </center>
<center>
   Text reads UP<input type="radio" name="right1" id="rup" value="UP"><br>
 Text reads DOWN <input type="radio" name="right1" id="rdwn" value="DOWN">
</center>
    
    <center><div id="wiretermr1">Termination on Right Side<select name="wirert" id="wirert">
    <option name="fork" value="FORK">Fork</option>
    <option name="ring" value="RING">Ring</option>
    <option name="male disconnect" value="MDIS">Male Disconnect</option>
    <option name="female disconnect" value="FMDIS">Female Disconnect</option>
    </select> </div></center>
    
<center><div id="wirecolor" >Color of Wire<select name="wirencolor" id="wirecolor1">
    <option value="BLACK">Black</option>
  <option value="WHITE">White</option>
  <option value="GRN/YEL">Green/Yellow</option>
  <option value="RED">Red</option>
  <option value="BLUE">Blue</option><option value="PURPLE">Purple</option> <option value="ORANGE">Orange</option><option value="BROWN">Brown</option><option value="YELLOW">Yellow</option><option value="WHT/BLU">White/BLue</option><option value="WHT/ORG">White/ Orange</option><option value="WHT/LTBLU">White/Light Blue</option><option 
  value="GRAY">Gray</option><option value="LTBLU">Light Blue</option>
    </select></div></center>
<!--Types of options needed include: Wire gauge, length, color, printing, and termination... Ring/fork/male disconnect/ female disconnect 18 16 14 12 10 gauge -->
<div class="actions">
   <button class="clone">Clone</button> 
</div>
    </div>
</body>   </html>

以下是Jsfiddle链接：https://jsfiddle.net/CJShult/r44nosx7/

克隆表单并增加ID

0 个答案: