CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
MikeEMKI
MikeEMKI

Reputation: 47

Auto-select Radio Button with Text Field?

Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.

Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.

JSFiddle

http://jsfiddle.net/p8kvQ/39/

HTML

<div>
  <input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
  <label for="UnitPrice1">$47</label>
</div>

<div>
  <input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
  <label for="UnitPrice2">Other</label>
  <input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>

JS

$('#Other1').click(function(){
  $('#UnitPrice2').trigger('click');
});

I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.

Any help would be great.

Upvotes: 1

Views: 2345

Answers (1)

Seth McClaine
Seth McClaine

Reputation: 10030

Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.

$( document ).ready(function() {
  $('#Other1').click(function(){ 
    $('#UnitPrice2').trigger('click');
  });
});

(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)

Upvotes: 4

Related Questions