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

$('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 2

以下是您提供帮助的小提琴链接：

http://jsfiddle.net/4JyLk/

处理按钮点击事件
如果所有文本框都给定了值，请继续提交，否则不要。

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

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

Answer 3

这样做。

<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 4

尝试以下代码

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


    })

Answer 5

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

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);" ...>

您还可以在每个文本输入上放置一个更改或键盘事件的监听器，然后运行上面的代码并禁用提交按钮，而不是return false，而是：

  form.submit5050gd.disabled = true;

禁用按钮或：

  form.submit5050gd.disabled = false;

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

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

5 个答案: