如何限制按鈕，除非文本框有文字

我想阻止我的提交按鈕被選中，直到用戶輸入文本到我的文本框的領域..我看着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>

任何幫助，將不勝感激

來源

2012-10-04 HurkNburkS

你的意思是你想禁用提交按鈕，直到表單字段被填寫？ –

解釋並沒有提供你想要的東西。儘量簡化情況。 – ankur

@LearneR對不起，這是我想要做的。 – HurkNburkS

這裏是小提琴鏈接您的幫助：在按鈕的Click事件

http://jsfiddle.net/4JyLk/

手柄如果所有文本框是給定的值，則繼續提交否則不執行。

使用提供的鏈接進行現場演示。

注意：您可以編輯此代碼以禁用/啓用。

來源

2012-10-04 07:50:41 Dhanasekar

好吧謝謝我會嘗試.. – HurkNburkS

所以我只是試圖用你的代碼staight出門看看是否提交工作..但它沒有..所以這讓我覺得我做錯了什麼..我正在refrencing我的JavaScript文件就像這樣** ** – HurkNburkS

並且該文件位於同一目錄中，並且與您的鏈接完全相同。 – HurkNburkS

執行此操作。

<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-04 05:55:57 ankur

這個條件永遠不會是真的，輸入的值是一個最小長度爲0的字符串，所以它永遠不會是「<0」。無論如何，測試'if（this.value ==''）'更簡單，更明顯。 – RobG

試試下面的代碼

//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-04 05:57:18

這段代碼是一個缺陷，如果文本框顯示在HTML頁面預填充.... –

$('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-04 06:07:51 Afshin

我試過這段代碼，但它不是爲我工作..它禁用了按鈕，但一旦我已經進入東西進入它它仍然dosnt被啓用。 – HurkNburkS

我使用你的確切代碼，它只是dosnt爲我工作。我甚至添加了**

的答案很多，所有的混亂給我。最好在驗證表單時進行驗證，而不要像禁用「提交」按鈕那樣做。如果你想所有的文字輸入有文字，則：

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;

啓用它。但是這有點令人頭疼，用戶往往不理解禁用的控件。更好地讓他們知道他們必須在每個輸入中添加一些內容並在提交表單時進行驗證。

來源

2012-10-04 06:41:04 RobG

相關問題

如何限制按鈕，除非文本框有文字

回答

相關問題