Question

我是javascript的新手，有一些PHP经验，主要使用HTML和CSS样式。我从Eric Martin的网站上下载了simplemodal联系表格，看起来很不错。我能够在这个位置的测试网站上实现模态弹出联系表：

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

在这个页面中，我列出了三个不同的游览，我希望访问者在每个游戏中查询/提出问题，为此我添加了模态表格。

我需要解决两件事：

1号

将一个变量从HTML传递给JAVASCRIPT，它将成为游览名称，使用此变量作为联系表单的标题。我想出了这个变量在contact.js文件中的位置，并命名为'title'。

这是调用模态表单的三个按钮的HTML代码：

<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">

需要将HTML中title属性的值传递给javascript中的'title'变量。

2号

我需要将相同的变量传递给PHP脚本（contact.php），因此我可以将其用作电子邮件中的主题，然后知道访问者感兴趣的游览，我老实说现在不怎么样这样做（我确实尝试了一些变种而没有成功）。

Answer 1

正如我在评论中提到的，你不能有重复的ID值，否则javascript不知道要抓哪个（因为它只需要一个，你在第一个停止）;

如果您将ID更改为类，则可以执行以下操作：

<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);
}

对于第2号，你应该在一个新问题中用你绑定的代码问这个问题。

编辑：

假设您已将变量定义在其他地方var title = '';或var title;，则将上述代码更改为：

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);
}

将变量'title'分配给单击的最后一个按钮中的标题值。如果您尝试对点击操作进行更改，我建议您也将该代码放在按钮点击的事件处理程序中。

simplemodal contact form将HTML变量传递给JAVASCRIPT和PHP

1号

2号

1 个答案: