提交和照片幻灯片代码冲突

Question

我遇到了一些 javascript 冲突问题，希望有人可以帮助我。我正在使用photoslide 创建一个页面，因此页面上有3 个div，例如div id #item 1、2 和3。单击每个div 时，页面将像photoslide demo 一样转到下一个。

在我的第二个 div item2 上，有 3 个按钮，当单击每个按钮时，将向相应的部门发送一封电子邮件，例如 music 或 math@example.com，然后页面应滑动到下一个 div #item3。

我的问题是我可以在单击按钮但幻灯片不工作时发送电子邮件，或者幻灯片工作但不发送电子邮件，具体取决于我在列表中放置 a 标签的位置在 div item2 中（表格之前或表格之后）。

我将在下面留下我的一些代码，任何使代码更好/工作的建议将不胜感激。如果我需要提供更多信息，请告诉我。谢谢。

这是基本的页面结构

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


}

Answer 1

假设您正在使用 jquery（基于您列出的代码），您可以使用 ajax 调用电子邮件功能而无需刷新/重定向页面（这是您现在提交表单时发生的情况）

这是一个例子：

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

然后在 html 中完全删除表单并将以下内容放在您的标签上：

onclick="aboardSubmit()"