新しい要素が動的フォームに追加されない

Question

この多段階フォームhttp://codepen.io/atakan/pen/gqbIzをダウンロードしましたが、動的フォームコードを使用しようとすると、新しい要素が追加されず、代わりにフォームが送信されます。 私はダイナミックなフォルムに使用するコードは、私が呼び出しとJavaScriptを使用していたところから

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--; 
    } 
} 

ページです：

<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

「画像」入力タイプは、実際に送信ボタンです... 参考：それはフォームを送信している理由https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image

だからそれは説明しています。代わりにボタン、リンク（a）または他の要素タイプを使用することを検討してください。