Изменить значение поля при отправке с использованием JavaScript

Question

Я хотел бы добавить немного JavaScript, чтобы сделать следующее.

Мне бы хотелось 3 таких поля.

<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />

скажите, если я ввел 100 в первом поле и 19 во втором поле.

он разделил бы 100 на 19 и округлил бы его до десятичных знаков, а затем заменил бы значение третьего скрытого поля ответом, поэтому в случае (100/19) 5,26 ... округляется до 6

однако я не уверен, как на самом деле реализовать это.

Answer 1

Хороший простой способ - передать форму функции и позволить этой функции выполнять вычисления.

Форма должна выглядеть так:

<form>
<input type="text" name="a" />
<input type="text" name="b" />
<input type="hidden" name="c" />
<input type="button" value="Click" onClick="doCalculate(this.form)" />
</form>

и JavaScript:

function doCalculate(theForm){
    var aVal = parseFloat(theForm.a.value);
    var bVal = parseFloat(theForm.b.value);
    var cVal = 0;
    if(!isNaN(aVal) && !isNaN(bVal)){
       cVal = Math.ceil(aVal/bVal);  
    }
    theForm.c.value = cVal;
}

Рабочий пример здесь -> http://jsfiddle.net/azajs/

Редактировать: Это также можно сделать, когда форма отправляется путем аналогичного вызова при отправке формы:

<form onsubmit="doCalculate(this);" >
...
</form>

Answer 2

Замкнутый путь, предполагающий, что ваша форма - document.forms [0]:

<input type="text" name="a" onchange="myFunction" />
<input type="text" name="b" onchange="myFunction" />
<input type="hidden" name="c" />

function myFunction() {
  var inpA = document.forms[0].a;
  var inpB = document.forms[0].b;
  var aVal = parseFloat(inpA.value);
  var bVal = parseFloat(inpB.value);
  if (!isNaN(aVal) && !isNaN(bVal) && bVal !== 0) {
    document.forms[0].c.value = Math.ceil(aVal/ bVal);
  }
}

РЕДАКТИРОВАТЬ: Math.round => Math.ceil

Answer 3

Скажите, что ваша форма выглядит так:

<form id="myForm" method="POST">
  <input type="text" name="a" />
  <input type="text" name="b" />
  <input type="hidden" name="c" />
</form>

Вы можете получить доступ к форме, как эта;

function doAction(action)
{
  var frm = document.forms.myForm;
  frm.c.value = frm.a.value/frm.b.value;
}

Вы можете запустить действие, добавив кнопку, по которой можно щелкнуть мышью, или установив действие отправки формы.

Редактировать: не округляется, не знаю, как это сделать: (

Answer 4

После элементов формы:

<script type="text/javascript">
    (function() {
        var a= document.getElementsByName('a')[0];
        var b= document.getElementsByName('b')[0];
        var c= document.getElementsByName('c')[0];

        a.onchange=b.onchange=a.onkeyup=b.onkeyup= function() {
            c.value= Math.ceil(a.value/b.value);
        };
    })();
</script>

Это пересчитывается при каждом нажатии клавиши, удаляйте привязку keyup, если вы этого не хотите.

Добавьте уникальный id к каждому входу и используйте document.getElementById, чтобы избежать двусмысленности с name. Если эта форма никогда не будет отправлена, вы можете полностью пропустить name.

Math.ceil() вернет NaN, если либо значение не может быть прочитано как число, либо Infinity, если вы разделите на ноль. Вы можете проверить эти условия и написать другое значение.

Answer 5

Вы делаете это, привязывая eventlistner к элементу from.Вы либо создаете свои собственные ( собственные обработчики событий Javascript ), либо используете свою среду фаворита для JavaScript.Мой пример для использования jQuery jQuery bind метод javascript framework.

/* first set and id to your input hidden and form element so you can reach it in fast way */
<form id="myForm"><input type="hidden" id="total" name="c" /></form>
/* Javascript code using jquery */

$('#form').bind('submit', function () {
    $('#total').val(function () {
        var num = parseFloat($('#form input[name=a]').val()) / parseFloat($('#form input[name=b]').val());
        return Math.floor(num) === num ? num : Math.floor(num) + 1;
    });
});