Как сделать опцию «отправить» в форме с неограниченным количеством входных данных?

Я пытаюсь создать «калькулятор», в котором вы также можете добавить количество входных данных, чтобы вы могли ввести столько, сколько хотите. При отправке он должен отображать добавленное значение всех входов, однако я могу заставить его отображать только значение последнего ввода. Также я хочу умножить значение ввода x на количество ввода x, записанное в числовом вводе - как мне это сделать?

var prices= new Array();
prices["none"]=0;
prices["burger"]=10;
prices["fish"]=20;
prices["steak"]=30;

var i = 0;

function createInput() {
    i++;
    
    var container = document.getElementById("newInputs");
    
    var select = document.createElement("select");
    select.setAttribute("id", "select" + i);
    container.appendChild(select);
    
    var none = document.createElement("option");
    none.setAttribute("value", "none");
    none.text = "";
    select.add(none);
    
    var one = document.createElement("option");
    one.setAttribute("value", "burger");
    one.text = "Burger";
    select.add(one);
    
    var two = document.createElement("option");
    two.setAttribute("value", "fish");
    two.text = "Fish";
    select.add(two);
    
    var three = document.createElement("option");
    three.setAttribute("value", "steak");
    three.text = "Steak";
    select.add(three);
    
    var amount = document.createElement("input");
    amount.setAttribute("id", "amount" + i);
    amount.setAttribute("type", "number")
    container.appendChild(amount);
    
    return i;
}

function getPrice() {
    var price = 0;
    var theForm = document.forms["form"];
    var items = theForm.elements["select" + i];
    price = prices[items.value];
    return price;
}

function getTotal() {
    var totalPrice = getPrice();
    document.getElementById('total').innerHTML = "£" + totalPrice;
}
<form id="form">
        <select id="select0">
            <option value="none"></option>
            <option value="burger">Burger</option>
            <option value="fish">Fish</option>
            <option value="steak">Steak</option>
        </select>
        <input type="number" id="amount1">
        <div id="newInputs">
        
        </div>
        <input type="button" onclick="createInput()" value="More Inputs!">
        <input type="button" onclick="getTotal()" value="Submit!">
    </form>
    <p id="total">You haven't got a total yet</p>

Вероятно, это действительно глупая ошибка, которую я делаю, но все равно спасибо за помощь!


javascript html live calculator
person Ant Arni    schedule 06.12.2017    source источник
comment
показывает ошибку в отправке.   -  person zabusa    schedule 06.12.2017
comment
Одна проблема var totalPrice = price;. Этот оператор выдаст ошибку ссылки, поскольку переменная price не существует до тех пор, пока не будет выполнена функция getPrice (и она никогда не вызывается).   -  person RobG    schedule 06.12.2017
comment
Как мне разместить функции ввода ВНУТРИ формы, а не в конце html-документа? Я думаю, что начинаю что-то делать после изменения amount.elements[select1] на theForm.elements[select1]   -  person Ant Arni    schedule 06.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Проверьте это ~

var prices= new Array();
prices["none"]=0;
prices["burger"]=10;
prices["fish"]=20;
prices["steak"]=30;

var i = 0;

function createInput() {
    i++;
    
    var container = document.getElementById("newInputs");
    
    var select = document.createElement("select");
    select.setAttribute("id", "select" + i);
    container.appendChild(select);
    
    var none = document.createElement("option");
    none.setAttribute("value", "none");
    none.text = "";
    select.add(none);
    
    var one = document.createElement("option");
    one.setAttribute("value", "burger");
    one.text = "Burger";
    select.add(one);
    
    var two = document.createElement("option");
    two.setAttribute("value", "fish");
    two.text = "Fish";
    select.add(two);
    
    var three = document.createElement("option");
    three.setAttribute("value", "steak");
    three.text = "Steak";
    select.add(three);
    
    var amount = document.createElement("input");
    amount.setAttribute("id", "amount" + i);
    amount.setAttribute("type", "number")
    container.appendChild(amount);
    
    return i;
}

function getPrice() {
    var price = 0, ix, ixLen, value, type;
    var newInputs = document.getElementById('newInputs');
    
    price += (prices[document.getElementById('select0').value || 'none']) *     
             (document.getElementById('amount0').value || 0);
    for(ix = 0, ixLen = newInputs.children.length; ix < ixLen; ix += 2){
        type = newInputs.children[ix].value || 'none';
        value = newInputs.children[ix+1].value || 0;
        price += prices[type] * +value;
    }
    
    return price;
}

function getTotal() {
    var totalPrice = getPrice();
    document.getElementById('total').innerHTML = "£" + totalPrice;
}
<form id="form">
	<select id="select0">
		<option value="none"></option>
		<option value="burger">Burger</option>
		<option value="fish">Fish</option>
		<option value="steak">Steak</option>
	</select>
	<input type="number" id="amount0">
	<div id="newInputs">
	
	</div>
	<input type="button" onclick="createInput()" value="More Inputs!">
	<input type="button" onclick="getTotal()" value="Submit!">
</form>
<p id="total">You haven't got a total yet</p>

person moon    schedule 06.12.2017
comment
Оно работает! Было бы слишком много просить вас объяснить, как это сделать? Большое тебе спасибо :) - person Ant Arni; 06.12.2017
comment
@AntArni Эй, как ___? о чем ты хочешь меня спросить? :) - person moon; 06.12.2017
comment
Я просто не совсем уверен, как за этим работает механика - в частности, если я хочу добавить больше вводов «по умолчанию» (т.е. те, которые начинаются в начале, когда вы перезагружаете страницу, на данный момент есть только один), как мне делать это и все еще реализовывать свой сценарий? (на данный момент это просто не работает, если вы делаете более одного) - person Ant Arni; 06.12.2017