2013-02-20 109 views
0

我有一個表單,現在有幾個基本字段。根據輸入字段值提交表格

<input name="model" type="text"> 
<input name="esn" type="text"> 
<select name="status"> 
    <option value="Pending">Pending</option> 
    <option value="Ordered">Ordered</option> 
    <option value="Received">Received</option> 
</select> 
<input type="submit" value="Save Order or Add Payment" /> 

我讓我的用戶需要編輯這個形式,所以基本上如果模型已被責令他們設定的狀態爲隨後下令,他們將其保存到數據庫。這些工作正常,但我想添加一個條件,如果他們選擇收到的狀態,並點擊提交按鈕,它會首先檢查ESN是否爲空。我知道我可以在esn字段中設置「required」,但如果我這樣做,它總是要求用戶輸入ESN,而我只需要他們在選擇接收狀態時輸入它。我們使用該表單作爲追蹤訂單的方式,直到我們實際收到交貨爲止,我們纔得到這些訂單。

任何有關如何處理這種情況的建議嗎?謝謝閱讀。

回答

4

然後,您可以使用addClass removeClass函數。添加收到選項時所需的類。

<input name="esn" id="esn" type="text"> 
<select name="status" id="status"> 


$(document).ready(function(){ 
    $('#status').change(function(){ 
     if($(this).val() == 'Received') 
      $('#esn').addClass('required'); 
     else 
      $('#esn').removeClass('required'); 
    }); 
}); 
+0

無需使用jQuery這樣一個簡單的任務。另外,請更正您的代碼以將該類添加到ESN,而不是狀態 – Techmonk 2013-02-20 07:02:17

+1

由於他在說要添加所需的類,他必須通過jQuery驗證表單。我已經糾正了。無論如何,謝謝 – hsuk 2013-02-20 07:04:46

+0

我決定與這一個去,因爲我正在嘗試學習jquery,而不是addClas,而是使用了attr。謝謝。 – 2013-02-21 03:27:27

1

你可以叫上提交一個函數,檢查值有什麼樣

<input type="button" value="Save Order or Add Payment" onclick="validate(this.form)"/> 

function validate(form) 
{ 
if (document.getElementByName(status).value==="Recieved" && document.getElementByName(esn).value==="") 
    alert("Please fill ESN"); 
else 
    form.submit(); 

} 
2
<form method='post' action='somesite.php'> 
     <input name="model" type="text"> 
     <input name="esn" type="text"> 
     <select name="status"> 
      <option value="Pending">Pending</option> 
      <option value="Ordered">Ordered</option> 
      <option value="Received">Received</option> 
     <input type="submit" value="Save Order or Add Payment" onclick='return validate();' /> 
    </form> 

    <script> function validate() { 
     if(document.getElementsByName('esn')[0].value == "") 
{ 
alert ('ESN is Empty'); 
return false; 
} 
     return true 
    } </script> 

這將工作在V,即使沒有jQuery的

1

這可以實現使用JavaScript。編寫一個條件來檢查用戶是否選擇了接收,然後如果esn爲空,返回false或顯示一些警報。在選擇框中

function checkReceived() 
     { 
      var s = document.getElementById('status'); 
      var item1 = s.options[s.selectedIndex].value; 
      if(item1=='Received') 
      { 
       alert("ens should not empty"); 
       return false; 
      } 
      else 
      { 
       return true; 
      } 
     } 



<input type="button" value="Save Order or Add Payment" onclick='checkReceived()'/> 

增加號碼並關閉選擇框正確