0

ユーザーがテキストボックスのフィールドにテキストを入力するまで、送信ボタンが選択されないようにしたいのですが、Jqueryを調べましたが、状況に適用する方法がわかりません。

以下のコードを見ると、テーブルがあります。これは、BDのテーブルに値を追加できるセクションです。他に3つの異なるテーブルがありますが、それぞれに独自の送信ボタンがありますが、制限したいのですが、別のテーブルの他のテキストボックスではなく、独自のテキストボックスをオフにします。

どうすればこれを達成できますか？

これが私が作成したテーブルの1つです。

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

助けていただければ幸いです

4

5 に答える 5

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

于 2012-10-04T06:07:51.520 に答える
1

これがあなたの援助のためのフィドルリンクです：

http://jsfiddle.net/4JyLk/

  1. ボタンクリックイベントで処理
  2. すべてのテキストボックスに値が指定されている場合は、送信を続行します。それ以外の場合は実行しないでください。

ライブデモ用に提供されているリンクを使用してください。

注：このコードを編集して、無効/有効にすることができます。

于 2012-10-04T07:50:41.523 に答える
0

これを行う。

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

});
于 2012-10-04T05:55:57.663 に答える
0

次のコードを試してください

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


    })
于 2012-10-04T05:57:18.800 に答える
0

たくさんの答えがあり、すべて私を混乱させます。フォームが要約されたときにフォームを検証し、送信ボタンを無効にするなどの操作を行わない方がはるかに優れています。すべてのテキスト入力にテキストを含める場合は、次のようにします。

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;

それを有効にします。しかし、それは少し面倒であり、ユーザーは無効にされたコントロールを理解しない傾向があります。各入力に何かを入力し、フォームを送信するときに検証する必要があることを通知する方がはるかに優れています。

于 2012-10-04T06:41:04.960 に答える