caveat: I'm pretty new to ajax/js.
I have the following script which works fine:
<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>
this automatically fills the form elements with exchange rates. I now am trying to have it only do this when a button on the page is clicked. I added:
<td>
<p>
<input tabindex="8" type="submit" name="submit" id="onlinerates" value="Use Online Rates"/>
</p>
</td>
and then changed the
$(document).ready(function() {
to
$(document.myForm.onlinerates).click(function() {
the script now does not appear to get called and the forms are not filled in.
I've tried using document.getElementById("onlinerates") , I've tried preceding this line with an additional $(document).ready(function() {
I've tried moving the script to within the form instead of the header. I tried using .focus instead of .click
none of that helped.
any ideas?
thanks in advance.
thanks to Rory for pointing out the issue with the double submit. i changed the onlinerates to use a checkbox instead of submit button. Also, i had to move the script to the form.
<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>
The issue is because onlinerates
is the id
of the button, whereas accessing the element through the form
uses the name
. That said, it's easier to use jQuery to select the element; $('#onlinerates')
.
Also note that it's better practice (for accessibility reasons) to hook to the submit
event of the parent form
instead of the click of the button
. Try this:
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);
Try using an event handler for when the form is submitted:
$(document).ready(function() {
// Bind the event handler
$('#myForm').submit(submitRates);
});
function submitRates(e) {
e.preventDefault();
var form = $(this);
// Do AJAX stuff
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.