使用javascript根据从数据库中获取的值更改输入字段的边框颜色

Question

错误

我想通过从数据库获取值来更改输入字段的边框颜色。

想要的解决方案

输入字段应从数据库表中获取值，并且边框颜色必须更改为橙色和绿色

例如：

SQL表

p_id | 产品名称| 增值税| 折扣| selling_price

**** 1 | **********可乐| * 10％| ****** 15％| ** 500

当用户从视图的autocomplete dropdown中选择可乐时 ，费用字段必须自动显示500 。

product_name =可乐

费用= 500（选择产品后必须自动提取）

如果用户将成本字段更改为<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

我认为您只需要检查多少个表单元素并将它们定位到同一类即可，这样很容易找到长度。

然后根据情况检查value属性或val是否为空。

 $('.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. 

提示：请同时检查您的自动填充代码。 应该正确编写以插入值。