unable to add border color to input on click event

Question

Trying to change the border color on an onClick event.

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:

   <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>

inspect the element and see what is overriding the color. Impossible to tell on our end. But it you are going to set border, you need to assign all properties. The 'border-color' should be fine. — epascarello
– epascarello, Commented Sep 16, 2019 at 13:48
Radio buttons and checkboxes don't have a border to style. Also, are you using Bootstrap? — j08691
– j08691, Commented Sep 16, 2019 at 13:55
@j08691 - There is an input that I am trying to change, not the radio button or checkbox. — John Beasley
– John Beasley, Commented Sep 16, 2019 at 14:03
You posted $('#otherrate').css('border-color', 'red'); and $('#otherrate') is a radio button: <input class="form-check-input" type="radio" name="ratestructure" id="otherrate" value="Other Rate"> — j08691
– j08691, Commented Sep 16, 2019 at 14:06

Joel Garcia Nuño · Accepted Answer · 2019-09-16 13:49:52Z

2

First of all,

Definition and Usage The border property is a shorthand property for:

border-width border-style (required) border-color

so:

 border: 5px solid red;

at javascript:

$('#otherrate').css('border', '5px solid red');

answered Sep 16, 2019 at 13:49

Joel Garcia Nuño

1,04111 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fleflis · Accepted Answer · 2019-09-16 13:52:47Z

1

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.

answered Sep 16, 2019 at 13:52

Fleflis

293 bronze badges

Comments

Mamun · Accepted Answer · 2019-09-16 14:01:07Z

1

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"/>

edited Sep 16, 2019 at 14:01

answered Sep 16, 2019 at 13:54

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Swati · Accepted Answer · 2019-09-16 14:06:29Z

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. i.e :

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

halfer · Accepted Answer · 2020-05-26 17:33:42Z

0

I went into the HTML and added a class to the actual input. Then referenced that class in the jQuery and I was able to change the border of the input.

edited May 26, 2020 at 17:33

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Sep 16, 2019 at 14:27

John Beasley

3,09911 gold badges55 silver badges104 bronze badges

Collectives™ on Stack Overflow

unable to add border color to input on click event

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related