Javascript 将价格放置在标签中，当用户更改其值时，该标签将更新

我有以下问题

我正在制作一个表单，用户可以在其中选择一些他们想要订购的产品。 这看起来像这样：

只有我有11个字段

用户可以在此输入字段中输入所需的号码，然后单击“提交”转到“确认”页面

但这不是问题所在。我想这样做，如果用户输入1，它会在比萨饼旁边显示价格，上面写着7,00欧元。但当他决定要2，并在输入字段中放置2时，价格实际上会变为14,00欧元

我把标签和表格准备好了，所以所有需要做的事情都是代码本身，它在比萨饼的输入字段中查找值，并将其取为*7，然后将其放在标签中

我不知道我现在是否想要更多，因为我对PHP和JS不太熟悉，但我渴望学习，所以非常感谢您的帮助

编辑：

使用My validateForm函数，因此只有11个字段中的1个字段必须填写才能继续，但如果没有填写任何字段，则按钮将被禁用：

function validateForm()
    {
        var allEmpty = (document.forms['form'].PizzaMagarita.value == "" &&
                        document.forms['form'].PizzaFungi.value == "" &&
                        document.forms['form'].PizzaHawai.value == "" &&
                        document.forms['form'].PizzaQuattroStagioni.value == "" &&
                        document.forms['form'].PizzaCalzone.value == "" &&
                        document.forms['form'].BroodjeShoarma.value == "" &&
                        document.forms['form'].BroodjeDoner.value == "" &&
                        document.forms['form'].DurumDoner.value == "" &&
                        document.forms['form'].KnoflookSaus.value == "" &&
                        document.forms['form'].WhiskeySaus.value == "" &&
                        document.forms['form'].SambalSaus.value == "");

        if(allEmpty)
        {
            document.forms[0].submit.disabled=true;
        }
        else {  
            document.forms[0].submit.disabled=false;
        }
    }

---

我不明白。你是说你有你需要的一切，那有什么问题？ 最好的方法是将其放置在validateForm中，如下所示：

您使用的不是php，而是js

function validateForm(item){
   //check here if value is number, then:
   var count = item.value;
   var totalPrice = price * count;  //where you have price of this item?
   elementInWhichYouWantToPutTotalPrice.innerHTML("€"+totalPrice);
   ...

---

要在客户端更新价格，您可以监听输入上的更改事件，然后计算、格式化和显示价格

假设您的html如下所示：

<input type="number" id="pizzaCount" class="bestelformulier" name="PizzaMagarita" onkeyup="validateForm(this)" min="1" max="999">
<h3>Total Price</h3>
<span id="totalPrice">$0.00</span>

---

jsfiddle here:

运行一个在输入事件发生时更改的函数

---

您可以发布validateForm函数的内容吗？基于所选数量或输入数量更新价格的代码非常常见。它主要使用javascript和ajax，您可以创建一个脚本来管理DOM元素以更新最终值或篮值。除了代码本身之外，我已经在它周围进行了所有操作，从输入字段do it*值中获取值，然后将其放入labelIt中。它似乎正如我所愿工作，明天我将首先测试它，但我现在有两个。谢谢你的努力！

var pizzaPrice = 7;
var numPizzaInput = document.getElementById('pizzaCount');
var priceLabel    = document.getElementById('totalPrice');

function onNumPizzaInputChange(e){

    var totalPrice = pizzaPrice * parseInt(e.target.value);
    var formattedPrice = '$'+totalPrice.toFixed(2);

    priceLabel.innerHTML = '';
    priceLabel.appendChild(document.createTextNode(formattedPrice));
}

numPizzaInput.addEventListener('change', onNumPizzaInputChange, false);

function validateForm(priceInput) {
  var total = $(priceInput).val() * $('.pricePerUnitNumber').html();
  $('.priceNumber').html(total);
}