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

Question

EDIT:

Благодаря mohd afzal он создает выпадающие, но я до сих пор есть несколько ошибок:

• раскладка не точно, как это должно быть (см. изображение)
• Второе выпадающее меню не отвечает после того, как вы выбрали значение в первом.

---

Я следовал за этим, и она работает, но дает мне разные проблемы. (Add multiple fields to form)

Актуальных проблемы:

• я получаю поле ввода текста вместо выпадающего меню х я создал
• Перепутались планировка (фото) (мне нужно дополнительные поля я быть мое dropdownboxes и поле количества должно быть с тем же кодом, так что только числа разрешенных)
• идентификатор и REALNAME не показаны на изображениях, чтобы не допустить, чтобы имена показанного

Изображение формы перед тем, как нажать «добавить еще».

Б Код:

Jquery

<script> 
$(function() { 
    $("#addMore").click(function(e) { 
     e.preventDefault(); 
     $("#fieldList").append("<li>&nbsp;</li>"); 
     $("#fieldList").append("<li><input type='text' name='ddl[]' placeholder='Choose a project' /></li>"); 
     $("#fieldList").append("<li><input type='text' name='ddl2[]' placeholder='Choose a date' /></li>"); 
     $("#fieldList").append("<li><input type='text' name='amount[]' placeholder='Amount' /></li>"); 
    }); 
}); 
</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="row uniform 50%" id="fieldList"> 
     <div class="4u 12u(narrower)"> 
      <select name="ddl[]" 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="ddl2[]"> 
        <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="amount[]" value="" placeholder="Amount" /> 
     </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

<form action="<? echo $_SERVER['PHP_SELF']; ?>" method="POST" name="contact"> 

    <div class="row uniform 50%"> 
     <div class="6u 12u(narrower)"> 
      Order tickets for a project. 
     </div> 
    </div> 
    <div class="row uniform 50%" id="fieldList"> 
     <div class="4u 12u(narrower)"> 
      <select name="ddl10" id="ddl10" onchange="configureDropDownLists(this,document.getElementById('ddl20'))"> 
       <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="ddl20" name="ddl20"> 
        <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="amount0" id="amount0" value="" placeholder="Amount" /> 
     </div> 
    </div> 
    <div class="row uniform"> 
     <div class="12u"> 
     </div> 
    </div> 
    <input type='button' id='addMore' value='Add more'> 
     <div class="4u 12u(mobilep)"> 
      Total price.(In EUR) 
      <input type="text" name="total0" id="total0" 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> 













$(function() { 
      var count=0; 
      $("#addMore").click(function(e) { 
       e.preventDefault(); 
       count=count+1; 
       $("#fieldList").append("<li>&nbsp;</li>"); 
       $("#fieldList").append("<li>" 
       +"<select name='ddl1" + count + "' id='ddl1" + count + "' >" 
       +'<option>Select a project</option>' 
       +'<option value="Smile">Project Smile</option><option value="Sand">Project Sand</option>' 
       +'<option value="Schmuck">Project Schmuck</option></select>' 
       +'</li>'); 

       $("#fieldList").append("<li>" 
       +"<select id='ddl2" + count + "' name='ddl2" + count + "'>" 
       +'<option>Select a date</option></select>' 
       +"</li>"); 
       $("#fieldList").append("<li><input type='text' name='amount" + count + "' placeholder='Amount' /></li>"); 
      }); 
     }); 

Answer 2

Вы добавляете элемент li поля # fieldList, которого нет (только кнопка «Разместить заказ» окружена ли). Я бы сказал, обернуть три входных элемента в div и клон, которые div при необходимости.

Вот пример для вас perfectionize:

var $addButton = $('#add-dynamic-field'); 
 
var $dynamicFields = $('#dynamic-fields').find('.dynamic-field'); 
 

 
$addButton.click(function() { 
 
    // Clone the last '.dynamic-field' div and insert it 
 
    $dynamicFields.last().clone().insertAfter($(this)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="" method="POST" name="contact"> 
 
<div class="row uniform 50%" id="dynamic-fields"> 
 
    <div id="add-dynamic-field">Add a new field!</div> 
 
    <div class="dynamic-field"> 
 
     <div class="4u 12u(narrower)"> 
 
      <select name="ddl[]" 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="ddl2[]"> 
 
       <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="amount[]" value="" placeholder="Amount" /> 
 
     </div> 
 
    </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>