Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1271
  • Last Modified:

AJAX Form Help Needed with Fancybox

Hello Experts,

I need some help with a working PHP email form that I have for my working website.  Currently I have it that when a user enters the contact information necessary in the form and then click submit, another div will appear within and give a brief thank you message with their contact information included.  I am able to do this via the PHP $_POST command.

However, I have noticed that this is probably not the best way to do it.  I would especially like to be able to include other content and notices in the response message that is presented.  I thought that using a shadowbox/ fancybox would probably be the best solution.  I have seen it on a  number of websites implemented.

My question(s) are:

1)  How do I make the fancybox appear after clicking on a submit button?  I have entered the fancybox javascript code and can get it to work with the "Ajax" link below the form.
2)  Is it possible to include the same PHP $_POST content into that fancybox pop-up?
in the future
3)  Is there a way to differentiate the type of submittion to bring up different fancybox content?  (meaning that if I get a compliment - I can say thank you, etc.  If there is a complaint - I can say "So sorry", etc. ?)

Any help with this would be greatly appreciated.  I have attached code for the page that is relevant.  
<META name=GENERATOR content="MSHTML 8.00.6001.18882">
<script language="javascript" type="text/javascript" src="files/niceforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 
	<script type="text/javascript">
		$(document).ready(function() {
				
			$("#ajaxresponse").fancybox();
		
		});
			
		
		
		
	</script>
</HEAD>
<BODY>

<DIV class=content-2>
  <TABLE class=startpage-bottomimage-table border=0 cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD width="100%">
      <DIV style="PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-TOP: 10px">
        <TABLE class=content-table border=0 cellSpacing=0 cellPadding=0 width=625>
          <TBODY>
            <TR>
              <TD class=content-left-td>
                <div class="emailform">
                  
                  <form id="ContactForm" name="ContactForm" method="post" action="" class="niceform">
                    <fieldset id="Contact">
                      <legend>YOUR CONTACT INFORMATION</legend>
                      <?php 
$name = $_POST['N'];
$subject = $_POST['S'];
if (isset($_POST['Submit']))
		  { 
		  print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
		  } 		  
	
	?>
                      
  <p class="style2"><span style="color: #000000; font-weight: bold">              Your Name:        </span><br>
    <input type="text" name="N" tabindex="1">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Email:</span><br>
    <input name="E" type="text" tabindex="2" size="32">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Phone Number:</span><br>
    <input name="P" type="text" id="P" tabindex="3">
    &nbsp; 
    <label>
      
      </label>
    </p>
                      
                      <span style="color: #000000; font-weight: bold">Subject:        </span><br>
                      <select name="S" tabindex="4">
                        <option value="Inquiry">Inquiry</option>
                        <option value="Praise">Praise</option>
                        <option value="Recommendation">Recommendation</option>
                        <option value="Help Request">I need Help!</option>
                        </select>
                      </p>
                      <p>
                        <span style="color: #000000; font-weight: bold">Comments</span>:<br>
                        <textarea name="C" cols="50" rows="5" tabindex="5"></textarea>
                        <input name="IP" type="hidden" id="hiddenField" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" tabindex="6">
                        </p>
                      <p><span style="color: #000000; font-weight: bold">Enter Security Code:</span><br>
                        <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /><br>
                        <br /><input type="text" name="captcha_code" size="16" maxlength="6" tabindex="7"/>
                        <a href="#" onClick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><img src="securimage/images/refresh.gif" alt="Refresh" width="22" height="20" border="0" align="absbottom"></a></p>
                      
                      <p>
                        <input type="submit" name="Submit" value="Submit">
                        <input type="reset" name="Reset" value="Clear">
                        </p>
                      <p><br>
                        </p>
                      </fieldset>
                    </form></div>
                <ul>
                  
                  <li><a id="ajaxresponse" href="fancybox/ajax.txt">Ajax</a>                  </li>
                </ul></TD>
              
              <TD class=content-right-td>&nbsp;</TD></TR></TBODY></TABLE>
        
        </DIV>
      </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>

Open in new window

0
shark1998
Asked:
shark1998
  • 4
  • 4
1 Solution
 
devlab2012Commented:
Basically the statement
$("#ajaxresponse").fancybox();
display a div "ajaxresponse" in a fancybox. So, you can send a similar script in your print method to display some other <div>
You can change the following code:
if (isset($_POST['Submit']))
              {
              print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
              }             


to :

if (isset($_POST['Submit']))
              {
              print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
           print "<script>\$('#notice').fancybox();</script>"

              }             

I am not sure that how to print a "$" character as I am not much into PHP programming. I used "\$" but you can verify
0
 
shark1998Author Commented:
Hmm, i tried that but it didn't work.
0
 
Vimal DMCommented:
Hai,

This FacyBox will not support for all the browsers,please try on the "jquery lightbox",can also search for the related things like using "jquery",which is more supportable and facy than the facybox.


Try
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
shark1998Author Commented:
vimalmaria, I really don't understand what you are saying or how this helps with this problem.  Could you provide a solution?
0
 
devlab2012Commented:
Replace the following block of your code:

<?php
$name = $_POST['N'];
$subject = $_POST['S'];
if (isset($_POST['Submit']))
              {
              print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
              }              
      
      ?>


with the code given below:


<?php 
$name = $_POST['N'];
$subject = $_POST['S'];
if (isset($_POST['Submit']))
	  { 
		  print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
?>

<script>
    $('#notice').fancybox();
    $('#notice').trigger('click');
</script>

<?php
	  } 		  
	
?>

Open in new window

0
 
shark1998Author Commented:
Still nothing.
<META name=GENERATOR content="MSHTML 8.00.6001.18882">
<script language="javascript" type="text/javascript" src="files/niceforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');
	</script>
	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 
	<script type="text/javascript">
		$(document).ready(function() {
				
			$("#ajaxresponse").fancybox();
		
		});
			
		
		
		
	</script>

</HEAD>
<BODY>

<DIV class=content-2>
  <TABLE class=startpage-bottomimage-table border=0 cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD width="100%">
      <DIV style="PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-TOP: 10px">
        <TABLE class=content-table border=0 cellSpacing=0 cellPadding=0 width=625>
          <TBODY>
            <TR>
              <TD class=content-left-td>
                <div class="emailform">
                  
                  <form id="ContactForm" name="ContactForm" method="post" action="" class="niceform">
                    <fieldset id="Contact">
                      <legend>YOUR CONTACT INFORMATION</legend>
                      <?php 
$name = $_POST['N'];
$subject = $_POST['S'];
if (isset($_POST['Submit']))
	  { 
		  print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
?>

<script>
    $('#notice').fancybox();
    $('#notice').trigger('click');
</script>

<?php
	  } 		  
	
?>
                      
  <p class="style2"><span style="color: #000000; font-weight: bold">              Your Name:        </span><br>
    <input type="text" name="N" tabindex="1">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Email:</span><br>
    <input name="E" type="text" tabindex="2" size="32">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Phone Number:</span><br>
    <input name="P" type="text" id="P" tabindex="3">
    &nbsp; 
    <label>
      
      </label>
    </p>
                      
                      <span style="color: #000000; font-weight: bold">Subject:        </span><br>
                      <select name="S" tabindex="4">
                        <option value="Inquiry">Inquiry</option>
                        <option value="Praise">Praise</option>
                        <option value="Recommendation">Recommendation</option>
                        <option value="Help Request">I need Help!</option>
                        </select>
                      </p>
                      <p>
                        <span style="color: #000000; font-weight: bold">Comments</span>:<br>
                        <textarea name="C" cols="50" rows="5" tabindex="5"></textarea>
                        <input name="IP" type="hidden" id="hiddenField" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" tabindex="6">
                        </p>
                      <p><span style="color: #000000; font-weight: bold">Enter Security Code:</span><br>
                        <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /><br>
                        <br /><input type="text" name="captcha_code" size="16" maxlength="6" tabindex="7"/>
                        <a href="#" onClick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><img src="securimage/images/refresh.gif" alt="Refresh" width="22" height="20" border="0" align="absbottom"></a></p>
                      
                      <p>
                        <input type="submit" name="Submit" value="Submit">
                        <input type="reset" name="Reset" value="Clear">
                        </p>
                      <p><br>
                        </p>
                      </fieldset>
                    </form></div>
               </TD>
              
              <TD class=content-right-td>&nbsp;</TD></TR></TBODY></TABLE>
        
        </DIV>
      </TD>
</TR>
</TBODY>
</TABLE>

</DIV>


</BODY>
</HTML>

Open in new window

0
 
devlab2012Commented:
type "notice" as Notice. Use same case in <div> and in script. It will work.

<script>
    $('#Notice').fancybox();
    $('#Notice').trigger('click');
</script>

0
 
devlab2012Commented:
Here is a complete PHP page that works:

 
<HTML>
<BODY>
<META name=GENERATOR content="MSHTML 8.00.6001.18882">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<script type="text/javascript">
		$(document).ready(function() {
			$("#ajaxresponse").fancybox();
		});
	</script>

</HEAD>
<BODY>

<DIV class=content-2>
  <TABLE class=startpage-bottomimage-table border=0 cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD width="100%">
      <DIV style="PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-TOP: 10px">
        <TABLE class=content-table border=0 cellSpacing=0 cellPadding=0 width=625>
          <TBODY>
            <TR>
              <TD class=content-left-td>
                <div class="emailform">
                  
                  <form id="ContactForm" name="ContactForm" method="post" action="" class="niceform">
                    <fieldset id="Contact">
                      <legend>YOUR CONTACT INFORMATION</legend>
                      <?php 
$name = $_POST['N'];
$subject = $_POST['S'];
if (isset($_POST['Submit']))
	  { 
		  print "<br><div style=\"display:none\"><a id=\"ShowNotice\" href=\"#Notice\">click here</a>";
		  print "<div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
		  print "</div>";
?>

<script>
    $(document).ready(function() {
	$('#ShowNotice').fancybox();
    	$('#ShowNotice').trigger('click');
    });
</script>

<?php
	  } 		  
	
?>
                      
  <p class="style2"><span style="color: #000000; font-weight: bold">              Your Name:        </span><br>
    <input type="text" name="N" tabindex="1">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Email:</span><br>
    <input name="E" type="text" tabindex="2" size="32">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Phone Number:</span><br>
    <input name="P" type="text" id="P" tabindex="3">
    &nbsp; 
    <label>
      
      </label>
    </p>
                      
                      <span style="color: #000000; font-weight: bold">Subject:        </span><br>
                      <select name="S" tabindex="4">
                        <option value="Inquiry">Inquiry</option>
                        <option value="Praise">Praise</option>
                        <option value="Recommendation">Recommendation</option>
                        <option value="Help Request">I need Help!</option>
                        </select>
                      </p>
                      <p>
                        <span style="color: #000000; font-weight: bold">Comments</span>:<br>
                        <textarea name="C" cols="50" rows="5" tabindex="5"></textarea>
                        <input name="IP" type="hidden" id="hiddenField" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" tabindex="6">
                        </p>
                      <p><span style="color: #000000; font-weight: bold">Enter Security Code:</span><br>
                        <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /><br>
                        <br /><input type="text" name="captcha_code" size="16" maxlength="6" tabindex="7"/>
                        <a href="#" onClick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><img src="securimage/images/refresh.gif" alt="Refresh" width="22" height="20" border="0" align="absbottom"></a></p>
                      
                      <p>
                        <input type="submit" name="Submit" value="Submit">
                        <input type="reset" name="Reset" value="Clear">
                        </p>
                      <p><br>
                        </p>
                      </fieldset>
                    </form></div>
               </TD>
              
              <TD class=content-right-td>&nbsp;</TD></TR></TBODY></TABLE>
        
        </DIV>
      </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>

Open in new window


Basically, following code is added:

 
<HTML>
<BODY>
<META name=GENERATOR content="MSHTML 8.00.6001.18882">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<script type="text/javascript">
		$(document).ready(function() {
			$("#ajaxresponse").fancybox();
		});
	</script>

</HEAD>
<BODY>

<DIV class=content-2>
  <TABLE class=startpage-bottomimage-table border=0 cellSpacing=0 cellPadding=0>
  <TBODY>
  <TR>
    <TD width="100%">
      <DIV style="PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-TOP: 10px">
        <TABLE class=content-table border=0 cellSpacing=0 cellPadding=0 width=625>
          <TBODY>
            <TR>
              <TD class=content-left-td>
                <div class="emailform">
                  
                  <form id="ContactForm" name="ContactForm" method="post" action="" class="niceform">
                    <fieldset id="Contact">
                      <legend>YOUR CONTACT INFORMATION</legend>
                      <?php 
$name = $_POST['N'];
$subject = $_POST['S'];
if (isset($_POST['Submit']))
	  { 
		  print "<br><div style=\"display:none\"><a id=\"ShowNotice\" href=\"#Notice\">click here</a>";
		  print "<div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
		  print "</div>";
?>

<script>
    $(document).ready(function() {
	$('#ShowNotice').fancybox();
    	$('#ShowNotice').trigger('click');
    });
</script>

<?php
	  } 		  
	
?>
                      
  <p class="style2"><span style="color: #000000; font-weight: bold">              Your Name:        </span><br>
    <input type="text" name="N" tabindex="1">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Email:</span><br>
    <input name="E" type="text" tabindex="2" size="32">
    &nbsp;<br>
    <br>
    <span style="color: #000000; font-weight: bold">Your Phone Number:</span><br>
    <input name="P" type="text" id="P" tabindex="3">
    &nbsp; 
    <label>
      
      </label>
    </p>
                      
                      <span style="color: #000000; font-weight: bold">Subject:        </span><br>
                      <select name="S" tabindex="4">
                        <option value="Inquiry">Inquiry</option>
                        <option value="Praise">Praise</option>
                        <option value="Recommendation">Recommendation</option>
                        <option value="Help Request">I need Help!</option>
                        </select>
                      </p>
                      <p>
                        <span style="color: #000000; font-weight: bold">Comments</span>:<br>
                        <textarea name="C" cols="50" rows="5" tabindex="5"></textarea>
                        <input name="IP" type="hidden" id="hiddenField" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>" tabindex="6">
                        </p>
                      <p><span style="color: #000000; font-weight: bold">Enter Security Code:</span><br>
                        <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" /><br>
                        <br /><input type="text" name="captcha_code" size="16" maxlength="6" tabindex="7"/>
                        <a href="#" onClick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false"><img src="securimage/images/refresh.gif" alt="Refresh" width="22" height="20" border="0" align="absbottom"></a></p>
                      
                      <p>
                        <input type="submit" name="Submit" value="Submit">
                        <input type="reset" name="Reset" value="Clear">
                        </p>
                      <p><br>
                        </p>
                      </fieldset>
                    </form></div>
               </TD>
              
              <TD class=content-right-td>&nbsp;</TD></TR></TBODY></TABLE>
        
        </DIV>
      </TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>

Open in new window

if (isset($_POST['Submit']))
	  { 
		  print "<br><div style=\"display:none\"><a id=\"ShowNotice\" href=\"#Notice\">click here</a>";
		  print "<div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></strong> for submitting your $subject. Rest assured that we will respond to you as soon as possible.</div><br>"; //Your Form has been submitted
		  print "</div>";
?>

<script>
    $(document).ready(function() {
	$('#ShowNotice').fancybox();
    	$('#ShowNotice').trigger('click');
    });
</script>

<?php
	  } 		  
	
?>

Open in new window

0
 
shark1998Author Commented:
it never really worked and EE is not allowing me to close the questions.  sooo....wtf
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now