javascript - 表单无法提交，未捕获类型错误 : Illegal invocation

Question

我尝试使用的表单不​​会提交，尝试时我在控制台中不断收到“未捕获的类型错误:非法调用”。
非常感谢任何帮助，我不确定我是否不小心使用了导致问题的系统/保留字。

    <script>
$(document).ready(function($) {
    $("#submit_btn").click(function() { 
        //get input field values
        var user_name       = $('input[name=name]').val(); 
        var user_email      = $('input[name=email]').val();
        var user_add1      = $('input[name=add1]').val();
        var user_add2      = $('input[name=add2]').val();
        var user_town      = $('input[name=town]').val();
        var user_country      = $('input[name=country]').val();
        var user_postcode      = $('input[name=postcode]').val();
        var user_tel      = $('input[name=tel]').val();
        var user_entries      = $('input[name=entries]').val();
        var user_freeentries      = $('input[name=freeentries]').val();
        var user_entries      = $('input[name=entries]').val();
        var user_total      = $('input[name=total]').val();
        var user_question      = $('select[name=question]').val();

        //simple validation at client's end
        //we simply change border color to red if empty field using .css()
        var proceed = true;
        if(user_name==""){ 
            $('input[name=name]').css('border-color','red'); 
            proceed = false;
        }

        //everything looks good! proceed...
        if(proceed) 
        {

            //data to be sent to server
            post_data = {'userName':user_name, 'userEmail':user_email, 'AddressLine1':user_add1, 'AddressLine2':user_add2, 'town':user_town, 'country':user_country, 'postcode':user_add1, 'tel':user_tel, 'entries':user_entries, 'freeentries':user_freeentries, 'total':total, 'question':user_question};

            //Ajax post data to server
            $.post('enter.php', post_data, function(response){  

                //load json data from server and output message     
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';

                    //reset values in all input fields
                    $('#contact_form input').val('');   
                    $('#contact_form select').val(''); 
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form select").keyup(function() { 
        $("#contact_form input, #contact_form select").css('border-color',''); 
        $("#result").slideUp();
    });

});(jQuery);
</script> 

以下是引用表格。正在测试它，没有奇怪的字符，只有纯文本。

<fieldset id="contact_form">
                  <div id="result"></div>
                  <input type="text" name="name" id="name" placeholder="Name" />
                  <input type="email" name="email" id="email" placeholder="Email" />
                  <input type="text" name="add1" id="add1" placeholder="Address Line 1" />
                  <input type="text" name="add2" id="add2" placeholder="Address Line 2" />
                  <input type="text" name="town" id="town" placeholder="Town" />
                  <input type="text" name="country" id="country" placeholder="Country" />
                  <input type="text" name="postcode" id="postcode" placeholder="Post Code" />
                  <input type="text" name="tel" id="tel" placeholder="Telephone number" />
                  <input onblur="findTotal()" type="text" name="entries" id="entries" placeholder="Number" />
                  <input type="text" name="freeentries" id="freeentries" placeholder="Number" />
                  <input type="text" name="total" id="total" placeholder="Cost of Entry" />

                  <select style="color:#666" name="question">
                  <option value="">Please Choose...</option>           
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                  </select>
                    <br><Br><br><br><br>


                  <label><span>&nbsp;</span>
                    <button class="submit_btn animate swing" data-delay="500" id="submit_btn">Enter</button>
                  </label>
                </fieldset>

                    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('entries');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = "£" + tot * 50;
}

    </script>

Answer 1

function findTotal(){
    var arr = document.getElementsByName('entries');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = "£" + tot * 50;
}

$(document).ready(function() {
    $("#submit_btn").click(function() {
        //get input field values
        var user_name       = $('input[name=name]').val(); 
        var user_email      = $('input[name=email]').val();
        var user_add1      = $('input[name=add1]').val();
        var user_add2      = $('input[name=add2]').val();
        var user_town      = $('input[name=town]').val();
        var user_country      = $('input[name=country]').val();
        var user_postcode      = $('input[name=postcode]').val();
        var user_tel      = $('input[name=tel]').val();
        var user_freeentries      = $('input[name=freeentries]').val();
        var user_entries      = $('input[name=entries]').val();
        var user_total      = $('input#total').val();
        var user_question      = $('select[name=question]').val();
        console.log(user_total)
        //simple validation at client's end
        //we simply change border color to red if empty field using .css()
        var proceed = true;
        if(user_name==""){ 
            $('input[name=name]').css('border-color','red'); 
            proceed = false;
        }

        //everything looks good! proceed...
        if(proceed) 
        {

            //data to be sent to server
            post_data = {'userName':user_name, 'userEmail':user_email, 'AddressLine1':user_add1, 'AddressLine2':user_add2, 'town':user_town, 'country':user_country, 'postcode':user_add1, 'tel':user_tel, 'entries':user_entries, 'freeentries':user_freeentries, 'total':user_total, 'question':user_question};
            console.log(post_data)

            //Ajax post data to server
            $.post('enter.php', post_data, function(response){  

                //load json data from server and output message     
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';

                    //reset values in all input fields
                    $('#contact_form input').val('');   
                    $('#contact_form select').val(''); 
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form select").keyup(function() { 
        $("#contact_form input, #contact_form select").css('border-color',''); 
        $("#result").slideUp();
    });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is the form for reference. it is being tested with no strange characters just plain text.

<fieldset id="contact_form">
                  <div id="result"></div>
                  <input type="text" name="name" id="name" placeholder="Name" />
                  <input type="email" name="email" id="email" placeholder="Email" />
                  <input type="text" name="add1" id="add1" placeholder="Address Line 1" />
                  <input type="text" name="add2" id="add2" placeholder="Address Line 2" />
                  <input type="text" name="town" id="town" placeholder="Town" />
                  <input type="text" name="country" id="country" placeholder="Country" />
                  <input type="text" name="postcode" id="postcode" placeholder="Post Code" />
                  <input type="text" name="tel" id="tel" placeholder="Telephone number" />
                  <input onblur="findTotal()" type="text" name="entries" id="entries" placeholder="Number" />
                  <input type="text" name="freeentries" id="freeentries" placeholder="Number" />
                  <input type="text" name="total" id="total" placeholder="Cost of Entry" />

                  <select style="color:#666" name="question">
                  <option value="">Please Choose...</option>           
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                  </select>
                    <br><Br><br><br><br>


                  <label><span>&nbsp;</span>
                    <button class="submit_btn animate swing" data-delay="500" id="submit_btn">Enter</button>
                  </label>
                </fieldset>

$.post 请求中的 post_data 序列化存在问题。检查 post_data 对象中的所有值是否已正确序列化:这意味着您的数据必须是纯对象或字符串或数组。您还可以尝试在 ajax 设置中设置 processData: false (您可以找到列表 here )。

编辑:再次查看html和您的代码后，发现您传递了错误的值，而不是输入“total”的值，total而不是正确的值一个 user_total，导致错误。正确的`post_data。请参阅更正后的代码片段。