CODEWITHSUNDEEP
javascripthtmlformsonclick
dragi
dragi

Reputation: 1512

Refresh div content with Javascript when button is pressed

I'm trying to figure out how to refresh the content of a div based on the values submitted from a form. Basically, I have a HTML form:

<form method="post" id="diabetestool">
  <table id="tooltable">
    <tr>
      <td>
        <p>How old are you?</p>
      </td>
    <td>
      <input type="radio" id="age1" name="age" value="0" checked>
      <label for="age1">1-25</label>
    </td>
    <td>
      <input type="radio" id="age2" name="age" value="5">
      <label for="age2">26-40</label>
    </td>
    <td>
      <input type="radio" id="age3" name="age" value="8">
      <label for="age3">41-60</label>
    </td>
    <td>
      <input type="radio" id="age4" name="age" value="10">
      <label for="age4">60+</label>
    </td>
  </tr>
  <tr>
    <td colspan="5">
      <button class="btn" type="button" name="submit" onclick="calculate()"><span>Calculate</span></button>
    </td>
  </tr>
</form>

this is a simple version of it.. then I have a "window" which i'd like to show when the submit button is clicked in the form.

<div class="responsive-centered-box" id="resultWindow" style="display:none">
  <p>sample text</p>
</div>

and here is my Javascript: 

function calculate() {
  let resultWindow = document.getElementById("resultWindow");
  let i;
  let age_Value, bmi_Value, family_Value, describe_Value;

  for(i = 1; i <= 4; i++) {
    if (document.getElementById('age' + i).checked)
      age_Value = document.getElementById('age' + i).value;
  }

  if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';
    console.log(age_Value);
  }
}

It logs the value of the checked radio option and it also makes the "window" visible but it only works for the 1st click..

I'd like to have it as when I click the button, it gives me the value of the checked option but if I select another option and click the button again, I want to see that value.

hope it makes sense, thanks for the help in advance!

Upvotes: 0

Views: 166

Answers (2)

Fabien Greard
Fabien Greard

Reputation: 1894

Your checking if display == 'none' but when you're function is executed again you forgot to reset the style.

function calculate() {
  let resultWindow = document.getElementById("resultWindow");
  resultWindow.style.display = 'none';
  
  let age_Value, bmi_Value, family_Value, describe_Value;

  for(let i = 1; i <= 4; i++) {
    if (document.getElementById('age' + i).checked)
      age_Value = document.getElementById('age' + i).value;
  }

  if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';
    console.log(age_Value);
  }
}
<form method="post" id="diabetestool">
  <table id="tooltable">
    <tr>
      <td>
        <p>How old are you?</p>
      </td>
    <td>
      <input type="radio" id="age1" name="age" value="0" checked>
      <label for="age1">1-25</label>
    </td>
    <td>
      <input type="radio" id="age2" name="age" value="5">
      <label for="age2">26-40</label>
    </td>
    <td>
      <input type="radio" id="age3" name="age" value="8">
      <label for="age3">41-60</label>
    </td>
    <td>
      <input type="radio" id="age4" name="age" value="10">
      <label for="age4">60+</label>
    </td>
  </tr>
  <tr>
    <td colspan="5">
      <button class="btn" type="button" name="submit" onclick="calculate()"><span>Calculate</span></button>
    </td>
  </tr>
</form>
<div class="responsive-centered-box" id="resultWindow" style="display:none">
  <p>sample text</p>
</div>

Upvotes: 1

Ahmad
Ahmad

Reputation: 12737

Your code works fine. You just need to update the output display whether the div was originally hidden the first time or not.

if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';
    console.log(age_Value);  // take this out of this block
  }

Change that to :

if (resultWindow.style.display == 'none') {
    resultWindow.style.display = '';

  }
console.log(age_Value);  // here it will work

Upvotes: 3

Related Questions