Question

I have this html code :

<div id="jiraTicketAccordion">
 <div>
   <h3><a href="#">key</a></h3>
   <div>
     <form>
        <div id="jiraTable">
      <table>
        <tr>
           <td class="label"><label for="arrival">ARRIVAL :</label></td>

           <td><input type="text" name="arrival" class="arrival"  
                     onblur="checkTime(this.value);"/></td>

           <td class="label"><label for="newarrival">NEW ARRIVAL :</label></td>

          <td><input type="text" name="newarrival" class="arrival"  
                     onblur="checkTime(this.value);"/></td>

        </tr>
      </table>
     </form>
    </div>
  </div>
</div><!-- end of accordion div -->

As you can see I have javascript function checkTime for onblur() event in that input box.

Earlier I had that text box with a unique id so I used document.getElementById for accessing it in my javascript function.

But now as there are many of accordion with same structure so I don’t want to use unique ids for as there can be a large number.

So now I have a class for all those text boxes that require that validation.

But now I have to change my javascript functions where ever I used document.getElementById.

I know we can select elements by class in jquery, I also tried that but didn’t get required results.

This is what I have tried in jquery:

function checkTime(dateTime){
    alert("inside  check time");
    var errorMsg="";
    regex = /^(\d{2})\/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\/\d{2} \d{2}:\d{2} [AP]M$/;
    if(dateTime != ''){
    if(!regex.test(dateTime)){
             errorMsg = "Please enter date and time in the format: \n dd/MMM/YY HH:MM AM/PM";
         alert(errorMsg);   
    //how to make the element that called this function to 
    //blank value it it failed validation
    }
     }
}   

I wanted to access the element that called this method, so that I can manipulate that text box value.
And also I want to access other element by class in same accordion within that checkDate function.

I don’t know how to make the text box vaalue to blank it it failed validation.

Earlier when I was having id ,I was doing it as :

document.getElementById('arrival').value='';

Answer 1

Shortest path from your current code is just passing the element instead of the value:

onblur="checkTime(this);"

Then on your function:

function checkTime(el){
    var dateTime = el.value;
    // rest of function
}

Personally, I’d avoid using inline event handlers like onblur="...", and use addEventListener to bind the handlers directly from JavaScript. That would be one step further towards decoupling logic, structure and presentation.