Getting values from multiple HTML elements

Question

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 <a> tags:

<h4>New York</h4>
<a onclick="$('#buy-form').animatescroll({scrollSpeed:700,easing:'easeInOutSine'}); document.getElementById('date').value='20-24 January'; document.getElementById('venue').value='New York'; $('#resicheck').attr('disabled', true);">20-24 January</a>

This scrolls the page using the animatescroll jquery plugin, sets the date input on the form, sets the venue input on the form, and disables a checkbox. There are multiple dates for each venue so it adds a lot of code and is generally nasty.

I'd lack to package all this into a neat function, but how can I get the relevant venue and date text to use, bearing in mind the dates vary and there are multiple venues?

Vikram Deshmukh · Accepted Answer · 2013-12-02 10:18:14Z

1

Here's the script:

function updateDetails(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>
<a href="javascript:updateDetails('New York', '20-24 January');">20-24 January</a>
<a href="javascript:updateDetails('New York', '24-28 January');">24-28 January</a>
<h4>New Jersey</h4>
<a href="javascript:updateDetails('New Jersey', '10-14 January');">10-14 January</a>

answered Dec 2, 2013 at 10:18

Vikram Deshmukh

16.1k4 gold badges40 silver badges44 bronze badges

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

Comments

Haneev · Accepted Answer · 2013-12-02 10:26:53Z

1

$('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

edited Dec 2, 2013 at 10:26

answered Dec 2, 2013 at 10:17

Haneev

7755 silver badges6 bronze badges

1 Comment

ElendilTheTall Over a year ago

Am I correct in thinking this would activate on all <a> tags though?

Collectives™ on Stack Overflow

Getting values from multiple HTML elements

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related