在onClick事件之前设置输入值
在onClick事件之前设置输入值
提问于 2016-02-14 17:29:36
我有一个具有不同值的收音机按钮组，我试图根据输入的值调用一个函数。
HTML：
<form class="form">
<div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
<label class="btn btn-info" onclick="getChart()">
<input name="chart" value="" type="radio">All
</label>
<label class="btn btn-info" onclick="getChart()">
<input name="chart" value="total" type="radio">Total
</label>
<label class="btn btn-info" onclick="getChart()">
<input name="chart" value="max" type="radio">Max
</label>
<label class="btn btn-info" onclick="getChart()">
<input name="chart" value="mean" type="radio">Mean
</label>
<label class="btn btn-info" onclick="getChart()">
<input name="chart" value="min" type="radio">Min
</label>
<label class="btn btn-info" onclick="getChart()">
<input name="chart" value="extrapolation" type="radio">Extrapolation
</label>
</div>
</form>联署材料：
function getChart() {
var startDate = $('#range').val().slice(0, 10) + 'T' + $('#range').val().slice(11, 16) + ':00+00:00';
var endDate = $('#range').val().slice(19, 29) + 'T' + $('#range').val().slice(30, 38) + ':00+00:00';
var appName = $('select[name=applicationSelect]').val();
var envName = $('input[name=env]:checked').val();
var chartType = $('input[name=chart]:checked').val();
// Load chart
ajaxLoadChart(startDate, endDate, appName, envName, chartType);
};
// Function for loading data via AJAX and showing it on the chart
function ajaxLoadChart(startDate, endDate, appName, envName, chartType) {
// If no data is passed (the chart was cleared)
if (!startDate || !endDate) {
return;
}
// Otherwise, issue an AJAX request
$.ajax({
url: 'http://MyServlet.com',
crossDomain: true,
async: true,
type: "GET",
dataType: "json",
data: {
start: startDate,
end: endDate,
env: envName,
app: appName,
type: chartType
},
success: function (data) {
defaultChart(data);
}
error: function(xhr, status, error) {
alert(status + " " + error);
console.log(xhr);
}
});
}问题是在调用函数之后设置所选输入的值，因此在Ajax请求中获取前面选定的值。
我是JS的新手，我可以在不对代码进行大量更改的情况下修复这个问题吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-02-14 17:52:46
正如现在的代码一样，函数getChart将在每次单击时执行两次，因为事件是为input元素和label元素触发的。对于这两种情况，在这些事件发生时选中的单选按钮是不同的。
但是无论如何，您都希望避免双重调用，因为只有在必要时才需要执行Ajax调用。
我建议作出以下改变：
- 首先，从所有
onclick标记中删除input属性； - 将getChart函数包装在
$('[name=chart]').change(...)中。这使得它成为所有这些图表input的变更事件处理程序。
以下是结果(可测试)：
$('[name=chart]').change(function getChart() {
var chartType = $('input[name=chart]:checked').val();
// just for testing:
alert('Choice = ' + chartType);
// rest of your getChart function follows here...
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
<div class="btn-group btn-group-justified " data-toggle="buttons" name="chartSelect">
<label class="btn btn-info">
<input name="chart" value="" type="radio">All
</label>
<label class="btn btn-info">
<input name="chart" value="total" type="radio">Total
</label>
<label class="btn btn-info">
<input name="chart" value="max" type="radio">Max
</label>
<label class="btn btn-info">
<input name="chart" value="mean" type="radio">Mean
</label>
<label class="btn btn-info">
<input name="chart" value="min" type="radio">Min
</label>
<label class="btn btn-info">
<input name="chart" value="extrapolation" type="radio">Extrapolation
</label>
</div>
</form>
我保留了函数getChart的名称，但是这个函数可以是匿名的，因为它在这里使用。
Stack Overflow用户
发布于 2016-02-14 17:43:00
将参数设置为函数
function getChart(param){
alert(param);
}然后把它交给活动，
<label class="btn btn-info" onclick="getChart(20)">
<input name="chart" value="mean" type="radio">Mean
</label>
<label class="btn btn-info" onclick="getChart(25)">
<input name="chart" value="mean" type="radio">Mean
</label>它也可以是字符串值，只需引用事件。
<label class="btn btn-info" onclick="getChart('mean')">
<input name="chart" value="mean" type="radio">Mean
</label>它将将getChart的值显示为警报。对不起，我是印尼人埃尔文，希望这能对你有所帮助。
Stack Overflow用户
发布于 2016-02-14 17:43:58
这是因为标签上有onClick处理程序，而不是输入字段。
此外，使用jQuery ala $(‘type=input’).change(函数(){ //提取所有字段值并调用Ajax检索新图表})从输入字段中提取值可能更容易；
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35394816
复制相关文章
相似问题
腾讯云开发者
