使用Javascript創建基於表單輸入的div的新實例

Question

我有一列用戶可以選擇跟蹤的總線。在HTML看起來像這樣：

<div class="bus-container"> 
    <div class="bus-heading"> 
     <h1>My Buses</h1> 
     <svg width="15px" height="15px" class="add-bus"><use xlink:href="#plus"></use></svg> 
    </div> 
    <form class="hidden"> 
     <select name="company"> 
      <option value="greyhound">Greyhound</option> 
      <option value="zippy">Zippy</option> 
      <option value="carta">Carta</option> 
     </select> 
     <input type="text" name="number" placeholder="Enter Bus Number" /> 
     <input type="text" name="route" placeholder="Enter the route" /> 
     <input type="submit" value="Submit"> 
    </form> 
    <div class="bus active"> 
     <img src="img/greyhound.png" width="100" height="40" /> 
     <p class="bus-number">12345043</p> 
     <p class="route">Jefferson</p> 
    </div> 
    <div class="bus active"> 
     <img src="img/zippy.png" width="100" height="40" /> 
     <p class="bus-number">12345043</p> 
     <p class="route">Jefferson</p> 
    </div> 
    <div class="bus active"> 
     <img src="img/carta.png" width="100" height="4" /> 
     <p class="bus-number">12345043</p> 
     <p class="route">Jefferson</p> 
    </div> 
</div> 

我想知道什麼是使用JavaScript當用戶輸入自己的信息，並點擊提交創建.bus DIV的新實例的最佳途徑。我知道我需要在窗體上調用onsubmit函數，並防止默認點擊提交按鈕本身。但是我對於如何根據用戶的輸入附加新的.bus div非常無知。

Answer 1

嘗試使用所謂的onsubmit處理程序中的form元素的可重複使用的功能，通過select價值，數量和路徑作爲參數

window.onload = function() { 

    function addBus(company, number, route) { 
    var buses = document.querySelectorAll(".bus"); 
    var curr = document.createElement("div"); 
    curr.setAttribute("class", "bus active"); 
    var img = new Image(); 
    img.src = "img/" + company + ".png"; 
    img.width = 100; 
    img.height = 40; 
    var p1 = document.createElement("p"); 
    p1.setAttribute("class", "bus-number"); 
    p1.innerHTML = number; 
    var p2 = document.createElement("p"); 
    p2.setAttribute("class", "route"); 
    p2.innerHTML = route; 
    curr.appendChild(img); 
    curr.appendChild(p1); 
    curr.appendChild(p2); 
    if (buses.length) { 
     buses[buses.length - 1].insertAdjacentHTML("afterEnd", curr.outerHTML) 
    } else { 
     document.forms[0].insertAdjacentHTML("afterEnd", curr.outerHTML) 
    } 
    } 

    var obj = { 
    company: "", 
    number: "", 
    route: "" 
    }; 

    document.forms[0].onchange = function(e) { 
    obj[e.target.name] = e.target.value; 
    } 

    document.forms[0].onsubmit = function(e) { 
    e.preventDefault(); 
    addBus(obj.company, obj.number, obj.route) 
    } 
} 

plnkr http://plnkr.co/edit/mLz2pNROV3cSCPmnE2S1?p=preview

Answer 2

您可以使用jQuery來創建新的總線股利和其追加到它的容器：任何你想要的

// get these from the form... 
var newBusNumber = 123; 
var newRoute = "Jefferson"; 

// create new bus div 
var $busDiv = jQuery("<div></div>"); 
$busDiv.addClass("bus"); 
$busDiv.addClass("active"); 

// create img tag 
var $img = jQuery("<img />"); 
$img.attr("src", "img/carta.png"); 
$img.attr("width", "100"); 
$img.attr("height", "4"); 

// create first paragraph tag 
var $p1 = jQuery("<p></p>"); 
$p1.addClass("bus-number"); 
$p1.text(newBusNumber); 

// create second paragraph tag 
var $p2 = jQuery("<p></p>"); 
$p2.addClass("route"); 
$p2.text(newRoute); 

// put the bus div pieces together 
$busDiv.append($img); 
$busDiv.append($p1); 
$busDiv.append($p2); 


// append the bus div to it's container 
var $busContainer = jQuery(".bus-container"); 
$busContainer.append($busDiv); 

Answer 3

使用jQuery AJAX.After全成回調追加。

Answer 4

我想你可以只克隆所需「巴士「，並將其附加到容器中，就像那樣。

function addBus() { 
    var id = document.querySelector('input[name="number"]').value; // the index of chosen bus; 
    var bus = document.querySelectorAll(".bus")[id]; // get chosen bus 
    var newBus = bus.cloneNode(true); // deep cloning of the existing 'bus' 
    document.querySelector('.bus-container').appendChild(newBus); // add to the container 
}