Значения автоматически изменяются после нажатия кнопки отправки

У меня есть код здесь. В этом коде нет ошибок, но когда я попытался выполнить это, вывод отображается только на долю секунды. После этого поля изменяются на нуль. Я хочу, чтобы все значения отображались даже после нажатия кнопки "Отправить".

<script type="text/javascript">
    function calcu() {
        var h = parseInt(document.getElementById("height").value);
        var w = parseInt(document.getElementById("weight").value);
        var r = h + w;
        document.getElementById("res").innerHTML = r;
        if (r < 50) {
            var x = document.getElementById("report");
            x.innerHTML = "less 50";
        }
        if (r > 50) {
            var xy = document.getElementById("report");
            xy.innerHTML = "high 50";
        }
    }


<body>
    <form onsubmit="calcu();">
        <table>
            <tr>
                <td>Height:</td>
                <td>
                    <input type="text" id="height">
                </td>
            </tr>
            <tr>
                <td>Weight:</td>
                <td>
                    <input type="text" id="weight">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="CALCULATE">
                </td>
                <td>
                    <p id="res"></p>
                </td>
            </tr>
        </table>
        <p id="report">REPORT</p>
        <p id="tip"></p>
    </form>
Источник

2 ответа 

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
  <script type="text/javascript" >

      function calcu() {
          var h = parseInt(document.getElementById("height").value);
          var w = parseInt(document.getElementById("weight").value);
          var r = h + w;


          document.getElementById("res").innerHTML = r;
          if (r < 50) {
              var x = document.getElementById("report");
              x.innerHTML = "less 50";
          }
          if (r > 50) {
              var xy = document.getElementById("report");
              xy.innerHTML = "high 50";
          }
      }
  </script>
  </head>



  <body>
      <form id="form1" >
      <table>
              <tr>
            <td>Height:</td>
            <td>
                <input type="text" id="height" />
            </td>
        </tr>
        <tr>
            <td>Weight:</td>
            <td>
                <input type="text" id="weight"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="CALCULATE" onclick="calcu();" />
            </td>
            <td>
                <p id="res"></p>
            </td>
        </tr>
    </table>
    <p id="report">REPORT</p>
    <p id="tip"></p>
</form>

Это пойдет на пользу. Вы вызываете функцию при отправке формы, которая перезагружает страницу, поэтому предыдущая страница не существует, поэтому она не приносит никакой пользы, поэтому вы должны изменить тип кнопки на кнопку, и при нажатии кнопки вы можете вызвать функцию, которую вы получите. Ваш желаемый результат.

Источник

Покажите свой код сначала для большего.

Насколько я могу судить по вашему утверждению, у вас есть кнопка с типом submit, а ваши значения не сохраняются, потому что, когда вы нажимаете на кнопку submit type, она публикует ваши данные и находит следующее, куда нужно перейти в атрибуте действия, как если бы Вы не дали атрибут действия (а / с для меня), поэтому он перезагружает страницу, которая обновляет весь контент, поэтому ваша страница не содержит данных. Но если вы хотите, чтобы она удерживалась, сделайте ваш тип кнопки простым "Button". Я думаю, что это решит вашу проблему.

Источник
Другие вопросы по тегам