javascript - 除非文本框有文本，否则如何限制按钮

Question

我想阻止我的提交按钮被选中，直到用户在我的文本框字段中输入文本。我已经研究了 Jquery，但不知道如何将它应用于我的情况。

如果您查看下面的代码，我有一个表格，这是我可以向我的 BD 中的表格添加值的部分我有 3 个其他不同的表格，它们相似但不相同，每个表格都有自己的提交按钮，我也想限制但关闭他们自己的文本框，而不是来自不同表格的其他文本框......

我怎么能做到这一点？

这是我创建的表之一。

<table width="600">
    <tr>
        <td width="15%">
            <b>name:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductname" />
            <span>Enter Text </br>i.e. <i>Super Small</i></span>
            </div>
        </td>
        <td width="15%">
            <b>width:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductwidth" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>height:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdproductheight" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>normal fill:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdnormalfill" />
            <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>our fill:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdourfill" />
                <span>Enter a Number </br>i.e. <i>1000</i></span>
            </div>
        </td>
        <td width="15%">
            <b>old price:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdoldprice" />
            <span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
            </div>
        </td>
        <td width="15%">
            <b>new price:</b> 
            <div class="qlabs_tooltip_bottom qlabs_tooltip_style_7">
                <input type="text" name="5050gdnewprice" /> 
            <span>Enter Dollar Amount </br>i.e. <i>150.99</i></br>no dollar sign requiered</span>
            </div>
        </td>
        <td>
            </br><input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" />
        </td>
    </tr>
</table>

任何帮助，将不胜感激

Answer 1

这是为您提供帮助的小提琴链接：

http://jsfiddle.net/4JyLk/

1. 按钮单击事件中的句柄
2. 如果所有文本框都被赋予了值，则继续提交，否则不提交。

使用为现场演示提供的链接。

注意：您可以编辑此代码以禁用/启用。

Answer 2

$('input[type=text]')​.keyup(function(){
    if(($('input[name=5050gdproductname]').val()=="")||($('input[name=5050gdproductwidth]').val()=="")||($('input[name=5050gdproductheight]').val()=="")||($('input[name=5050gdnormalfill]').val()=="")||($('input[name=5050gdourfill]').val()=="")||($('input[name=5050gdoldprice]').val()=="")||($('input[name=5050gdnewprice]').val()==""))
    {
     $('input[name=submit5050gd]').attr('disabled', 'disabled');     
}else{
    $('input[name=submit5050gd]').removeAttr('disabled');
    }
    });​​​​

<input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" disabled="disabled"/>

jsFiddle

Answer 3

很多答案，让我很困惑。在提交表单时验证表单要好得多，并且不要执行诸如禁用提交按钮之类的操作。如果您希望所有文本输入都有文本，那么：

function validate(form) {
    var el, elements = form.elements;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
        el = elements[i];

        if (el.tagName.toLowerCase == 'input' &&  el.type == 'text') {
            if (el.value == '') {

                // Deal with error, e.g. show message

                // Stop form submitting
                return false;
            }
        }
    }
}

并以以下形式：

<form ... onsubmit="return validate(this);" ...>

您还可以在每个文本输入上放置一个更改或 keyup 事件的侦听器，然后运行上面的代码并禁用提交按钮，因此return false您可以这样做：

  form.submit5050gd.disabled = true;

禁用按钮或：

  form.submit5050gd.disabled = false;

启用它。但这有点令人厌烦，用户往往不了解禁用的控件。最好让他们知道他们必须在每个输入中添加一些内容并在提交表单时进行验证。

Answer 4

做这个。

<input type="submit" name="submit5050gd" value="Submit 5050gd" id="5050gdmyButton" disabled='disabled" />

在最后一个文本框中使用 javascript 的blur事件来验证您的条件。

尝试这个。

var isBlank = false;
$('input[type="text"]').blur(function(){        
$("#YourTableID").find('input[type="text"]').each(function(){
    if($(this).val() != ''){
      isBlank = true;
      return false;
    }
});
if(!isBlank){
        $('input[type="submit"]').removeAttr('disabled');
}

});

Answer 5

试试下面的代码

//On document load
    $(function(){
          //Set button disabled
          $("input[type=submit]").attr("disabled", "disabled");

          //Append a change event listener to you inputs
          $('input').change(function(){
                //Validate your form here, example:
                var validated = true;
                if($('#5050gdnormalfill').val().length === 0) validated = false;
                //do validation for all field as above, add id field for every element

                //If form is validated enable form
                if(validated) $("input[type=submit]").removeAttr("disabled");                              
          });


    })