使用jquery在单击时自动填充
注意:我是ajax/js的新手。
我有以下脚本，可以很好地工作：
<head>
<script class="init" type="text/javascript">
jQuery.noConflict();
(function( $ ) {
$(document).ready(function() {
$.ajax({
url: "http://www.apilayer.net/api/live?access_key=3429d739de582bfe294836892fb7fc8d&format=1¤cies=GBP,EUR,NOK,ZAR,SEK&format=1",
data: {
format: 'json'
},
error: function() {
console.log("error");
},
dataType: 'jsonp',
success: function(data) {
var x=0;
for(var key in data.quotes){
console.log(x);
console.log(data.quotes[key]);
document.forms["myForm"].elements[x].value = +(Math.round(1/data.quotes[key] + "e+4") + "e-4");;
x++;
}
},
type: 'GET'
});
});
})(jQuery);
</script>
</head>这会自动使用汇率填充表单元素。我现在正在尝试让它只在页面上的按钮被单击时执行此操作。我补充道：
<td>
<p>
<input tabindex="8" type="submit" name="submit" id="onlinerates" value="Use Online Rates"/>
</p>
</td>，然后更改了
$(document).ready(function() {至
$(document.myForm.onlinerates).click(function() {脚本现在看起来不会被调用，表单也不会填写。
我试过使用document.getElementById("onlinerates")，我试着在该行前面加上额外的$(Document)函数(.ready(){
我已经尝试将脚本移动到表单内，而不是标题中。我试着用.focus代替.click
所有这些都没有帮助。
有什么想法吗？
提前谢谢。
固定(某种程度上)：
感谢Rory指出了双重提交的问题。我将onlinerates改为使用复选框，而不是submit按钮。此外，我还必须将脚本移动到表单中。
<input tabindex="8" type="checkbox" name="onlinerates" id="onlinerates" value=0/><label for="onlinerates">Use Online Rates</label></p>
<script class="init" type="text/javascript">
jQuery.noConflict();
(function( $ ) {
$('#onlinerates').click(function(e) {
e.preventDefault(); // stop the standard form submission
if($('#onlinerates').attr("checked")==true){
$.ajax({url: "http://www.apilayer.net/api/live?access_key=3429d739de582bfe294836892fb7fc8d&format=1¤cies=GBP,EUR,NOK,ZAR,SEK&format=1",
data: {
format: 'json'
},
error: function() {
console.log("error");
},
dataType: 'jsonp',
success: function(data) {
var x=0;
for(var key in data.quotes){
console.log(x);
console.log(data.quotes[key]);
document.forms["myForm"].elements[x].value = +(Math.round(1/data.quotes[key] + "e+4") + "e-4");;
x++;
}
},
type: 'GET'
});
}
});
})(jQuery);
</script>回答 2
Stack Overflow用户
发布于 2015-06-22 18:16:12
问题是因为onlinerates是按钮的id，而通过form访问元素则使用name。也就是说，使用jQuery选择元素$('#onlinerates')会更容易一些。
还要注意，(出于可访问性的原因)更好的做法是挂钩到父form的submit事件，而不是单击button。试试这个：
jQuery.noConflict();
jQuery(function ($) {
$('form').submit(function(e) {
e.preventDefault(); // stop the standard form submission
$.ajax({
url: "http://www.apilayer.net/api/live?access_key=3429d739de582bfe294836892fb7fc8d&format=1¤cies=GBP,EUR,NOK,ZAR,SEK&format=1",
type: 'GET'
data: {
format: 'json'
},
dataType: 'jsonp',
success: function (data) {
var x = 0;
for (var key in data.quotes) {
document.forms["myForm"].elements[x].value = +(Math.round(1 / data.quotes[key] + "e+4") + "e-4");
x++;
}
},
error: function () {
console.log("error");
}
});
});
})(jQuery);Stack Overflow用户
发布于 2015-06-22 18:18:12
尝试在提交表单时使用事件处理程序：
$(document).ready(function() {
// Bind the event handler
$('#myForm').submit(submitRates);
});
function submitRates(e) {
e.preventDefault();
var form = $(this);
// Do AJAX stuff
}https://stackoverflow.com/questions/30977284
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号