Question

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 [e-mail] 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

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

This is for the slide affect

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

}

This is for sending the form

<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      = '[e-mail]';
$subject = 'the subject_aboard';
$message = 'hello';
$headers = 'From: [e-mail]' . "\r\n" .
    'Reply-To: [e-mail]' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);


}



if(isset($_POST['asian']))
{
$to      = '[e-mail]';
$subject = 'the subject_Asian';
$message = 'hello';
$headers = 'From: [e-mail]' . "\r\n" .
    'Reply-To: [e-mail]' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);


}

if(isset($_POST['national']))
{
$to      = '[e-mail]';
$subject = 'the subject_National';
$message = 'hello';
$headers = 'From: [e-mail]' . "\r\n" .
    'Reply-To: [e-mail]' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);


}

Answer 1

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:

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

Then in the html just remove the forms completely and place the following on your tags:

onclick="aboardSubmit()"