Getting Values From Multiple Html Elements

I have a list of dates for events that customers can book via a form. At the moment, I have some cumbersome onclick script attached to tags:

New York

Solution 1:

Here's the script:

functionupdateDetails(loc, date) {
   $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});    
   document.getElementById('date').value= date; 
   document.getElementById('venue').value= loc;   
   $('#resicheck').attr('disabled', true);
}

And, here's the mark-up:

<h4>New York</h4><ahref="javascript:updateDetails('New York', '20-24 January');">20-24 January</a><ahref="javascript:updateDetails('New York', '24-28 January');">24-28 January</a><h4>New Jersey</h4><ahref="javascript:updateDetails('New Jersey', '10-14 January');">10-14 January</a>

Solution 2:

$('a').on('click', function (e) {
    $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
    $('#date').val('20-24 January');
    $('#venue').val('New York');
    $('#resicheck').attr('disabled', true);
});

This is the case for one link. For multiple links you can attach a data element on every distinct element, for example:

<a href="#"data-date="20-24 January"data-venue="New York">20-24 January</a>
<a href="#"data-date="22-25 January"data-venue="LA">22-25 January</a>

And then use the following javascript

$('a').on('click', function (e) {
    $('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
    $('#date').val($(this).data('date'));
    $('#venue').val($(this).data('venue'));
    $('#resicheck').attr('disabled', true);
});

You can use jQuery (and javascript) to attach events and take out the code in html. Accessing an ID in jQuery is with #[id] and more information is on the jQuery site