提交和photoslide代码冲突 [英] submit and photoslide code conflicts
问题描述
我遇到了一些JavaScript冲突问题，希望有人能帮助我。我使用创建页面，因此有3个div在页面上，例如div id #item 1，2和3.当每个div被点击时，页面会像 我的问题是我可以或者在单击按钮时发送电子邮件，但幻灯片不工作或幻灯片正在运行，但电子邮件未发送，具体取决于我将标记放置在div item2的列表中的哪个位置（表单之前或之后我会在下面留下一些我的代码，任何建议使代码更好/工作将非常感激。请让我知道是否需要提供更多信息。感谢。 这是基本的页面结构 这是对幻灯片的影响 这是用于发送表格 <假设你正在使用jquery（基于你列出的代码），你可以使用ajax来调用电子邮件功能，而不必刷新/重定向页面（当你提交表单时会发生什么） 下面是一个例子： 然后在html中完全删除表单并将下列内容放在您的标签： I'm having some javascript conflict problem, and hope someone can help me out. I'm creating a page using a photoslide, so there are 3 divs on the page eg div id #item 1, 2 and 3. When each div is clicked, the page will goes to the next like a photoslide demo. On my second div item2, there are 3 buttons, when each button is clicked, an email will be sent to an appropriate department eg music or math@example.com and then the page should slide to the next div #item3. My problem is that I can either make the email to be sent when a button is clicked but the slide is not working or the slide is working but the email is not sent, depending on where I place the a tag in the list in div item2 (before the form or after the form). I will leave some of my code below, any suggestion to make the code better/working would be really appreciated. Please let me know if I need supply more info. Thanks. this is the basic page structure This is for the slide affect This is for sending the form
Assuming that you are using jquery (based on the code you have listed) you could use ajax to call the email function without having to refresh/redirect the page (which is what happens when you submit the form right now) Here is an example: Then in the html just remove the forms completely and place the following on your tags:
这篇关于提交和photoslide代码冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< div ID = 包装 >
< div id =mask>
// div #item 1
< div id =item1class =item>
< div class =content> < a href =＃item2class =panel> Go< / a>
< / div>
< / div>
// div #item 2这里按钮出现问题从这里开始
< div id =item2class =item>
< div class =content>
< div id =back>
< ul id =awesome-menu>
< li>
< form action =id =aboardmethod =post>
< input type =hiddenname =aboardvalue =aboard/>
< / form>
< / li>
< li>
< form action =id =asianmethod =post>
< input type =hiddenname =asianvalue =asian/>
< / form>
< a href =＃item3onclick =formSubmit（'asian'）id =asianclass =panel>亚洲< / a>
< / li>
< li>
< form action =id =nationalmethod =post>
< input type =hiddenname =nationalvalue =national/>
< / form>
< a href =＃item3onclick =formSubmit（'national'）id =nationalclass =panel> National< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
// div #item 3
< div id =item3class =item>
< a name =item3>< / a>
< div class =content>< a href =＃item1class =panel>< img src =images / Thankyou_screen.jpgalt =Thank you/> ;< / A>< / DIV>
< / div>
< / div>
< / div>
<脚本>
$（document）.ready（function（）{
//获取与类面板的所有链接
$（'a.panel'）。click（function（）{
//重置并突出显示点击链接
$（'a.panel'）。removeClass（'selected'）;
$（this）.addClass（'selected' ）;
//获取当前项目，用于调整大小函数
current = $（this）;
//将它滚动到目标
//$('#wrapper').scrollTo($(this).attr('href'），800）;
$（'＃wrapper'）。scrollTo（$（this）.attr （'href'），2000，{
onAfter：function（id）{
if（id ==='＃item3'）{
setTimeout（function（）{
$（id）.find（'。panel'）。click（）;
}，5000）;
}
}
}）;
//取消链接默认行为
返回false;
}）;
//根据新浏览器调整所有项目的大小ize
$（window）.resize（function（）{
//调用resizePanel函数
resizePanel（）;
}）;
}）;
function resizePanel（）{
//获取浏览器宽度和高度
width = $（window）.width（）;
height = $（window）.height（）;
//获取掩码宽度：宽度*项目总数
mask_width = width * $（'。item'）。length;
//设置尺寸
$（'＃wrapper，.item'）。css（{width：width，height：height}）;
$（'＃mask'）。css（{width：mask_width，height：height}）;
//如果项目显示不正确，将它设置为corrent pos
$（'＃wrapper'）。scrollTo（$（'a.selected'）。attr（'href '），0）;
$ / code>
< script type =text / javascript>
函数formSubmit（name）
{
if（name =='aboard'）{
document.getElementById（aboard）。submit（）;
} else if（name =='asian'）{
document.getElementById（asian）。submit（）;
} else if（name =='national'）{
document.getElementById（national）。submit（）;
}
}
< / script>
$ b if（isset（$ _ POST ['aboard']））
{
$ to =' xxx@site.com;
$ subject ='the subject_aboard';
$ message ='hello';
$ headers ='发件人：webmaster@example.com'。 \r\\\
。
'回复：webmaster@example.com'。 \r\\\
。
'X-Mailer：PHP /'。 phpversion（）;
邮件（$ to，$ subject，$ message，$ headers）;
$ b if（isset（$ _ POST ['asian']））
{
$ to ='xxx@site.com';
$ subject ='subject_Asian';
$ message ='hello';
$ headers ='发件人：webmaster@example.com'。 \r\\\
。
'回复：webmaster@example.com'。 \r\\\
。
'X-Mailer：PHP /'。 phpversion（）;
邮件（$ to，$ subject，$ message，$ headers）;
$ b if（isset（$ _ POST ['national']））
{
$ to ='xxx @ site .com之间;
$ subject ='subject_National';
$ message ='hello';
$ headers ='发件人：webmaster@example.com'。 \r\\\
。
'回复：webmaster@example.com'。 \r\\\
。
'X-Mailer：PHP /'。 phpversion（）;
邮件（$ to，$ subject，$ message，$ headers）;
}
函数aboardSubmit（）{
$ .ajax（{
type：POST，
url：example.php，//将其更改为您的电子邮件脚本的路径
data：aboard = aboard， //这只是一个例子，但你可以用正确的数据
}）填充它;
}
onclick =aboardSubmit（）
<div id="wrapper">
<div id="mask">
//div #item 1
<div id="item1" class="item">
<div class="content"> <a href="#item2" class="panel">Go</a>
</div>
</div>
//div #item 2 where the buttons are problem starts here
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
<form action="" id="aboard" method="post">
<input type="hidden" name="aboard" value="aboard" />
</form>
<a href="#item3" onclick="formSubmit('aboard')" id="aboard" class="panel">aboard</a>
</li>
<li>
<form action="" id="asian" method="post">
<input type="hidden" name="asian" value="asian" />
</form>
<a href="#item3" onclick="formSubmit('asian')" id="asian" class="panel">Asian</a>
</li>
<li>
<form action="" id="national" method="post">
<input type="hidden" name="national" value="national" />
</form>
<a href="#item3" onclick="formSubmit('national')" id="national" class="panel">National</a>
</li>
</ul>
</div>
</div>
</div>
//div #item 3
<div id="item3" class="item">
<a name="item3"></a>
<div class="content"><a href="#item1" class="panel"><img src="images/Thankyou_screen.jpg" alt="Thank you" /></a></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
//get all link with class panel
$('a.panel').click(function () {
//reset and highlight the clicked link
$('a.panel').removeClass('selected');
$(this).addClass('selected');
//grab the current item, to be used in resize function
current = $(this);
//scroll it to the destination
//$('#wrapper').scrollTo($(this).attr('href'), 800);
$('#wrapper').scrollTo($(this).attr('href'), 2000,{
onAfter: function(id){
if (id === '#item3'){
setTimeout(function(){
$(id).find('.panel').click();
}, 5000);
}
}
});
//cancel the link default behavior
return false;
});
//resize all the items according to the new browser size
$(window).resize(function () {
//call the resizePanel function
resizePanel();
});
});
function resizePanel() {
//get the browser width and height
width = $(window).width();
height = $(window).height();
//get the mask width: width * total of items
mask_width = width * $('.item').length;
//set the dimension
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
//if the item is displayed incorrectly, set it to the corrent pos
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
<script type="text/javascript">
function formSubmit(name)
{
if (name == 'aboard') {
document.getElementById("aboard").submit();
} else if (name == 'asian') {
document.getElementById("asian").submit();
} else if (name == 'national') {
document.getElementById("national").submit();
}
}
</script>
<?php
if(isset($_POST['aboard']))
{
$to = 'xxx@site.com';
$subject = 'the subject_aboard';
$message = 'hello';
$headers = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
if(isset($_POST['asian']))
{
$to = 'xxx@site.com';
$subject = 'the subject_Asian';
$message = 'hello';
$headers = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
if(isset($_POST['national']))
{
$to = 'xxx@site.com';
$subject = 'the subject_National';
$message = 'hello';
$headers = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
function aboardSubmit() {
$.ajax({
type: "POST",
url: "example.php", // Change this to the path of your email script
data: "aboard=aboard", // This is just an example, but you would fill it in with correct data
});
}
onclick="aboardSubmit()"
