使用jquery在点击时自动填充

Question

caveat: I'm pretty new to ajax/js. 警告：我对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&currencies=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() { 我尝试使用document.getElementById（“ onlinerates”），并尝试在此行之前添加一个额外的$（document）.ready（function（）{

I've tried moving the script to within the form instead of the header. 我试过将脚本移到表单而不是标题内。 I tried using .focus instead of .click 我尝试使用.focus而不是.click

none of that helped. 这些都没有帮助。

any ideas? 有任何想法吗？

thanks in advance. 提前致谢。

FIXED (sort of): 固定（某种）：

thanks to Rory for pointing out the issue with the double submit. 感谢Rory指出重复提交的问题。 i changed the onlinerates to use a checkbox instead of submit button. 我将onlinerates更改为使用复选框而不是Submit按钮。 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&currencies=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>

Answer 1

The issue is because onlinerates is the id of the button, whereas accessing the element through the form uses the name . 问题是因为onlinerates是按钮的id ，而通过form访问元素则使用name 。 That said, it's easier to use jQuery to select the element; 也就是说，使用jQuery选择元素更容易； $('#onlinerates') . $('#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 . 还要注意，（出于可访问性的原因）更好的做法是挂接到父form的submit事件，而不是单击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&currencies=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);

Answer 2

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
}

使用jquery在点击时自动填充

问题描述

FIXED (sort of): 固定（某种）：

2 个解决方案

解决方案1
0 2015-06-22 10:16:12

解决方案2
0 2015-06-22 10:18:11

使用jquery在点击时自动填充

问题描述

FIXED (sort of): 固定（某种）：

2 个解决方案

解决方案1 0 2015-06-22 10:16:12

解决方案2 0 2015-06-22 10:18:11

解决方案1
0 2015-06-22 10:16:12

解决方案2
0 2015-06-22 10:18:11