标签: jquery-forms-plugin

我正在使用CKEditor,jQuery和jQuery表单插件,我想通过Ajax查询提交CkEditor表单的内容.这是我的代码:

<form id="article-form" name="article-form" method="post" action="/myproject/save">
  <textarea name="bodyText" style="visibility: hidden; display: none;"></textarea>
  <script type="text/javascript">
    CKEDITOR.replace('bodyText');
  </script>

  <a onClick="$("#article-form").ajaxSubmit();">Submit</a>

</form>

不幸的是,似乎Ajax请求没有传递bodyText参数;

我做错了什么或如何实现我的需要？

谢谢.

我有以下代码片段,它使用jQuery Form插件将表单发布到服务器(在ajax中).

  var options = {
    dataType: "json",
    success: function(data) { 
      alert("success");
    } 
  }; 

  $form.ajaxSubmit(options);

表格:

<form enctype="multipart/form-data" id="name_change_form" method="post" action="/my_account/"> 
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='6c9b552aaba88b8442077e2957e69303' /></div> 
  <table> 
    <tr> 
      <td> 
        <label for="id_first_name">First name</label>:
      </td> 
      <td> 
        <input name="first_name" value="Patrick" maxlength="30" type="text" id="id_first_name" size="30" /> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <label for="id_last_name">Last name</label>:
      </td> 
      <td> 
        <input name="last_name" value="Sung" maxlength="30" type="text" id="id_last_name" size="30" /> 
      </td> 
    </tr> 
  </table> 
  <input type="hidden" name="form_id" value="name_change_form" /> 
</form> 

ajax实现工作正常.但是我收到了警告

资源解释为Document但使用MIME类型application/json进行传输

在Chrome开发者工具中.我想找出为什么警告,甚至更好的解决方法.

我改为使用$.post而且神奇地从那时起错误就消失了.我不知道为什么$.post有效,但不是$form.ajaxSubmit.如果有人可以提供他们的解释,这将是伟大的.至少,这个问题已得到解决.以下是新代码.

var …

我一直在使用xVal框架进行一些开发,以便在服务器端链接模型的一些验证规则,以及使用jQuery Validation插件和用于提交表单的jQuery Form插件的一些客户端验证.

但是,我在将它们连接在一起时遇到了问题.

我正在努力实现以下目标:

1. 允许客户端使用通过调用rules("add", options")jQuery Validation的插件定义的规则来执行基本验证(这是xVal用于获取模型上服务器端定义的规则的内容).

2. 如果客户端验证成功,则调用服务器以再次输入执行验证的表单数据(在客户端上验证的项目,以及无法在客户端中执行的任何其他验证).

3. 让服务器返回JSON中的对象,该对象指示可能具有特定字段的任何错误,然后设置字段的错误显示.

我通过以下方式调用xVal,在ASP.NET MVC页面中设置了插件的元数据:

<%= Html.ClientSideValidation<Model>("model") %>

这转化为客户端的以下内容:

<script type="text/javascript">
xVal.AttachValidator("model", 
{
    "Fields": 
    [ 
        {
            "FieldName":"title",
            "FieldRules": 
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                },
                {
                    "RuleName":"StringLength",
                    "RuleParameters":
                    {
                        "MaxLength":"250"
                    }
                }
            ]
        },
        {
            "FieldName":"body",
            "FieldRules":
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                }
            ]
        }
    ]
}, {})
</script>

上面的内容实际上只是转换为rules("add", options)jQuery验证器插件然后处理的一系列调用.

但是,当尝试通过jQuery表单发布此表单时,验证不会发生在表单值上.表单提交,但值根本没有验证.

如何使用jQuery Form插件提交表单,同时通过调用jQuery Validation插件进行验证ajax？

似乎Jquery.Form插件中没有错误处理工具,这非常令人沮丧.即使文档说我们可以使用$ .ajax选项,但当服务器返回错误时,我仍然无法使用'error'选项,尤其是500和400系列.是不是这个插件无法处理来自服务器的任何错误,还是一个bug等等？有人可以告诉我如何处理这个插件的错误(400,500等)？我需要你的帮助......我想要的只是一个简单的错误处理......谢谢.

$("#uploadingImg").hide();

var options = {//Define ajax options
    type: "post",
    target: "#responsePanel",
    beforeSend: function(){
        $("#uploadingImg").show();
    },
    complete: function(xhr, textStatus){
        $("#uploadingImg").hide();
    },
    success: function(response, statusString, xhr, $form){
        // I know what to do here since this option works fine
    },
    error: function(response, status, err){
        // This option doesn't catch any of the error below, 
        // everything is always 'OK' a.k.a 200
        if(response.status == 400){
            console.log("Sorry, this is bad request!");
        }
        if(response.status == 601){
            sessionTimedOut();
        }
    }
}
$("#polygonUploadForm").submit(function(){
    $(this).ajaxSubmit(options); // …

我有一个表格,我通过ajax提交.我正在使用jquery表单插件.我想要做的是获取从我的服务器返回的'Location'标题.我可以在萤火虫中看到它.但是每当我在成功回调中调用getResponseHeader()函数时,它总是返回'undefined'.

码:

form.ajaxForm({
  dataType: 'xml',
  data: {format: 'xml'},
  resetForm: true,
  success: function(xml,status,xhr){
    var location = xhr.getResponseHeader('Location');
    alert(location);
  });

位置未定义.但我可以在萤火虫中看到"位置"标题.我错过了什么？即使我从xhr对象调用getAllResponseHeaders(),它也会返回'undefined'

我试图使用jquery形式,但它在concole ajaxForm不是一个函数.正确包含了jquery.form.js,代码在文档就绪函数中...

这是脚本:

$("#apply-form").ajaxForm({

                beforeSend: function()
                {
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                },
                uploadProgress: function(event, position, total, percentComplete)
                {
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');

                },
                success: function()
                {
                    $("#bar").width('100%');
                    $("#percent").html('100%');

                },
                complete: function(response)
                {
                    $("#message").html("<font color='green'>"+response.responseText+"</font>");
                },
                error: function()
                {
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                }
            });

这是HTML表单

<form id="apply-form" enctype="multipart/form-data" method="post" action="">


    <table>
                <tr><td>CV:</td>
                    <td>
                        <input type="file" name="cover">
                    </td>
                </tr>
                <tr><td>Cover Letter:</td>
                    <td>
                        <input type="file" name="curriculum">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="progress">
                            <div id="bar"></div>
                            <div id="percent">0%</div >
                        </div> …

我正在使用Malsup的jQuery文件上传进度条,在将文件上传到服务器时可视化进度条.我现在正在使用它.我在这个插件中有以下疑问:

1)即使进度条未达到100%,也会上传文件

2)如果文件大小超过10 MB,它在进度条中加载最多100%并回显上传失败!信息.

这是代码:

<!doctype html>
<head>
<title>Uploads</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }

.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
    <h1>File Upload</h1>
    <form action="file.php" method="post" enctype="multipart/form-data">
        <input type="file" name="myfile[]" multiple><br>
        <input type="submit" value="Upload File to Server">
    </form> …

因为某种原因,我的表单只需按一下按钮即可提交两次.这是我第一次使用jquery Form插件,我想jquery提交一次,表单也"自然"提交.我已经看到,补救措施是将"return false"附加到表单的onSubmit事件处理程序.我以为我在做那件事,但显然它不起作用.

有人可以帮忙吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User form entry </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.passwordStrength.js"></script>
<script src="jquery.form.js"></script>
<script>

$(document).ready(function() {
    $('#signupForm').ajaxForm(function() { 
         var queryString = $('#signupForm').formSerialize(); 
         $.post('process.php', queryString);
    });
});
</script>
</head>
<body>
   <form id="signupForm" action="process.php" onsubmit="return false" method="post">
   <fieldset class="password">
          ... form goes here
   <button type="submit" name="formSubmit" value="submit">Click to submit</button>
   </form>

<div id="results"></div>

</body>
</html>

我已经尝试将onsubmit ="return false"添加到表单元素,但之后我根本没有提交.我也尝试过添加"return false".到jQuery,但后来我还有两次提交.我错过了什么？这似乎是根据jQuery Form Plugin网站的标准方法..我的表单有何不同？

(顺便说一下,只是为了清楚..我不是在谈论通过反复按下按钮连续多次提交多个表格的问题.我的问题是"一个提交按钮推送=两个提交".)

关注这篇文章,我有另一个发行者 - 当我点击文本链接时,如何在输入中触发浏览文件？

基本上我想隐藏表单,但是当你点击上传文本链接时会触发它.

<a href="#" class="upload">upload</a>
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;">
  <input type="file" multiple="multiple" name="file[]" />
  <input type="submit" name="upload" value="Submit"/>
</form>
<div id="output"></div>

这是我正在使用的Javascript代码:

$(document).ready(function(){
    $('.upload').click(function(){
        $(this).trigger($('input[type=file]'));
        return false;
    });

    $('input[type=file]').change(function() {
        $('#myForm').ajaxSubmit({
               target: '#output'
        });
    });
});

经过4个小时的阅读帖子试图解决这个问题.....

我使用插件上传照片并将其返回到Tinymce编辑器.它在Chrome和Firefox中运行良好但在IE中失败.在开发工具中,它在第474行的jquery.forms.js中断,因为IE不会识别该finally语句.所以我删除它,然后我在相同的文件调用时收到拒绝访问form.submit().无论我怎么都不能解决这个问题.我正在使用Jquery v. 1.8.1和Malsup Jquery Form Plugin v. 3.15.

这是代码:

$("#img-form").hide(); // hide the browse button

$("#image").change(function() {
    $("#img-form").ajaxSubmit(options); // upload the file directly after selection
});


/*
 * set options for jQuery form plugin
 */
var options = { 
    cache: false,
    contentType:"text/html",
    type: 'POST',
    url: "../upload.php",
    data: { width: w, height: h, bounds: b },
    success: showResponse  // post-submit callback 
}; 

function showResponse(responseText, statusText, xhr, $form)  { 
    var obj = JSON.parse(responseText); …