Javascript формуляр автоматический расчет

Я пытаюсь создать форму, которая автоматически изменяет текстовое поле, когда пользователь использует нажатия клавиш.Javascript формуляр автоматический расчет

Эта скрипка иллюстрирует то, что я пытаюсь, однако я не имел успеха.

По сути, я хочу, чтобы в третьем текстовом поле было показано «Количество людей», умноженное на «Цена», как я могу это сделать?

HTML

<form action="postenquiry.php" method="post" name="myform"> 
    <label>Num of People</label> 
    <input type="text" name="qty" /> 
    <br/> 
    <label>Price</label> 
    <input type="text" name="Cost" onkeyup="calculate()" /> 
    <br/> 
    <input type="text" name="textbox5" /> 
</form>

Javascript

function calculate() { 
    if (isNaN(document.forms["myform"]["qty"].value) || document.forms["myform"]["qty"].value == "") { 
     var text1 = 0; 
    } else { 
     var text1 = parseInt(document.forms["myform"]["qty"].value); 
    } 
    if (isNaN(document.forms["myform"]["Cost"].value) || document.forms["myform"]["Cost"].value == "") { 
     var text2 = 0; 
    } else { 
     var text2 = parseFloat(document.forms["myform"]["Cost"].value); 
    } 
    document.forms["myform"]["textbox5"].value = (text1 * text2); 
}

http://jsfiddle.net/b87s5hou/

источник

2015-07-16 Malcolm

Вы должны разместить код в голове, а не на событие загрузки: http://jsfiddle.net/b87s5hou/1/ – DontVoteMeDown

@DontVoteMeDown Это не так. Пока код добавляется в голову или выполняется через событие onload/DOMContentLoaded, он будет работать все равно. –

@MikeC, когда пользователь присоединяет событие, как он делал 'onkeyup =" calculate() ", он приложил функцию в глобальной ессеке, но когда функция объявлена внутри события' onload', она не является глобальной. В теге 'head', вне любого блока он глобальный, поэтому он может быть вызван событием. – DontVoteMeDown

Вы упомянули PHP, но вы можете обновить эти поля на лету только JavaScript. Не забудьте указать поля ввода с идентификаторами, а затем использовать GetElementById для выполнения расчетов между полями. Также я чувствую, что ONCHANGE работает лучше, чем onkeyup.

Вот скрипка: http://jsfiddle.net/b87s5hou/5/

HTML

<form action="postenquiry.php" method="post" name="myform"> 
<label>Num of People</label> <input type="text" name="qty" id="qty" onchange="getPeople(this);"/><br/> 
<label>Price</label> <input type="text" name="cost" id="cost" onchange="calculate(this);"/><br/> 
<input type="text" name="textbox5" id="textbox5"/>

function getPeople(input){ 
if (isNaN(input.value)){ 
input.value = 0; 
} 
}  
function calculate(input){ 
if (isNaN(input.value)){ 
input.value = 0; 
} 
var price = input.value; 
var people = document.getElementById("qty").value; 
var calc = price * people; 
document.getElementById('textbox5').value = calc; 
}

источник

2015-07-16 17:52:49 m1xolyd1an

Есть довольно много ошибок в йо ur code - взгляните на следующее, чтобы помочь вам.

HTML

<form action="postenquiry.php" method="post" name="myform" onkeyup="calculate()"> 
    <label>Num of People</label> 
    <input type="text" name="qty" /> 
    <br/> 
    <label>Price</label> 
    <input type="text" name="cost" /> 
    <br/> 
    <input type="text" name="textbox5" /> 
</form>

JavaScript

var form = document.forms.myform, 
    qty = form.qty, 
    cost = form.cost, 
    output = form.textbox5; 

window.calculate = function() { 
    var q = parseInt(qty.value, 10) || 0, 
     c = parseFloat(cost.value) || 0; 
    output.value = (q * c).toFixed(2); 
};

Working example

источник

2015-07-16 17:55:00 Fraser

Эти две строки могут быть сокращены до 'var text1 = ParseInt (шт.значение, 10) || 0; var text2 = parseFloat (cost.value) || 0; '. – Xufox

очень верно, отредактирует. – Fraser

Кроме того, вы можете переместить 'onkeyup =" calculate() "' в '

Hai охладить этот тип проблем я также столкнулся с so..i разработать некоторый мир кода, который используется для расчета автоматически используя текстовые поля .... в этом коде ..

<html> 
 
<body> 
 
<form oninput="x.value=parseFloat(a.value)*parseFloat(b.value)"> 
 
<input type="number" id="a" value="0"> 
 
<input type="number" id="b" value="50"readonly> 
 
<output name="x" for="a b"></output> 
 
</form> 
 
</body> 
 
</html>

источник

2017-06-08 03:03:53

Javascript формуляр автоматический расчет

ответ

Смежные вопросы