clear input field when text is entered into another input field-CodePudding

I have a Currency Converter , consisting of two fields and a button. In the first field I type the amount I want to be converted, in the second field I get the result of the conversion. The question is: When I type text in the first field, how can I clean up the text from the second field with the conversion result? Using a Javascript / Jquery function?

Thanks in advance.

This is my code:

function convertiLireInEuro() {
var importoInserito = $('#txtLireEuro').val();
importoInserito = importoInserito.replace(/,/g, '.');
var lire = parseFloat(importoInserito)
var euro = lire * 1000 / 1936.27
euro = euro.toFixed(2);
euro = Math.round(euro);

$('#txtConversione').val(euro); }

HTML:

<input type="text" id="txtLireEuro" name="txtLireEuro" style="text-align:right" onkeypress="return onlyNumbers(event);" /> &nbsp;000&nbsp;₤
                                <input value="Converti in Euro" type="button" id="btnLireEuro" name="btnLireEuro" style="margin-left: 20px" onclick="convertiLireInEuro();highlightAndCopyText();"/>
                                     <input type="text" id="txtConversione" name="txtConversione" style="text-align:right;margin-left:20px" readonly />&nbsp;€
                                     <span class="Label" style="margin-left:12px">(importo già arrotondato all’intero e incollabile nel campo desiderato)</span>

CodePudding user response：

Here is what you need, I post a coding snippet. I have 2 fields, typing-field and field-to-reset. If you first fill in the field-to-reset with some text and then start typing in typing-field the field-to-reset will reset.

let typing = document.getElementById("typing-field");
let reset = document.getElementById("field-to-reset");

typing.addEventListener("keydown", () => {
  reset.value = "";
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>Typing field:</div>
  <input id="typing-field" type="text">
  <div>Field to reset:</div> 
  <input id="field-to-reset" type="text"> 
</body>
</html>

CodePudding user response：

You already have an onkeypress event listener named onlyNumbers. You can simply put $('#txtConversione').val = ""; in that function.

CodePudding user response：

HTML Code

<body>
 <input type="text" id="input_box">
 <input type="text" id="result_box">
</body>

JQuery Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("#input_box").keydown(function(){
       $("#result_box").val("");
   })
});

</script>
<body>
<input type="text" id="input_box">
<input type="text" id="result_box">

</body>

When "Input_box" is getting focus on click the result_box will clear it's value.