simplemodal contact form passing HTML variables to JAVASCRIPT and to PHP

Question

I'm new to javascript, with some experience in PHP, working mostly with HTML and css styles. I downloaded the simplemodal contact form from Eric Martin's website which looks very nice. I was able to implement the modal pop-up contact form in a testing website at this location:

http://www.patagonia-tours.net/tours/patagonia.htm

In this page I have listed three different tours, and I'd like the visitor to enquiry/ask a question on every of them, and for that purpose I added the modal form.

I need to solve two things:

Number 1

to pass a variable from the HTML to JAVASCRIPT that will be the tour name, using this variable as the title of the contact form. I figured out where this variable is located in the contact.js file and is named 'title'.

This is the HTML code for the three buttons calling the modal form:

<div id='contact-form'>
    <input type='button' name='contact' value='Ask a question / book' class='tour-button button-white' title='Tour: El Calafate / Ushuaia / Torres del Paine'>
</div> 

<div id='contact-form'>
        <input type='button' name='contact' value='Ask a question / book' class='tour-button button-white' title='Tour: Ushuaia / Australis / Paine / Calafate'>
    </div>

<div id='contact-form'>
        <input type='button' name='contact' value='Ask a question / book' class='tour-button button-white' title="Tour: Ushuaia / Puerto Madryn">

The need is to pass the value of the title attribute in the HTML to the 'title' variable in the javascript.

Number 2

I need to pass the same variable to the PHP script (contact.php), so I can use it as the subject in the email then knowing which tour the visitor is interested in, and I honestly don't now how to do this (I did try some variants without success).

Answer 1

As mentioned in my comment you cannot have duplicate ID values or else javascript does not know which one to grab (as it expects only one, you stop at the first);

if you change your ID's to classes you can do something like this:

<div id='contact-form'>
    <input type='button' name='contact' value='Ask a question / book' class='tour-button contact button-white' title="Tour: Ushuaia / Puerto Madryn">
</div>

var buttons = document.getElementsByClassName('tour-button');
for( var i = 0, l = buttons.length; i < l; i++ ) {
    buttons[i].addEventListener('click', function() { alert( this.title ); }, false);
}

as for Number 2, you should ask this in a new question with the code you have tied.

edit:

Assuming you have the variable defined somewhere else as var title = ''; or just var title; then change the above code to this:

var buttons = document.getElementsByClassName('tour-button');
for( var i = 0, l = buttons.length; i < l; i++ ) {
    buttons[i].addEventListener('click', function() { title = this.title; }, false);
}

that assigns to the variable 'title' the value of the title in the last button clicked. If you are trying to do changes on the click action I suggest you also put that code in the event handler for the button clicks.