[英]unable to add border color to input on click event
Trying to change the border color on an onClick event.尝试更改 onClick 事件的边框颜色。
If a particular radio button, such as 'Other' is checked, and the user tries to save, I wanted to change the border color to red to let the user know they must enter a value in the input.如果选中了一个特定的单选按钮,例如“其他”,并且用户尝试保存,我想将边框颜色更改为红色,让用户知道他们必须在输入中输入一个值。
$('#nextsales3Btn').on('click', function() {
var ratestructure = $('input[name="ratestructure"]:checked').val(); // radio button
var otherstructure = $('#otherratein').val();
if(ratestructure == "Other" && otherstructure == "")
{
$('#otherratein').css('border', 'red');
console.log('here');
return false;
}
else
{
console.log('all good');
}
});
The above logic works.上述逻辑有效。 I can see 'here' in the console when the radio button is checked and the input is empty, but I cannot seem to change the border color of the input.当检查单选按钮并输入为空时,我可以在控制台中看到“此处”,但似乎无法更改输入的边框颜色。
I tried to use the following to no avail:我尝试使用以下方法无济于事:
$('#otherratein').css('border-color', 'red');
No success there.那里没有成功。
How can I make this work?我怎样才能使这项工作?
* EDIT * * 编辑 *
Here is how the HTML looks:这是 HTML 的外观:
<div class="form-row">
<div class="col-md-12">
<div class="form-group">
<label id="ratestructureLabel">Required Rate Structure:</label>
<br/>
<div class="form-check">
<input class="form-check-input" type="radio" name="ratestructure" id="allin" value="all-in">
<label class="form-check-label" for="yesebiz">All-In</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ratestructure" id="allindest" value="all-inD">
<label class="form-check-label" for="allindest">All-In, subject to Destinations</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ratestructure" id="allinori" value="all-inO">
<label class="form-check-label" for="allinori">All-In, subject to Origins</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ratestructure" id="boforindest" value="bofOD">
<label class="form-check-label" for="boforindest">BOF, subject to Origins & Destination</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ratestructure" id="pernote2" value="pernote2">
<label class="form-check-label" for="pernote2">Per Note 2</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ratestructure" id="surcharges" value="surcharges">
<label class="form-check-label" for="surcharges">Surcharges per tariff</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="ratestructure" id="otherrate" value="Other Rate">
<label class="form-check-label" for="otherrate">Other:</label>
<input type="text" class="form-control ml-2" name="otherstructure" id="otherrateIn" placeholder="">
</div>
</div>
</div>
</div>
First of all,首先,
Definition and Usage The border property is a shorthand property for:定义和用法 border 属性是以下各项的简写属性:
border-width border-style (required) border-color边框宽度边框样式(必需)边框颜色
so:所以:
border: 5px solid red;
at javascript:在javascript:
$('#otherrate').css('border', '5px solid red');
Only applying a color can get no results at all.只应用一种颜色根本得不到任何结果。 You can try applying the following:您可以尝试应用以下方法:
$('#otherrate').css('border', '1px solid red')
Even though I highly recommend applying as CSS instead.尽管我强烈建议改为应用 CSS。
border-color and border are not same.边框颜色和边框不一样。
$('#otherrate').css('border-color', 'red');
should work.应该管用。
$('#otherrate').css('border-color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="otherrate"/>
In case of border property color name should be use with border-width and border-style property:如果边框属性颜色名称应与边框宽度和边框样式属性一起使用:
$('#otherrate').css('border', '1px solid red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="otherrate"/>
You have to use ||
你必须使用||
instead of &&
because if any one of the condition is true you want to show border .Also , i have given class to your div
which have Others
radio-button inside it to give border to whole div.而不是&&
因为如果任何一个条件为真,你想显示边框。另外,我已经给你的div
提供了类,里面有Others
单选按钮来为整个 div 提供边框。 ie : IE :
$('#nextsales3Btn').on('click', function() { var ratestructure = $('input[name="ratestructure"]:checked').val(); // radio button var otherstructure = $('#otherrate').val(); if(ratestructure == "Other Rate" || otherstructure == "") { $('.otherrate').css('border', '1px solid red'); console.log('here'); return false; } else { //removing border $('.otherrate').css('border', ''); console.log('all good'); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="form-row"> <div class="col-md-12"> <div class="form-group"> <label id="ratestructureLabel">Required Rate Structure:</label> <br/> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="allin" value="all-in"> <label class="form-check-label" for="yesebiz">All-In</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="allindest" value="all-inD"> <label class="form-check-label" for="allindest">All-In, subject to Destinations</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="allinori" value="all-inO"> <label class="form-check-label" for="allinori">All-In, subject to Origins</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="boforindest" value="bofOD"> <label class="form-check-label" for="boforindest">BOF, subject to Origins & Destination</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="pernote2" value="pernote2"> <label class="form-check-label" for="pernote2">Per Note 2</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="ratestructure" id="surcharges" value="surcharges"> <label class="form-check-label" for="surcharges">Surcharges per tariff</label> </div> <div class="form-check form-check-inline otherrate"> <input class="form-check-input" type="radio" name="ratestructure" id="otherrate" value="Other Rate"> <label class="form-check-label" for="otherrate">Other:</label> <input type="text" class="form-control ml-2" name="otherstructure" id="otherrateIn" placeholder=""> </div> </div> </div> </div> <button id="nextsales3Btn">Check</button>
I went into the HTML and added a class to the actual input.我进入 HTML 并在实际输入中添加了一个类。 Then referenced that class in the jQuery and I was able to change the border of the input.然后在 jQuery 中引用该类,我能够更改输入的边框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.