変更入力フィールドの境界線の色

Question

エラー

私は、データベースから値を取得することによって、入力フィールドの境界線の色を変更したいです。

解決

入力フィールドは、例えば異なるオレンジと緑の色

に変更する必要があり、データベーステーブルとボーダー色の値をフェッチする必要があり募集：

SQLテーブル

p_id | product_name |付加価値税| |割引selling_price

**** 1 | **********コークス| * 10％| ****** 15％| ** 500

ユーザーがコストフィールドは自動的にを表示する必要がありますビューでautocomplete dropdownからコーラを選択します。 = 500

PRODUCT_NAME =コークス

コスト（製品が選択された後、自動的にフェッチしなければならない）

ユーザが< 500によるコストフィールドを変更する場合、入力フィールドの境界線は、> 500、オレンジでなければなりませんそれは緑色でなければなりません。

ビュー

<div class="col-lg-6"> 

     <form name="frmOne" id="newBatch" class="form-horizontal" action="" method="post"> 

      <div class="form-group"> 
       <label for="customerName" style="color:#3fa9f5;" class="col-sm-3 control-label">Product Name</label> 
       <div class="col-sm-8"> 
        <input type="text" value="<?php echo isset($post)?$post->product_name:''; ?>" class="form-control" name="systemProduct[product_name]" id="get_names_product" placeholder="Enter Product Name"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="customerName" style="color:#3fa9f5;" class="col-sm-3 control-label">Unit</label> 
       <div class="col-sm-8"> 
        <input type="text" value="<?php echo isset($post)?$post->unit:''; ?>" class="form-control" name="systemProduct[unit]" placeholder="Enter Total Unit "> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="cost" style="color:#3fa9f5;" class="col-sm-3 control-label">Product Cost</label> 

       <div class="col-sm-5"> 
        <input type="text" class="form-control" 
          value="<?php echo isset($post) ? $post->cost:''; ?>" name="systemProduct[cost]" 
          id="get_prices" placeholder="Enter Total Cost"> 
       </div> 
       <label for="cost" style="color:#3fa9f5;" class="col-sm-1 control-label">Sum</label> 

       <div class="col-sm-2"> 
        <input type="checkbox" class="form-control" name="systemProduct[sum]" value="1"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <div class="col-sm-offset-6 col-sm-5"> 
        <button type="submit" style="color:white; background:#3fa9f5;" class="btn btn-default" >Submit</button> 
       </div> 
      </div> 

     </form> 

     </div> 

    <div class="col-lg-6"> 

    <script type="text/javascript"> 
     $(function(){ 
      $("#get_names_product").autocomplete({ 
      source: "<?php echo site_url('inventory/get_product_names'); ?>" // path to the get_product_name method 
      }); 
     }); 
    </script> 

コントローラ

function get_product_names() 
{ 
    $this->load->model('productModel', 'product'); 
    if (isset($_GET['term'])) { 
     $q = strtolower($_GET['term']); 
     $this->product->get_name_product($q); 
    } 
} 

モデル

function get_name_product($q) 
{ 
    $q = $this->db->query("SELECT distinct `product_name` FROM `product` where `deleteProduct` = '0' and product_name LIKE '%$q%'"); 
    if ($q->num_rows() > 0) { 
     foreach ($q->result_array() as $row) { 
      $row_set[] = htmlentities(stripslashes($row['product_name'])); //build an array 
     } 
     echo json_encode($row_set); //format the array into json data 
    } 
} 

Answer 1

あなたは、この使用してjQueryの

$("input").change(function() { 
var value = parseFloat(this.value); 
// If the value is less than 500, add a red border 
if (value < 500) 
{ 
    $(this).css("border", "5px solid red"); 
} 

// Else if the value is greater than 500, add a green border 
else if (value > 500) 
{ 
    $(this).css("border", "5px solid green"); 
} 
// Else if the value is anything else, add a black border 
else 
{ 
    $(this).css("border", "5px solid black"); 
} 
}).trigger("change"); 

Answer 2

を行うことができます私はあなたがどれだけ多くのフォーム要素をチェックして、長さを見つけるのは簡単だろうように、同じクラスでそれらをターゲットにする必要があると思います。

チェック値の属性または値は、状況に応じて空かどうかによって異なります。

$('.common_class').each(function(){ 
 
       if($(this).val()===''){ //or target attrbiute whose value you would be getting 
 
       allFilled=false;//for validation to show common message 
 
       $(this).css();//You can place whatever css you want. 
 
       } 
 
      }); 
 

 
      if(allFilled){ 
 
       $('#submitbtn').removeAttr("disabled");//enable/disable form button... 
 
      } 
 
      allFilled=false;//reset variable.

ヒント：同様にあなたのオートコンプリートのコードを確認してください。値を挿入するには適切に記述する必要があります。