Question

我下载了这个多步骤格式http://codepen.io/atakan/pen/gqbIz，但每当我尝试使用动态表单代码时，它都无法添加新元素，而是提交表单。我用于动态表单的代码是

var lastAdded;
var counter = 1;
var limit = 12;
function addFp(spanName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newspan = document.createElement('span');
          newspan.innerHTML = "<br><select name='w_1_imp"+(counter+1)+"' class=''><option value='imp1'>Animal - Desi Plough</option><option value='imp2'>Animal - Mouldboard Plough</option><option value='imp3'>Animal - Disc Harrow</option><option value='imp4'>Bakhar Blade</option><option value='imp5'>MB Plough</option><option value='imp6'>Puddler</option><option value='imp7'>Disc Plough</option><option value='imp8'>Disc Harrow</option><option value='imp9'>Paddy Harrow</option><option value='imp10'>Rotavator</option><option value='imp11'>Ridger</option><option value='imp12'>Power Tiller</option><option value='imp13'>Animal - Three tyne cultivator</option><option value='imp14'>Cultivator</option></select> <input type='text' name='w_1_h"+(counter+1)+"' placeholder='Hours' class='' size='2'> <input type='text' name='w_1_t"+(counter+1)+"' placeholder='Times' class='' size='3'>"
document.getElementById(spanName).appendChild(newspan);
counter++;
lastAdded = newspan;
     }
}
function deleteLastAdded () {
  if (lastAdded) {
    lastAdded.remove();
    counter--;
  }
}

我打电话和使用javascript的页面：

<script src="./assets/js/field_preparation.js"></script>

<div class="form-top">
                                        <div class="form-top-left">
                                            <h3>Field preparation:</h3>
                                            <p>Step 2 / 10</p>
                                        </div>
                                        <div class="form-top-right">
                                            <i class="fa fa-user"></i>
                                        </div>
                                    </div>
                                    <div class="form-bottom">
                                        <div class="form-group">
                                        <table>
                                            <tr><td><b>Tractor Horse Power </b></td><td><b> :</b> </td><td><input type="text" name="tractor1" placeholder="HP" class="" size="8"></td></tr>
                                            <tr><td><b>Bullocks </td><td> <b>:</b></td></b></td><td><input type="text" name="bullock1" placeholder="How many" class="" size="8"></td></tr>
                                            <tr><td><b>No. of Man Hours </b></td><td> <b> : </b></td><td><input type="text" name="human1" placeholder="Men" class="" size="8"></td></tr>
                                            </table>
                                                <span id="dynamicFp">
                                                    <select name="w_1_imp1" class="" width="8">
                                                    <option value="imp1">Animal - Desi Plough</option>
                                                    <option value="imp2">Animal - Mouldboard Plough</option>
                                                    <option value="imp3">Animal - Disc Harrow</option>
                                                    <option value="imp4">Bakhar Blade</option>
                                                    <option value="imp5">Animal - Three tyne cultivator</option>
                                                    <option value="imp6">Puddler</option>
                                                    <option value="imp7">Disc Plough</option>
                                                    <option value="imp8">Disc Harrow</option>
                                                    <option value="imp9">Paddy Harrow</option>
                                                    <option value="imp10">Rotavator</option>
                                                    <option value="imp11">Ridger</option>
                                                    <option value="imp12">Power Tiller</option>
                                                    <option value="imp13">MB Plough</option>
                                                    <option value="imp14">Cultivator</option>

                                                </select>
                                                    <input type="text" name="w_1_h1" placeholder="Hrs" class="" size="2">
                                                    <input type="text" name="w_1_t1" placeholder="Times" class="" size="3">
                                                </span>
                                            <br><center>
                                            <input type="image" src="./assets/img/plus.png" border="0" width="30px" value="Add Implement" onClick="addFp('dynamicFp');">
                                            <input type="image" src="./assets/img/cancel.png" border="0" width="30px value="Delete last added" onClick="deleteLastAdded();">
                                            <center></center>
                                            <div></div>

                                            <button type="button" class="btn btn-previous">Previous</button>
                                        <button type="button" class="btn btn-next">Next</button>
                                    </div>

你能帮帮我吗？ Screenshot

我想要的是在工具下拉字段旁边添加删除按钮，然后使用相同的字段来处理结果。谢谢另外，在上面的表格中，我需要在每一步都有动态字段。那么，任何人都可以提供代码。感谢

Answer 1

'image'输入类型实际上是一个提交按钮...... 参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

这就解释了为什么提交表格。考虑使用按钮，链接（a）或其他元素类型，它应该可以正常工作！

未添加到动态表单的新元素

1 个答案: