Question

我有以下问题。

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

<input type="number" class="bestelformulier" name="PizzaMagarita" onkeyup="validateForm(this)" min="1" max="999">

只有我有11个领域。

用户可以在此输入字段中输入所需的数字，然后单击“提交”以转到配置页面。

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

我得到了标签和表格所以需要完成的所有事情都是代码本身，它在比萨饼的输入字段中查找值并将其取为* 7并将其放在标签中。

我不知道我现在是不是很想，因为我不是很熟悉PHP和JS，但是我非常渴望学习，所以对任何帮助表示赞赏！

编辑：

我使用了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;
        }
    }

Answer 1

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

假设您的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>

你没有使用jQuery ...你想要获取对输入的引用，附加一个change事件监听器，然后在输入值发生变化时更新标签。

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);

jsfiddle here：http://jsfiddle.net/5KMjh/

Answer 2

我不明白。你说你有你需要的一切，那么问题是什么？放置在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);
   ...

Answer 3

运行在input事件中更改的函数。

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

http://jsfiddle.net/g4hvD/

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

3 个答案: