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

Question

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>

Could you testcases? i.e example of given inputs and expected outputs. — aloisdg
– aloisdg, Commented Feb 6, 2022 at 18:40
My JSFiddle link is working fine with Try It button as well. You can test for entering 1 and 2 to 1st and 2nd input, 3,2 to the 5th and 6th input areas. Only need which I mentioned above. — TheCimcoz
– TheCimcoz, Commented Feb 6, 2022 at 18:51

Ali Mustafa · Accepted Answer · 2022-02-08 06:30:47Z

1

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>

edited Feb 8, 2022 at 6:30

answered Feb 6, 2022 at 18:43

Ali Mustafa

7961 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

TheCimcoz Over a year ago

Dear Ali, sorry but not working. If you have a time to test my JSFiddle link with real data and you can check online. Regards. Link : jsfiddle.net/cimmy/maopd82n

TheCimcoz Over a year ago

Sorry Ali, I just updated my JSFiddle as : jsfiddle.net/cimmy/qay2wrd5 (Pls.ignore old one I already updated in my question too.

TheCimcoz Over a year ago

Anyone can help for my issue? regards..

Ali Mustafa Over a year ago

@TheCimcoz I have edited my answer and added a new snippet. It is working without clicking the button. I don't know how you want the result from FT and HT to appear in the FT/HT input box but once you see how I have written the code, you can easily pull it off.

TheCimcoz Over a year ago

Dear @Ali, this is exactly what I needed. Thank you very much for your time and effort. Best regards..

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related