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).

You ***cannot*** have duplicate ID values in an HTML document. This is why it's always returning the first. How else is it supposed to know which button to use? — rlemon, Apr 18 '13 at 15:24

rlemon · Accepted Answer · 2013-04-18T18:11:49.080

4

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.

edited Apr 18 '13 at 18:11

answered Apr 18 '13 at 15:29

rlemon

17,518
14
92
123

thank you very much for your answer. I did apply the code you sent exactly, but it doesn't work. First the system opens a dialog box with the content of the title attribute, second the modal form get tilt with the title 'Loading...' and no further action is allowed. As explained in original question I'm new to javascript, therefore I cannot work a solution myself. – cameglio Apr 18 '13 at 16:40
Following up my previous comment, the need is to have the variable named 'title' in the javascript located in contact.js with the value of the tour name (in the example given that would be the title attribute in the HTML). Thank you! – cameglio Apr 18 '13 at 16:46
You will have to edit your question to touch on these points then. As is; the unexpected results were due to the duplicate ID value. The solution I gave you just provides an example on how to collect, and assign listeners to multiple elements. I realize you link your site but if you identified the code you are having issues with then I don't have to sift through it all. – rlemon Apr 18 '13 at 17:14
Thank you once again @rlemon, I updated the original question as you well indicated. All IDs were eliminated. With your code I can see the system dialog boxes showing the title attribute perfectly, but I don't know how to pass these values to the 'title' variable, avoiding the system dialog box. Thank you. – cameglio Apr 18 '13 at 17:51
@cameglio I updated again. If you are still having issues here I suggest stopping into the [JavaScript chat](http://chat.stackoverflow.com/rooms/17/javascript) for some further assistance. – rlemon Apr 18 '13 at 18:12
yea jump into the chat then, possibly we can have more luck with some more eyes and a live chat instead of these back and fourth messages. you should have sufficient reputation to chat now ;) – rlemon Apr 18 '13 at 19:23
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/28473/discussion-between-cameglio-and-rlemon) – cameglio Apr 18 '13 at 19:53
Hi @rlemon, just to let you know that the code you sent is working perfectly. I believe my mistake was to include that code inside the function utilizing that variable, I did try to put it at the top of the file (global), and now it does the job very well. – cameglio Apr 18 '13 at 20:28

simplemodal contact form passing HTML variables to JAVASCRIPT and to PHP

Number 1

Number 2

1 Answers1