How I get values updating/refreshing related input areas in Javascript? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How I get values updating/refreshing related input areas in Javascript? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a form and when I press the Try button it returns values for the 3rd and 6th input fields of the form according to the values entered in 1,2 and 5.6. Also, the 7th input field combines the 3rd and 6th results. My question is how can I get the result values from input fields 3 and 6 without clicking the Try It button and also update the input field 7 without refreshing the page?

My code is in JSFiddle UPDATED !!

My Javascript are:

 <script type="text/javascript">
   function concatenate(/*String*/string_one, /*String*/string_two, /*boolean*/with_space) {
    if (with_space===true) {
     return string_one+'/'+string_two;
    }
    else {
     return string_one+string_two;
    }
   }
   function join_names() {
    var input_name_first = document.getElementsByName('ht')[0].value;
    var input_name_last = document.getElementsByName('ft')[0].value;
    var input_name_full = document.getElementsByName('htft')[0];
    var var_name_full = concatenate(input_name_first, input_name_last, true);
    input_name_full.value = var_name_full;
   }
  </script>
  
  
  <script type="text/javascript">
function myFunctionFt() {
  var home = document.getElementById("home_score").value;
    var away = document.getElementById("away_score").value;
  var results;
  if (home > away) {
    results = "1";
  } else if (home < away) {
    results = "2";
  }  else if (home = away) {
    results = "X";
  }
  document.getElementById("ft").value = results;
}
</script>


  <script type="text/javascript">
function myFunctionHt() {
  var home = document.getElementById("home_ht_score").value;
    var away = document.getElementById("away_ht_score").value;
  var results;
  if (home > away) {
    results = "1";
  } else if (home < away) {
    results = "2";
  }  else if (home = away) {
    results = "X";
  }
  document.getElementById("ht").value = results;
}
</script>

Answer

I have removed all the previous answers from this answer and added a new answer in place. I have read your last comment and you said that my code was not working for the Home Team HT Score and Away Team HT Score. Well, I had made the logic to behave this way because it makes more sense to put the result in HT Result once both of the teams have played or in other words when we have both of the inputs. In sports, it rarely happens that only one team plays. Right. So outputting the result in HT result based on one of the inputs makes no sense. But if this is what you want, you simply have to change the logic from if (!input_home || !input_away) return; to if (!input_home && !input_away) return; and it will start working the way you want. Basically in the first logic statement with “||” we are saying unless both of the inputs are available don’t out into HT result and in the second statement with && we are saying id doesn’t matter if one of them is not present, just take whatever is present and output it in HT result. The same thing is happening for FT. You just have to change || to &&.

Here is the final working code:

  //FT and HT Result//
  let name_first = document.getElementById('ht');
    let name_last = document.getElementById('ft');
    let input_name_first = name_first.value;
    let input_name_last = name_last.value;
  
  
  //HT Home//
  let home = document.getElementById("home_ht_score");
    let away = document.getElementById("away_ht_score");
  home_ht_score.addEventListener("input", myFunctionHt);
  away_ht_score.addEventListener("input", myFunctionHt);
  let input_away = away.value;
  let input_home = home.value;
  //FT Home//
  let home_ft = document.getElementById("home_score");
    let away_ft = document.getElementById("away_score");
  home_score.addEventListener("input", myFunctionFt);
  away_score.addEventListener("input", myFunctionFt);
  let input_ft_away = away_ft.value;
  let input_ft_home = home_ft.value;
  
function myFunctionHt() {
  input_away = away.value;
  input_home = home.value;
  input_name_first = name_first.value;
  input_name_last = name_last.value;
    if (!input_home && !input_away) return;
  var results = "";
  if (input_home > input_away) {
    results = "1";
  } else if (input_home < input_away) {
    results = "2";
  }  else if (input_home = input_away) {
    results = "X";
  }
  document.getElementById("ht").value = results;
  join_names();
}


function myFunctionFt() {
  input_ft_away = away_ft.value;
  input_ft_home = home_ft.value;
  input_name_first = name_first.value;
  input_name_last = name_last.value;
    if (!input_ft_home && !input_ft_away) return;
  var results = "";
  if (input_ft_home > input_ft_away) {
    results = "1";
  } else if (input_ft_home < input_ft_away) {
    results = "2";
  }  else if (input_ft_home = input_ft_away) {
    results = "X";
  }
  document.getElementById("ft").value = results;
  join_names();
}

function join_names() {
   if (!input_name_first && !input_name_last) return;
    let input_name_full = document.getElementsByName('htft')[0];
    var var_name_full = concatenate(name_first.value, name_last.value, true);
    input_name_full.value = var_name_full;
   }

 function concatenate(/*String*/string_one, /*String*/string_two, /*boolean*/with_space) {
    if (with_space===true) {
     return string_one+'/'+string_two;
    }
    else {
     return string_one+string_two;
    }
   }
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <form class="form-group" action="addemp" method="post" onsubmit="return true" onClick="return false">
    <table border="0" cellpadding="1">
      <tbody>
        <tr>
          <td> <label class="form-label" style="color:blue" for="name">Home Team HT Score</label> </td>
          <td> <input id="home_ht_score" name="home_ht_score" type="text" class="form-control mb-3" style="width: 200px;"></td>

        </tr>
        <tr>
          <td> <label class="form-label" style="color:red" for="name">Away Team HT Score</label> </td>
          <td> <input id="away_ht_score" name="away_ht_score" type="text" class="form-control mb-3" style="width: 200px;"></td>

        </tr>

        <tr>
          <td><label class="form-label" style="color:green" for="name">HT Result</label> </td>
          <td> <input id="ht" name="ht" type="text" class="form-control mb-3" oninput="join_names();" onpaste="join_names();" style="width: 200px;"></td>

        </tr>



        <tr>
          <td><label class="form-label" style="color:blue" for="name">Home FT Score</label> </td>
          <td> <input id="home_score" name="home_score" type="number" class="form-control mb-3" style="width: 200px;"></td>
        </tr>
        <tr>
          <td><label class="form-label" style="color:red" for="name">Away FT Score</label> </td>
          <td> <input id="away_score" name="away_score" type="number" class="form-control mb-3" style="width: 200px;"></td>
        </tr>



        <tr>
          <td> <label class="form-label" style="color:green" for="name">FT Result</label> </td>
          <td> <input id="ft" name="ft" type="text" class="form-control mb-3" onchange="join_names();" onpaste="join_names();" style="width: 200px;"></td>

        </tr>


        <tr>
          <td><label class="form-label" style="color:green" for="name">HT/FT</label> </td>
          <td> <input name="htft" type="text" class="form-control mb-3" style="width: 200px;"> </td>

        </tr>

        <tr>
          <td> </td>
          <td><button class="btn btn-primary mb-4" type="submit">Save Match Result</button> </td>

        </tr>
      </tbody>

    </table>
  </form>
</body>

</html>
We are here to answer your question about How I get values updating/refreshing related input areas in Javascript? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji