Динамически добавить выпадающие и выпадающие поля

Question

EDIT 001:

добавил: - event.preventDefault(); и якоря вместо кнопки

<div class="edit-area"> 
<div class="controls"> 
    <a href="#" class="add">+</a> 
    <a href="#" class="rem">-</a> 
</div> 
</div> 

Теперь страница + или - не сделать страницу отправить форму, но теперь он ничего не делает: s

---

Я работаю над контактной формой, но у меня есть несколько проблем/вопросов.

• Я хочу, чтобы динамически добавлять поля, когда они нажимают кнопку (+)
• и, конечно, они должны быть в состоянии удалить это, когда это необходимо ... (-)

Когда я нажмите кнопку + теперь он пытается действовать, как кнопки отправки и отправляет форму ...

Script

<script> 
     (function($) { 
      "use strict"; 

      var itemTemplate = $('.example-template').detach(), 
       editArea = $('.edit-area'), 
       itemNumber = 1; 

      $(document).on('click', '.edit-area .add', function(event) { 
       var item = itemTemplate.clone(); 
       item.find('[project]').attr('project', function() { 
       return $(this).attr('project') + '_' + itemNumber; 
      }); 
      ++itemNumber; 
      item.appendTo(editArea); 
     }); 

     $(document).on('click', '.edit-area .rem', function(event) { 
      editArea.children('.example-template').last().remove(); 
     }); 

     $(document).on('click', '.edit-area .del', function(event) { 
      var target = $(event.target), 
      row = target.closest('.example-template'); 
      row.remove(); 
     }); 

    }(jQuery)); 
</script> 

HTML

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact"> 
    <div class="row uniform 50%"> 
     <div class="6u 12u(mobilep)"> 
      Your personal card number 
      <input type="text" name="card2" id="card" value="<?php echo $_SESSION['username']; ?>" placeholder="Card Number" readonly/> 
     </div> 
     <div class="6u 12u(mobilep)"> 
      Your name 
      <input type="text" name="name2" id="name" value="<?php echo $_SESSION['realName']; ?>" placeholder="Your name" readonly/> 
     </div> 
    </div> 
    <div class="row uniform 50%"> 
      <div class="6u 12u(narrower)"> 
       Order tickets for a project. 
      </div> 
    </div> 
<div class="example-template"> 
    <div class="row uniform 50%" id="readroot"> 
      <div class="4u 12u(narrower)"> 
      <select name="project" id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))"> 
      <option disabled selected>Select a project</option> 
       <option value="Smile">Project Smile</option> 
       <option value="Sand">Project Sand</option> 
       <option value="Schmuck">Project Schmuck</option> 
      </select> 
      </div> 
      <div class="4u 12u(narrower)"> 
      <select id="ddl2" name="date"> 
        <option disabled selected>Select a date</option> 
      </select> 
      </div> 
      <div class="2u 12u(narrower)"> 
      <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' name="amount" id="currentamount" value="" placeholder="Amount" /> 
      </div> 
     </div> 
     <div class="edit-area"> 
     <div class="controls"> 
      <button class="add">+</button> 
      <button class="rem">-</button> 
     </div> 
    </div> 
    <div class="row uniform 50%"> 
     <div class="6u 12u(mobilep)"> 
      <input type="hidden" id="currentprice" value="10" /> 
     </div> 
    </div>   
     <div class="6u 12u(mobilep)"> 
      <input type="hidden" id="nextprice1" value="10" placeholder="" /> 
     </div> 
    </div> 
    <div class="row uniform"> 
     <div class="12u"> 
     </div> 
    </div> 
     <div class="4u 12u(mobilep)"> 
     Total price.(In EUR) 
     <input type="text" name="total2" id="total" value="" readonly/> 
    </div> 

    <div class="row uniform"> 
     <div class="12u"> 
      <ul class="actions align-center"> 
       <li><input type="submit" name="submit"value="Place Order"/></li> 
      </ul> 
     </div> 
    </div> 
</form> 

Изображение вида (идентификатор и имя не показаны)

Answer 1

Измените кнопки якорей:

<a href="#" class="add">+</a> 
<a href="#" class="rem">-</a> 

И затем в вашем javascript, при нажатии, обязательно вызовите preventDefault(), чтобы он не вел себя как стандартная ссылка.

$(document).on('click', '.edit-area .rem', function(event) { 
    event.preventDefault(); 
    editArea.children('.example-template').last().remove(); 
}); 

$(document).on('click', '.edit-area .del', function(event) { 
    event.preventDefault(); 
    var target = $(event.target), 
    row = target.closest('.example-template'); 
    row.remove(); 
}); 

Я думаю, что в качестве альтернативы, вы можете добавить type к кнопке, так что не по умолчанию к submit типа (но не цитируйте меня на этом):

<button type="button" class="add">+</button>