CODEWITHSUNDEEP
javascriptjqueryhtml
user2037188
user2037188

Reputation: 17

Use same function on multiple elements

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>

Upvotes: 0

Views: 2364

Answers (3)

Eduardo Quintana
Eduardo Quintana

Reputation: 2388

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
       }
    });

Upvotes: 1

Brian Peacock
Brian Peacock

Reputation: 711

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);
    }
});

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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)]);
})

Upvotes: 2

Related Questions