We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

AJAX Form Help Needed with Fancybox

shark1998
shark1998 asked
on
Medium Priority
1,303 Views
Last Modified: 2012-06-27
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

Comment
Watch Question

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

Author

Commented:
Hmm, i tried that but it didn't work.
Vimal DMSenior Software Engineer
CERTIFIED EXPERT

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

Author

Commented:
vimalmaria, I really don't understand what you are saying or how this helps with this problem.  Could you provide a solution?
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

Author

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

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

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

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
it never really worked and EE is not allowing me to close the questions.  sooo....wtf
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.