Javascript onclick Button Display Form Fields

Я создал форму с использованием Javascript и HTML, и то, что я хотел бы получить, - это когда пользователь нажимает кнопку «Добавить элемент» после заполнения полей формы по умолчанию второй строки под полями первой формы отображается с теми же точными полями формы, которые отображаются в первом. По существу, позволяя пользователю добавлять X количество элементов в «пакет», используя те же поля формы, которые использовались в первом. Попытка объяснить как можно лучше. В настоящее время код, который я предоставляю, отображает DIV с образцом текста, чтобы моя голова обернулась вокруг того, что я хочу. Я новичок в Javascript, но хочу, чтобы мои руки были грязными. Любая помощь будет оценена по достоинству.Javascript onclick Button Display Form Fields

Pick a Collection: 
<select id="slct1" name="slct1" onchange="populate('slct1','slct2')"> 
    <option class="array" value="">Lets get started..</option> 
    <option class="array" value="Adirondack">Adirondack</option> 
    <option class="array" value="Ridgeline">Ridgeline</option> 
    <option class="array" value="Horizon">Horizon</option> 
</select> 
Choose an Item: 
<select id="slct2" name="slct2"> 
    <option value=""></option> 
</select> 
Color: 
<select id="slct3" name="slct3"> 
    <option value=""></option> 
    <option value="">1 Solid Color</option> 
    <option value="">Mix and Match</option> 
</select> 
Quantity: 
<select id="slct4" name="slct4"> 
    <option value=""></option> 
    <option value="">1</option> 
    <option value="">2</option> 
    <option value="">3</option> 
    <option value="">4</option> 
    <option value="">5</option> 
    <option value="">6</option> 
</select> 
<br/> 
<div id="theDiv"></div> 
<button id="addItem" onclick="document.getElementById('theDiv').innerHTML='you touched the button'">Add Item</button> 


function populate(s1,s2) { 
var s1 = document.getElementById(s1); 
var s2 = document.getElementById(s2); 
s2.innerHTML = ""; 
    if(s1.value == "Adirondack") { 
     var optionArray = ["|","shoreline|Shoreline Adirondack Chair - AD-0100","fanback|Fanback Adirondack Chair - AD-0101","coastal|Coastal Adirondack Chair - AD-0102", "leftWindsail|Left Windsail Adirondack Chair - AD-0103", "rightwindsail|Right Windsail Adirondack Chair - AD-0104", "roayale|Royale Adionrdack Chair - AD-0105", "folding|Folding Adirondack Chair - AD-0106", "kidz|Kidz Adirondack Chair - AD-0107","shoreline|Shoreline Adirondack Rocker - AD-0110", "fanbackrocker|Fanback Adirondack Rocker - AD-0111", "coastal|Coastal Adirondack Rocker - AD-0112" ]; 
    } else if(s1.value == "Ridgeline") { 
     var optionArray = ["|","rl-0200|Ridgeline High Back Rocker - RL-0200","rl-0201-36|Ridgeline 36 Inch Gliding Bench - RL-0201-36","rl-0201-48|Ridgeline 48 Inch Gliding Bench - RL0201-48","rl-0201-60|Ridgeline 60 Inch Gliding Bench - RL0201-60" ];    
    } else if(s1.value == "Horizon") { 
     var optionArray = ["|","hz-0300|Horizon High Back Rocker - HZ-0300","hz-0301-36|Horizon 36 Inch Gliding Bench - HZ-0301-36","rl-0201-48|Horizon 48 Inch Gliding Bench - HZ-0301-48","hz-0301-60|Horizon 60 Inch Gliding Bench - HZ-0301-60" ];   
    }    
for(var option in optionArray) { 
    var pair = optionArray[option].split("|"); 
    var newOption = document.createElement("option"); 
    newOption.value = pair[0]; 
    newOption.innerHTML= pair[1]; 
    s2.options.add(newOption);  
} 
}

источник

2014-02-18 Luis

Вы можете посмотреть в использовании JQuery и метод .clone(), http://api.jquery.com/clone/ – Popo

я буду смотреть в этот метод хотел бы сохранить это все JavaScript сейчас, но я действительно посмотрит на это – Luis

Вы можете поместить поля формы в div и есть пустой div рядом с ним. На щелчке button, то innerHTML первого div будет скопировано и добавляется (следовательно, оператор +=) к innerHTML второго div. Это должно решить вашу проблему. И, кстати, нежелательно иметь одно и то же значение для более чем одного optionselect (я его не исправил).

<html> 
<head> 
<script type="text/javascript"> 
function add_item(){ 
document.getElementById("div2").innerHTML += document.getElementById("div1").innerHTML; 
} 
function populate(slct){ 
var sels = document.getElementsByTagName("select"); 
var len = sels.length; 
var val = slct.options[slct.selectedIndex].value; 
var optionArray, pair, newOption; 
    for(var i = 0; i < len; i++){ 
     if(slct == sels[i]){ 
     sels[i+1].options.length = 0; 
      if(val == "Adirondack"){ 
      optionArray = [ "|","shoreline|Shoreline Adirondack Chair - AD-0100","fanback|Fanback Adirondack Chair - AD-0101","coastal|Coastal Adirondack Chair - AD-0102", "leftWindsail|Left Windsail Adirondack Chair - AD-0103", "rightwindsail|Right Windsail Adirondack Chair - AD-0104", "roayale|Royale Adionrdack Chair - AD-0105", "folding|Folding Adirondack Chair - AD-0106", "kidz|Kidz Adirondack Chair - AD-0107","shoreline|Shoreline Adirondack Rocker - AD-0110", "fanbackrocker|Fanback Adirondack Rocker - AD-0111", "coastal|Coastal Adirondack Rocker - AD-0112" ]; 
      } 
      else if(val == "Ridgeline"){ 
      optionArray = [ "|","rl-0200|Ridgeline High Back Rocker - RL-0200","rl-0201-36|Ridgeline 36 Inch Gliding Bench - RL-0201-36","rl-0201-48|Ridgeline 48 Inch Gliding Bench - RL0201-48","rl-0201-60|Ridgeline 60 Inch Gliding Bench - RL0201-60" ]; 
      } 
      else if(val == "Horizon"){ 
      optionArray = [ "|","hz-0300|Horizon High Back Rocker - HZ-0300","hz-0301-36|Horizon 36 Inch Gliding Bench - HZ-0301-36","rl-0201-48|Horizon 48 Inch Gliding Bench - HZ-0301-48","hz-0301-60|Horizon 60 Inch Gliding Bench - HZ-0301-60" ]; 
      } 
      for(var option in optionArray) { 
      pair = optionArray[option].split("|"); 
      newOption = document.createElement("option"); 
      newOption.value = pair[0]; 
      newOption.innerHTML= pair[1]; 
      sels[i+1].options.add(newOption);  
      } 
     } 
    } 
} 
</script> 
</head> 
<body onload="add_item();"> 
<div id="div1" style="display:none;"> 
Pick a Collection: 
<select name="slct1[]" onchange="populate(this);"> 
    <option class="array" value="">Lets get started..</option> 
    <option class="array" value="Adirondack">Adirondack</option> 
    <option class="array" value="Ridgeline">Ridgeline</option> 
    <option class="array" value="Horizon">Horizon</option> 
</select> 
Choose an Item: 
<select name="slct2[]"> 
    <option value=""></option> 
</select> 
Color: 
<select name="slct3[]"> 
    <option value=""></option> 
    <option value="">1 Solid Color</option> 
    <option value="">Mix and Match</option> 
</select> 
Quantity: 
<select name="slct4[]"> 
    <option value=""></option> 
    <option value="">1</option> 
    <option value="">2</option> 
    <option value="">3</option> 
    <option value="">4</option> 
    <option value="">5</option> 
    <option value="">6</option> 
</select> 
<br/> 
</div> 
<div id="div2"></div> 
<button type="button" onclick="add_item();">Add Item</button> 
</body> 
</html>

источник

2014-02-18 01:37:19

Эй, это сработало для меня, спасибо, но теперь мои динамические выпадающие действия действуют довольно странно. Я повторно отредактировал свое оригинальное сообщение и предоставил Javascript для заполнения функции для первого элемента выбора. Вы должны попробовать мою форму, а затем добавить элемент, чтобы увидеть, как его влияние. Я попытался свалить его в JSfiddle, но он не отображал мой javascript правильно, я думаю, что это мой массив. Любые предложения, безусловно, будут оценены или любые ссылки/темы заблаговременно. – Luis

См. Мой обновленный ответ. –

Привет, Датта, извините, но позже я смог добавить строку, но мои вещи не сохраняли свои значения для каждого раскрывающегося списка. Черт возьми, я должен приступить к некоторым учебникам. Кажется, у вас хорошая хватка, вы рекомендуете какие-либо учебные материалы? – Luis

Javascript onclick Button Display Form Fields

ответ

Смежные вопросы