shark1998
asked on
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.
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">
<br>
<br>
<span style="color: #000000; font-weight: bold">Your Email:</span><br>
<input name="E" type="text" tabindex="2" size="32">
<br>
<br>
<span style="color: #000000; font-weight: bold">Your Phone Number:</span><br>
<input name="P" type="text" id="P" tabindex="3">
<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> </TD></TR></TBODY></TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>ASKER
Hmm, i tried that but it didn't work.
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
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
ASKER
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></stron
}
?>
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></stron
}
?>
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
}
?>ASKER
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">
<br>
<br>
<span style="color: #000000; font-weight: bold">Your Email:</span><br>
<input name="E" type="text" tabindex="2" size="32">
<br>
<br>
<span style="color: #000000; font-weight: bold">Your Phone Number:</span><br>
<input name="P" type="text" id="P" tabindex="3">
<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> </TD></TR></TBODY></TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>
type "notice" as Notice. Use same case in <div> and in script. It will work.
<script>
$('#Notice').fancybox();
$('#Notice').trigger('clic
</script>
<script>
$('#Notice').fancybox();
$('#Notice').trigger('clic
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
it never really worked and EE is not allowing me to close the questions. sooo....wtf
$("#ajaxresponse").fancybo
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></stron
}
to :
if (isset($_POST['Submit']))
{
print "<br><div class=\"Notice\" id=\"Notice\">Thank you <strong><font color=White size=4>$name</font></stron
print "<script>\$('#notice').fan
}
I am not sure that how to print a "$" character as I am not much into PHP programming. I used "\$" but you can verify