Use same function on multiple elements

Question

I need this function to work on multiple elements in the form, right now it only works on TfDiagnosis. How do I use it on TfDiagnosis and TfDiagnosis2 with results in TfSnowmed and TfSnowmed2?

JQUERY

$(function snowmedlist() {
    $('#TfDiagnosis').on('click keyup change blur', function() {  
        if ($('#TfDiagnosis').val() == '[D]Anterograde amnesia (780.93)') {
            $('#TfSnowmed').val(206789002);
        }
        if ($('#TfDiagnosis').val() == '[D]Chills with fever (780.60)') {
            $('#TfSnowmed').val(206760004);
        }
    });
});

HTML

<input name="TfDiagnosis" type="text" id="TfDiagnosis" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed">
<input name="TfDiagnosis2" type="text" id="TfDiagnosis2" size="100" >
<input type="text" name="TfSnowmed2" id="TfSnowmed2"></td>

Thanks. How would that affect the coding though? TfDiagnosis could have a different value than TfDiagnosis2 and as a result TfSnowmed and TfSnowmed2 should also have different matched values. — user2037188
– user2037188, Commented Mar 6, 2014 at 19:50
Maybe then you should improve your question. Hard for me to figure out what you are expecting here — A. Wolff
– A. Wolff, Commented Mar 6, 2014 at 19:52
Quoting from your comment: "My actual if/else list has over 400 values." Well then you should rethink all your logic, that's not how coding usually works — A. Wolff
– A. Wolff, Commented Mar 6, 2014 at 19:56
Look @Diodeus answer, it would be really really better approach, even i'd use an object, not an array but... BTW, data should be retrieved from database, not hard coded. Maybe it is already your case, don't know. And if you generate HTML dynamically server side, you could just set custom data-* attributes — A. Wolff
– A. Wolff, Commented Mar 6, 2014 at 19:59

Diodeus - James MacFarlane · Accepted Answer · 2014-03-06 19:49:06Z

2

It's easy to work on groups of elements using class names.

<input name="TfDiagnosis" type="text" id="TfDiagnosis" class="diagnosis" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed">

js:

$('.diagnosis').on('click keyup change blur', function() {
    if($(this).val() == "...") {
        $(this).next().val(1.00);
    }
})

This way .next() is always the next element, so you don't need to keep passing IDs around. You can then store the data outside of the function to get rid of a cluster of IF statements:

var myData = []
myData['[D]Anterograde amnesia (780.93)'] = '206789002';
myData['[D]Chills with fever (780.60)'] = '206760004';

...then substitute the look-up from the array....

$('.diagnosis').on('click keyup change blur', function() {
        $(this).next().val(myData[$(this).attr(id)]);
})

answered Mar 6, 2014 at 19:49

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

5 Comments

user2037188 Over a year ago

Giving this a try. :)

Diodeus - James MacFarlane Over a year ago

Try setting it up on jsfiddle.net and sharing the link here.

user2037188 Over a year ago

I'll try to be more precise in what I am trying to accomplish. This form is for patient diagnosis. The doctor may enter more than one diagnosis, actually they want up to 5 text boxes where they can be entered. I need to match the diagnosis entered to a code, for each of the diagnoses entered. I wanted to use an array because we cant query the server for the data, but I didn't want build a function for each of the 5 possible data enter points.

Diodeus - James MacFarlane Over a year ago

You're probably better off using an auto-completer that looks up values from a database - this database can be loaded as a JS file, much like the array I describe. The person would type and they then select one of the matches sine there could be a huge number of choices.

user2037188 Over a year ago

I was finally able to get this to work, to a little effort but you can see it here: linl. Thanks so much Diodeus2!

Eduardo Quintana · Accepted Answer · 2014-03-06 19:56:49Z

1

You can use

$('#TfDiagnosis, #TfDiagnosis2').on('click keyup change blur', function() {  
     if($(this).attr('id') == 'TfDiagnosis' ){
           if ($(this).val() == '[D]Anterograde amnesia (780.93)') {
              $('#TfSnowmed').val(206789002);
           }
           if ($(this).val() == '[D]Chills with fever (780.60)') {
              $('#TfSnowmed').val(206760004);
           } 
       }else{
           //Stuff to do in case it is the #TfDiagnosis2
       }
    });

edited Mar 6, 2014 at 19:56

answered Mar 6, 2014 at 19:48

Eduardo Quintana

2,3881 gold badge16 silver badges20 bronze badges

Comments

Brian Peacock · Accepted Answer · 2014-03-06 19:51:30Z

The most efficient way to make your function work on multiple inputs is to use event delegation:

$(document).on('click keyup change blur', 'input', function() {
    var value = $(this).val(); //Get the value only once 

    if (value == '[D]Anterograde amnesia (780.93)') {
        $('#TfSnowmed').val(206789002);
    }
    else if (value == '[D]Chills with fever (780.60)') {
        $('#TfSnowmed').val(206760004);
    }
});

Which will call the function for any input on the page. You probably want to assign a class to the specific inputs you want to use like so:

HTML

<input name="TfDiagnosis" type="text" id="TfDiagnosis" class="TfInput" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed" class="TfInput">
<input name="TfDiagnosis2" type="text" id="TfDiagnosis2" class="TfInput" size="100" >
<input type="text" name="TfSnowmed2" id="TfSnowmed2" class="TfInput">

JavaScript

$(document).on('click keyup change blur', '.TfInput', function() {
    var value = $(this).val(); //Get the value only once 

    if (value == '[D]Anterograde amnesia (780.93)') {
        $('#TfSnowmed').val(206789002);
    }
    else if (value == '[D]Chills with fever (780.60)') {
        $('#TfSnowmed').val(206760004);
    }
});

Collectives™ on Stack Overflow

Use same function on multiple elements

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related