1

我正在尝试禁用提交按钮，直到填写一些字段。我找到了一个有效的代码，但我的页面中有几个表单，所以我想选择受代码影响的表单...

html:

<form id="form_id1">
  <fieldset>
    <legend>Personal</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" /><br />
    Address : <textarea size="30"></textarea><br />

  </fieldset>
<input type="submit" value="Submit" />
</form>
<form id="form_id2">
  <fieldset>
<legend>Personal</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" /><br />
Address : <textarea size="30"></textarea><br />

  </fieldset>
<input type="submit" value="Submit" />
</form>

javascript:

$(document).ready(function()
{

    $('input:submit').attr("disabled", true);
    var textCounter = false;
    $('input:text, textarea').keyup(check_submit);

    function check_submit() {
        $('input:text, textarea, select').each(function()
          {
            if ($(this).val().length == 0) {
                textCounter = true;
                return false;
               }
            else {
                textCounter = false;
            }
         });

        $('input:submit').attr("disabled", textCounter);
    }
});

任何的想法？谢谢

好的，使用代码#form_id1 input:submit 在所有字段之前它都适用于jsfiddle。但不在我的页面上......我发现我正在使用 tinymce 作为 textarea 字段，这就是问题所在。填写 textarea 字段后，按钮未激活！如果我删除tinymce，它会起作用！任何的想法？

我发现 tinymce 正在使用 iframe 来显示其 textarea :-(( 有没有办法验证它？...

4

7 回答 7

1

你可以试试这个（在 jsFiddle http://jsfiddle.net/Dx6wU/上工作）

$(document).ready(function(){
    $('input:submit').attr("disabled", true);

    $("input:text, textarea, select").bind("keyup blur", function(){
        check_form($(this));
    });

    function check_form(formField){
        var form = formField.closest("form");
        var disableButton = false;
        $.each(form.find("input:text, textarea, select"), function(){
            if($(this).val().length == 0){
                disableButton = true;
            }
        });
        form.find("input:submit").attr("disabled", disableButton);
    }
});
于 2013-06-05T09:23:29.593 回答
0

它说的地方$('input:whatever')，你可以使用$('#form_id1 input:whatever').

编辑

要面对keyup事件的 TinyMCE 问题，您应该向初始化程序添加一些代码：

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onKeyUp.add(function(ed, e) {
          check_submit;
      });
   }
});

这将相同的check_submit函数绑定到onKeyUpTinyMCE 提供的事件。

您可以查看文档以获取更多参考。

于 2013-06-05T08:51:33.870 回答
0

使用 $("#form_id1 * *")

   $('#form_id1 input:text,#form_id1 textarea,#form_id1 select').each(function()
      {
        if ($(this).val().length == 0) {
            textCounter = true;
            return false;
           }
        else {
            textCounter = false;
        }
     });

    $('#form_id1 input:submit').attr("disabled", textCounter);
于 2013-06-05T08:51:39.297 回答
0

关于什么

element.parent().attr("id");

其中 element 是您的按钮对象

于 2013-06-05T08:52:52.550 回答
0

看看这里：http: //jsfiddle.net/AVsgH/53/

代码

$("form").each(function () {
    $(this).find('input:text, textarea, select').each(function () {
        if ($(this).val().length == 0) {
            textCounter = true;
            return false;
        } else {
            textCounter = false;
        }
    });
     $(this).find('input:submit').attr("disabled", textCounter);
});

希望能帮助到你

于 2013-06-05T08:56:02.387 回答
0

首先，我会为表单输入按钮提供 ID。
然后你应该能够使用最接近的jquery：

$('input[id$="yourbtnid"]').closest("form");
于 2013-06-05T08:57:12.317 回答
0

由于 keyup 事件回调附加到表单元素的后代，您可以选择受以下代码影响的表单：

$('input:text, textarea').keyup(check_submit);

function check_submit() {
    // some code
    var $form = $(this).closest('form');
    // some code 
}

看这个演示

于 2013-06-05T08:58:18.333 回答