HTML页面重新加载而不更新文本区域'数据

HTML page reloading without updating text areas' data

本文关键字：文本 更新 区域 数据 新加载 加载 HTML      更新时间：2023-09-26

在我的HTML页面中，有两个默认值为"文本区域"的区域和一个"提交"按钮。

用户按下SUBMIT后，我想用新数字更新两个文本区域，同时使用这些值调用函数loadCountryDataFromCsv(countrySelected, indicatorSelected)。

问题是，整个页面都在重新加载，忽略了用户插入的值，并使用了默认插入HTML正文中的值。

    <html>              
     <head>
      <meta charset="utf-8">
      <title>Homicide count and rate</title>
      <script type="text/javascript" src="d3.min.js"></script>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("visualization", "1", {
          packages: ["corechart"]
        });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
          var range = loadRange();
          function loadCountryDataFromCsv(countrySelected, indicatorSelected){
                 //loadData from CSV and drawChart();
          }
          function loadRange(){
              var minCnt = document.getElementById('minCnt').value;
              var maxCnt = document.getElementById('maxCnt').value;
              var range = new Array();
              range[0] = minCnt;
              range[1] = maxCnt;
              // var minRt = document.getElementById('minRt');
              // var maxRt = document.getElementById('maxRt');
              return range;
          }
          var submit = document.getElementById('submit');
          submit.onchange = function(){
            // alert(";;;min;;;"+ minCnt+''n:::max;;;'+maxCnt);
            var minCnt = document.getElementById('minCnt').value;
            var maxCnt = document.getElementById('maxCnt').value;
            range[0] = minCnt; range[1] = maxCnt;
            var countrySelected = document.getElementById('country-select').value;
            var indicatorSelected = document.getElementById('data-select').value;
            // alert(";;;min;;;"+ minCnt+''n:::max;;;'+maxCnt
            //+"'ncountrySelected "+ countrySelected + ''nindicatorSelected ' + indicatorSelected);
            loadCountryDataFromCsv(countrySelected, indicatorSelected);
          }
        }
      </script>
   </head>


      <body>
        <div style="margin-left: 5px; width: 100%;">
           <d1 style="float: left;"><big>Intentional homicide, counts and rates per 100,000 population</big></d1> <br><br>
           <d1 style="float: left;">Intentional homicide is defined as unlawful death inflicted upon a person with the intent to cause death or serious injury.</d1> <br><br>
        </div>
        <fieldset>
            <legend>Select a Country</legend>
            <d1>Region: &nbsp; </d1>
            <select id="region-select">
                <option value="Africa">Africa</option>
                <option value="Americas" selected>Americas</option>
                <option value="Asia">Asia</option>
                <option value="Europe">Europe</option>
                <option value="Oceania">Oceania</option>
            </select>
            <d1>&nbsp;&nbsp;Subregion: &nbsp; </d1>
            <select id="subregion-select">
                <!-- <option value="" selected>none</option> -->
            </select>
            <d1>&nbsp;&nbsp;Country: &nbsp; </d1>
            <select id="country-select">
            </select><br><br>
            <d1>Indicator Select: &nbsp; </d1>
            <select id="data-select">
                <option value="count" selected>count</option>
                <option value="rate">rate</option>
            </select>
            <d1>&nbsp;&nbsp;Format Select: &nbsp; </d1>
            <select id="format-select">
                <option value="">none</option>
                <option value="decimal" selected>decimal</option>
                <option value="scientific">scientific</option>
                <!-- <option value="percent">percent</option>
                <option value="currency">currency</option> -->
                <option value="short">short</option>
                <option value="long">long</option>
            </select>
            <form><br> 
                <d1>Min Range:  &nbsp; </d1> 
                 <input style="width: 55px;" id="minCnt" type="text" name="minCnt" value="0">  &nbsp;&nbsp;
                <d1>Max Range:  &nbsp; </d1> 
                 <input style="width: 55px;" id="maxCnt" type="text" name="maxCnt" value="10000">
                   &nbsp;&nbsp; <input onclick="return updateRange();" id="submit" type="submit" value="Submit" onsubmit="return false;">
                <script type="text/javascript">
                    function updateRange(){
                        var minCnt = document.getElementById('minCnt').value;
                        var maxCnt = document.getElementById('maxCnt').value;
                        var countrySelected = document.getElementById('country-select').value;
                        var indicatorSelected = document.getElementById('data-select').value;
                        loadCountryDataFromCsv(countrySelected, indicatorSelected);                    
                        return false;
                        // var minBox = document.getElementById("minCnt").value;
                        // var maxBox = document.getElementById("maxCnt").value;
                        // minBox.value = "new value";
                        // maxBox.value = "new value";                      
                        // console.log(";;;");                    
                    }            
                </script> 
            </form>
        </fieldset>
        <div id="chart_div" style="margin-left: -90px; width: 900px; height: 500px;"></div>
      </body>
    </html>

Pluckr代码->http://plnkr.co/edit/UxcMxzwVShuMjEAo2wug?p=preview

为了停止重新加载页面，我已经尝试过使用

<input onclick="return false;" id="submit" type="submit" value="Submit" onsubmit="return false;">

但问题是，在页面未加载的同时，我无法使用新值调用loadCountryDataFromCsv(countrySelected, indicatorSelected)函数。

向表单添加一个id（比如"form1"）。然后删除submit.onchange=功能并执行以下

$('formid').on('submit',function(e){
  e.preventDefault();
  var minCnt = document.getElementById('minCnt').value;
  var maxCnt = document.getElementById('maxCnt').value;
  range[0] = minCnt; range[1] = maxCnt;
  var countrySelected = document.getElementById('country-select').value;
  var indicatorSelected = document.getElementById('data-select').value;
  loadCountryDataFromCsv(countrySelected, indicatorSelected);
});

相关文章：