根据使用 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

您可以使用 jQuery 创建新总线 div 并将其附加到它的容器：

// 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 2

使用JQuery AJAX.After成功的回调追加任何你想要的。

Answer 3

尝试使用 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 4

我认为您可以只克隆所需的 'bus'，然后将其附加到容器中，诸如此类。

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
}

根据使用 Javascript 的表单输入创建 div 的新实例

Create a new instance of a div based on form input with Javascript

javascript

html

forms

function

onsubmit