个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
在我的HTML page有两个具有默认值的文本区域和一个“提交”按钮。
用户按下“提交”后，我想用新数字更新两个文本区域，同时使用这些值调用函数 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: </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> Subregion: </d1>
<select id="subregion-select">
<!-- <option value="" selected>none</option> -->
</select>
<d1> Country: </d1>
<select id="country-select">
</select><br><br>
<d1>Indicator Select: </d1>
<select id="data-select">
<option value="count" selected>count</option>
<option value="rate">rate</option>
</select>
<d1> Format Select: </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: </d1>
<input style="width: 55px;" id="minCnt" type="text" name="minCnt" value="0">
<d1>Max Range: </d1>
<input style="width: 55px;" id="maxCnt" type="text" name="maxCnt" value="10000">
<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);
});关于javascript - HTML 页面重新加载而不更新文本区域的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33756191/
24
4
0
在使用 GDI 进行图形处理的传统 Windows 程序中，您必须担心只绘制需要重绘的窗口区域；这是“更新矩形”，可以通过 PAINTSTRUCT.rcPaint 或通过调用 GetUpdateRec
我对 TFS 中的所有内容感到困惑。有人可以解释一下所有这些是如何组合在一起的吗？ 团队项目合集 团队项目 团队 地区 迭代 来自 this page,我认为一个(团队)项目集合可以包含多个(团队)项
这对我来说根本没有意义。创建新的 API 网关时，您可以指定它是区域优化的还是边缘优化的。但话又说回来，当您为 API Gateway 创建自定义域名时，您可以在两者之间进行选择。 最糟糕的是，您可以
我有一个工作表，其中包含我想循环遍历的许多不同区域。我将进行一些计算，并认为它比在列中逐个单元格地更快/更有效。 我尝试了一些不同的东西，但不知道如何跳到下一个区域。我已经发表了一些评论，最有希望的是
最近迁移到 TFS 2010 后，我想知道对于区域而言，最佳或最广泛接受的定义或配置是什么？ 我能在网上找到的唯一有用的文章是 this one并且是我认为是正确的。然而，这让我开始思考是否以下任何一
我在“北欧”有一个存储帐户，现在我想使用生命周期管理将冷 blob 移动到存档层。 但是我每次尝试都会遇到以下失败:无法为存储帐户“myStorageAccount”添加生命周期管理规则。错误:管理策
我正在开发一个项目，您在扫描仪中输入州的缩写，然后程序会告诉您该州位于美国的哪个地区。我认为我的大部分代码都是正确的，但我有以前从未使用过 switch。 我已经将我的工作改进为一个错误，即我的第一个
我正在尝试学习 AngularJS，我想我有一个架构问题。 如果我想开始开发一个应用程序，比方说，比如 youtube，我如何在“区域”(比如 Marionette)中组织页面？我的意思是:顶部导航栏
我正在制作一个动态内存分配器，当我释放其中的一部分时，我需要检查我传递给函数的指针实际上是否在该区域内。我有一个指向 malloc 区域开头的指针 typedef unsigned char byte
有时我想看看 到底在哪里页面上图片上的标签。 在 Javascript 中有没有办法改变颜色或隐藏与区域标签对应的图像部分？ 最佳答案 也许您正在寻找类似 mapper.js 的内容.它允许您在鼠标
我有一个使用 D3 js 创建的时间序列图表。我想为特定时间间隔添加高亮区域，以显示在该特定时间发生的特定事件(会有不同类型的事件，因此每个高亮标记将根据其类型具有不同的颜色)。我希望这个突出显示区域
我正在尝试创建网站的密码保护区。我想通过检查 MySql 表中的用户名和密码来允许访问，然后启动一个 session 并允许在 session 处于事件状态时访问多个页面。如果有人尝试直接访问这些页面
在 ScrollView 中我添加了几个按钮。正如您在图片中看到的，2 个按钮完全可见，第三个按钮半可见。当我向右滚动看到第三个时；1-如果滚动条很短，则它会滚动回到第一个位置。2- 如果滚动足够则显
我正在开发我的第一个 spritekit 应用程序，并且有一个关于如何处理我想到的事情的快速问题。我正在制作一个我想要的棋盘游戏原型(prototype)，并希望在 iOS map 中进行一些集思广益
在我的 C# 程序中，我收到这样的日期和时间:DateTime.Now 我得到:19/09/2010 20:10:30 因为我的地区是:希伯来语(以色列) 但是如果我将我的程序安装在区域为 Engli
有时我在 Visual Studio 的源文件中运行(在我的例子中是 2010)，我看到很多区域，我必须点击 + 号才能一个一个地打开它们! 是否有任何快捷方式或菜单选项可以使这对我来说更容易，并且对
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 7 年前。 Improve
我正在寻找二维数据中的峰值区域(如果您愿意，灰度图像或二维景观，通过霍夫变换创建)。 峰值区域是指局部最大峰值，但不是单个点而是周围的一部分strong>contributing region 随之而
我希望能够将任何字符或字符串转换为形状或区域，以便我可以按照我喜欢的任何大小、样式、效果等来绘制该字符。 更具体地说，我将使用视差绘制它，以便它仅在特定角度清晰定义(这就是为什么我不能使用 html
我非常喜欢数学(或者你们大多数人会说的“数学”!)，但我还没有达到知道这个问题答案的程度。我有一个主圆，它可以在显示器上的任何 x 和 y 处有一个中心点。其他圆圈将随意在显示器周围移动，但在任何给定
我是一名优秀的程序员,十分优秀！