OnInput не работает из-за двух Form, какое решение?

372

02 ноября 2017, 05:41

Здравствуйте. Есть логика в OnInput, но из-за двух тэгов FORM которые, к сожалению, удалить нельзя, заюзать OnInput невозможно, как правильно решить задачу? ПС. Убрать один form - не подходит, т.к. схематически код недолжен измениться. ПС2. Можно ли переписать код таким образом, чтобы введя цифры в input считалось и показывалось в либо ?

ссылка

<form id="neded"> 
  <input id="3" oninput="var v = this.value; this.form.a.value = isNaN(v) ? '' : (v * 1.5).toFixed (2); var b = this.value; this.form.b.value = isNaN(b) ? '' : (v * 1.05).toFixed (2)" value="0"> 
</form> 
 
<form id="calk"> 
  <input type="text" name="a"> 
 
  <input type="text" name="b"> 
</form>

Answer 1

Если я правильно понял, то должно получится нечто такое :

function fn(that) { 
  var v = that.value; 
 
  document.querySelector('input[name="a"]').value = isNaN(v) ? '' : (v * 1.5).toFixed(2); 
  document.querySelector('input[name="b"]').value = isNaN(v) ? '' : (v * 1.05).toFixed(2); 
};

<form id="neded"> 
  <input id="3" oninput="fn(this);" value="0"> 
</form> 
 
<form id="calk"> 
  <input type="text" name="a"> 
 
  <input type="text" name="b"> 
</form>

Пример с div :

function fn(that) { 
  var v = that.value; 
  document.querySelector('div[name="a"]').innerHTML = isNaN(v) ? '' : (v * 1.5).toFixed(2); 
  document.querySelector('div[name="b"]').innerHTML = isNaN(v) ? '' : (v * 1.05).toFixed(2); 
};

div[name="a"], 
div[name="b"] { 
  height: 25px; 
  border: 1px solid red; 
}

<form id="neded"> 
  <input id="3" oninput="fn(this);" value="0"> 
</form> 
 
<form id="calk"> 
  <div name="a"></div> 
  <div name="b"></div> 
</form>