Question

我正在尝试禁用“提交”按钮，直到某些字段被填满。我发现代码有效，但我的页面中有多个表单，所以我想选择受代码影响的表单...

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输入：在jsfiddle上的所有字段之前提交。但不是在我的页面上...我发现我正在使用tinymce用于textarea字段，这就是问题所在。填写textarea字段后，该按钮未激活！如果我删除tinymce，它的工作原理！有什么想法吗？

我发现tinymce正在使用iframe来显示它的textarea： - （（有没有办法验证它？...

Answer 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);
    }
});

Answer 2

如果说$('input:whatever')，您可以使用$('#form_id1 input:whatever')。

修改

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

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

将相同的check_submit函数绑定到TinyMCE提供的onKeyUp事件。

您可以查看documentation以获取更多参考资料。

Answer 3

使用$（“＃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);

Answer 4

怎么样

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

其中element是您的按钮对象

Answer 5

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

<强> CODE

$("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);
});

希望有所帮助

Answer 6

首先，我会给表格输入按钮指定ID 那么你应该能够使用最接近的jquery：

$('input[id$="yourbtnid"]').closest("form");

Answer 7

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

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

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

<强> See this demo in action

如何在jquery代码中选择表单id？

7 个答案: