Question

在我的HTML page中，有两个带有默认值的文本区域和一个SUBMIT按钮。

用户按下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代码 - ＆gt; http://plnkr.co/edit/UxcMxzwVShuMjEAo2wug?p=preview

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

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

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

Answer 1

在表单中添加一个ID（例如＆＃34; form1＆＃34;）。然后删除submit.onchange =函数并执行以下操作

＆＃13;

$('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);
});

＆＃13;

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

1 个答案: