2013-10-01 73 views
0

使用數字小鍵盤將值傳回給POST。如果輸入字段留空並且用戶單擊'訂購'按鈕'webiste can not display'出現錯誤。禁用按鈕,直到值輸入字段?

我想禁用「訂單」按鈕,直到一個值被輸入到所述輸入區域。

任何幫助讚賞:

 <table class="ui-bar-a" id="n_keypad" style="float: right;"> 
     <tr> 
      <td><a data-role="button" data-theme="b" class="numero">7</a></td> 
      <td><a data-role="button" data-theme="b" class="numero">8</a></td> 
      <td><a data-role="button" data-theme="b" class="numero">9</a></td> 
      <td><a data-role="button" data-theme="e" class="del">Del</a></td> 
     </tr> 
     <tr> 
      <td><a data-role="button" data-theme="b" class="numero">4</a></td> 
      <td><a data-role="button" data-theme="b" class="numero">5</a></td> 
      <td><a data-role="button" data-theme="b" class="numero">6</a></td> 
      <td><a data-role="button" data-theme="e" class="clear">Clear</a></td> 
     </tr> 
     <tr> 
      <td><a data-role="button" data-theme="b" class="numero">1</a></td> 
      <td><a data-role="button" data-theme="b" class="numero">2</a></td> 
      <td><a data-role="button" data-theme="b" class="numero">3</a></td> 
      <td><a data-role="button" data-theme="e" class="switch">+/-</a></td> 
     </tr> 
     <tr> 
      <td><a data-role="button" data-theme="e" class="neg">-</a></td> 
      <td><a data-role="button" data-theme="b" class="zero">0</a></td> 
      <td><a data-role="button" data-theme="e" class="pos">+</a></td> 
      <td></td> 
     </tr> 
    </table> 

    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 

    <p><button type="submit" name="command" value="Save" style="float: right;">Order</button></p> 

</fieldset> 
} 

     <script> 
     $(document).ready(function() { 
      $('.numero').click(function() { 
       if (!isNaN($('#myInput').val())) { 
        if (parseInt($('#myInput').val()) == 0) { 
         $('#myInput').val($(this).text()); 
        } else { 
         $('#myInput').val($('#myInput').val() + $(this).text()); 
        } 
       } 
      }); 
      $('.neg').click(function() { 
       if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) { 
         $('#myInput').val(parseInt($('#myInput').val()) - 1); 
       } 
      }); 
      $('.pos').click(function() { 
       if (!isNaN($('#myInput').val()) && $('#myInput').val().length > 0) { 
        $('#myInput').val(parseInt($('#myInput').val()) + 1); 
       } 
      }); 
      $('.del').click(function() { 
       $('#myInput').val($('#myInput').val().substring(0, $('#myInput').val().length - 1)); 
      }); 
      $('.clear').click(function() { 
       $('#myInput').val(''); 
      }); 
      $('.zero').click(function() { 
       if (!isNaN($('#myInput').val())) { 
        if (parseInt($('#myInput').val()) != 0) { 
         $('#myInput').val($('#myInput').val() + $(this).text()); 
        } 
       } 
      }); 
      $('.switch').click(function() { 
       var $input = $('#myInput'); 
       $input.val() != "" && !isNaN($input.val()) && $input.val(-$input.val()); 
      }); 
     }); 
    </script> 
+1

你的HTML代碼沒有'input'字段?雖然在客戶端驗證輸入是很好的,但是如果有人關閉了javascript,你也應該在服務器端進行,因爲他們仍然會看到你的'網站無法顯示'錯誤頁面。 –

回答

1

給你的命令按鈕的ID,改變輸入值時啓用它:

$("#order-button").removeAttr('disabled'); 

,並再次禁用它使用:

$("#order-button").attr('disabled', 'disabled'); 

而且服務器端驗證始終是一個很好的備份有

+1

歡呼安迪感謝的人 – John

相關問題