Setting a radio button based on jquery autocomplete value

Question

I have a form that directors fill out when they add an event to my database. Since the particular type of event is likely to happen more than once, I am trying to make it as easy as possible for them. Using autocomplete, I get the text values to work just fine. Having problems with radio buttons.

Example: there are 3 types of formats available - handicap, scratch, or both. Handicap is value 1, scratch is value 2 and both is value 3. I am able to add the correct value to the table when they first enter their event. How do I set the radio button that corresponds (format_1 for handicap, format_2 for scratch, format_3 for both) using autocomplete?

 $('#format').val(ui.item.f);

will return the value from the table if I use text instead of radio button

I tried to make a variable ( i.e. var f = $(".format").val();) which didn't work. What I was thinking about was something similar to setting a variable (f, for example), that would set a radio button (format_f = checked, for instance), but haven't been able to figure out how to mechanize it. Haven't been able to find any direction from my books or on the Internet.

Can someone please point me in the right direction?

So when the value of the text field changes, you want to set one of the radio buttons to checked depending on which value it changed to? — kinakuta
– kinakuta, Commented Sep 23, 2011 at 0:15
Guess I didn't explain it too well. When they first add their tournament, they use a radio button, whereby that value is written to the table. When they add another of those types of tournaments, I want to set the appropriate radio button based on what they entered previously. I just used the text example to show that I could get a text box to work. — Dennis Emory
– Dennis Emory, Commented Sep 23, 2011 at 0:20

Community · Accepted Answer · 2017-05-23 12:12:01Z

0

You need to inject this into the select function of your autocomplete. It's possible your instantiation of autocomplete does not have one, as it's not necessary for default behaviour.

Obviously you need to have the mapping of the autocomplete options and formats available, and you can have this sent back by whatever generates the autocomplete data. (It's not clear in your example whether your autocomplete is AJAX or local, but it doesn't matter.)

Ultimately you want your autocomplete to have entries like this:

[ { "id":"foo", "value":"bar", "f":"1" },
  { "id":"baz", "value":"quux", "f":"2" } ]

Then your select function at the end of your autocomplete will look like:

select: function(event, ui) {
    if (ui.item) {
        $('#format').val(ui.item.f);
    }
}

I wrote a complete example in a similar question a few days back.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Sep 23, 2011 at 2:07

RET

9,1881 gold badge32 silver badges33 bronze badges

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

4 Comments

Dennis Emory Over a year ago

Thanks, RET. I'll look into that. Part of my problem finding answers and guidance is putting the wrong question in the search box I guess!

RET Over a year ago

The other example is a bit more complex, but if you see where the select function sits in the construction of the autocomplete code, it should be fairly straightforward what's going on there.

Dennis Emory Over a year ago

Hi Ret. Finally figured out how to make what I wanted to occur happen. What I ended up having to do was to set a variable with that number, than do a switch on the 3 possibilities, connected to the following that actually forced the proper radio button checked. I would share it here but I am not knowledgeable enough to fit it in this block correctly. But thanks again for trying to help me out.

RET Over a year ago

Glad to hear you sorted it out, and appreciate the thanks. You can share your solution if you want by just adding a new answer. You might like to consider upvoting or ticking this one if it helped you solve your problem - that's the SO way.

Collectives™ on Stack Overflow

Setting a radio button based on jquery autocomplete value

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related