Jquery datepicker and a multiple on select event

Question

I have a form with a jquery date select and radio buttons like below

<table>
  <tr>
    <td>
        <input type="text" id="5506_datepick_1"></input>
    </td>
    <td>
        <input id="5506_protocol_protocol_1" type="radio" value="protocol 1" name="5506[protocol]">pp1</input>
        <input id="5506_protocol_protocol_2" type="radio" value="protocol 2" name="5506[protocol]">pp2</input>
    </td>
</tr>
<tr>
    <td>
        <input type="text" id="5507_datepick_2"></input>
    </td>
    <td>
        <input id="5507_protocol_protocol_1" type="radio" value="protocol 1" name="5507[protocol]">pp1</input>
        <input id="5507_protocol_protocol_2" type="radio" value="protocol 2" name="5507[protocol]">pp2</input>
    </td>
</tr>
</table>

Whenever someone selects both the inputs on each row(example: radio for 5506* and date picker for 5506*) I want to be able to trigger a function regardless of the select order. I have tried the following (in Js Fiddle) but its useless. Anyone have any ideas on how I can go about this unobtrusively.

Jsfiddle

Answer 1

Your input selector is using ^=, which matches the exact START of a value, yet your values don't start with that value. I suggest changing that to *= so it searches anywhere within the ID. Reference jQuery Docs

Second, you're forgetting a closing ' quote for that selector.

That fixes the selector issues for activation. Now you just need to trigger a common function to check if both Date and Radio (in the same line) have been filled out.

Fixed JSFiddle

This activates the checkProtocol() function when a date is selected and passes the input text element along to it.

$(this).datepicker({
    onSelect: function() { checkProtocol( this ) }
});

This activates the checkProtocol() function when a radio button has been selected for that group and passes that element along as a parameter.

$("input[id*='protocol_protocol']").change( function() { checkProtocol(this) } );