无法在文档体上调用ajaxSubmit函数

时间:2014-02-05 13:44:30

标签: javascript jquery jquery-forms-plugin

我只能在页面正文中插入代码。我需要通过Ajax提交表单并将字符串发送到服务器应用程序。所以我使用jQuery表单插件。这是我尝试添加的代码:

<script src='http://somesite.ru/interactive/jquery-1.8.3.min.js'></script>
<script src='http://malsup.github.io/min/jquery.form.min.js'></script>
<link rel='stylesheet' type='text/css' href='http://somesite.ru/interactive/somesite_interactive.css'>
<div id='question_block'>
  <b>You can left your question at the form right here:</b>
  <form action='http://somesite.ru/interactive/question' id='interactive_form'>
    <span>Your name:</span><input type='text' name='sender' size='64'>
    <textarea name='question_text'></textarea>
    <input type='button' id='interactive_submit_question' value='Отправить'>
  </form>

  <script type='text/javascript'>
    $("#interactive_submit_question").click(function(){
      $("#interactive_form").ajaxSubmit();
      $("#interactive_question_block").html("<b>Thanks! Your question was submited successfully.</b>");
    });
 </script>

页面加载时我没有收到任何错误,但是当我点击按钮时

  

“TypeError:$(...)。ajaxSubmit不是函数”。

但我只是用

导入表单插件
<script src='http://malsup.github.io/min/jquery.form.min.js'></script>

更新
看起来问题是在这个页面已经加载了jQuery(2次)和旧版本的表单插件。我只是用一个简单的函数$ .post()将数据发送到我的服务器。

2 个答案:

答案 0 :(得分:2)

为什么不使用$ .ajax?同样简单,您可以更好地控制提交的内容。

答案 1 :(得分:2)

你真的需要ajaxSubmit方法吗?你可以试试这个:

<script type='text/javascript'>
    $(document).ready(function() {
        var helper = {};
        helper.parseFormData = function parseFormData(form) {
            var json = {};
            form.find("[name]").each(function() {
                var _name = $(this).attr("name")
                    , _value = $(this).attr("value");

                json[_name] = _value;
            });

            return json;
        };
        helper.submitForm = function submitForm(form, callback) {
            var _data = helper.parseFormData(form)
                , _url = form.attr("action")
                , _type = form.attr("method");

            $.ajax({
                type: _type,
                url: _url,
                data: _data,
                success: function(content, p2, p3) {
                    callback(content);
                },
                error: function(p1, p2, p3) {
                    callback(null);
                }
            });
        };


        // submit form on button click
        $("#interactive_submit_question").click(function(){
            helper.submitForm($("#interactive_form"), function() {
                $("#interactive_question_block").html("<b>Thanks! Your question was submited successfully.</b>");
            });
        });
    });
</script>