[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

Open a shadow box with form submit button click

Hello I was wondering if there was a way to open a shadow box on a form submission?  I have seen it done on a number of websites but am at a loss on how to implement it.  

Any help in this arena would be appreciated.  I am using the shadow box variant "fancybox".
<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
  • 6
  • 4
  • 2
1 Solution
 
devlab2012Commented:
Change the following line:

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

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><script>\$('#ajaxresponse').fancybox();</script>"; //Your Form has been submitted
0
 
devlab2012Commented:
Change the "ajaxresponse" to "notice" in my above comment.
0
 
shark1998Author Commented:
Thanks devlab but unfortunately that didn't do anything.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Lukasz ChmielewskiCommented:
try changing the jquery
$('emailform').submit(
 $('#ajaxresponse').fancybox();
);
0
 
shark1998Author Commented:
Roads_Roads,  thank you for that link.  It seems to work for opening up other webpages quite well.  However, how do I have that same AJAX box appear with the PHP $_POST content from the form within it?

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


Or do I make another page and inlcude the PHP variables within it?
0
 
devlab2012Commented:
Try using the following code:



 
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><script>$(\"#notice\").fancybox(); $(\"#notice\").trigger(\"click\");</script>'; //Your Form has been submitted

Open in new window

0
 
devlab2012Commented:
I am posting the complete code of a page that shows a message in fancybox when page is posted. Hopefully, it will help:

 
<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

0
 
devlab2012Commented:
I have posted a solution #35690037 (after the author requested deletion of this question). This solution is tested and works fine. So it may be helpful for the author and for other users facing the similar issues.
0
 
shark1998Author Commented:
This is getting ridiculous.  IT DOES NOT WORK.  On either Firefox, IE, or Chrome browsers. Remove the question.
0
 
devlab2012Commented:
@shark1998, I am sorry for the inconvenience caused to you. I did not mean to object the deletion, I just wanted to help you. In my earlier solutions, I just tried to give you some directions. But when it did not work, I installed php on my machine, downloaded fancybox files etc. and tried it on my end. Then, I posted a complete php file after testing on my machine. It does work. If it is still not working on your end, you may not be having the referenced file "fancybox/jquery.fancybox-1.3.4.pack.js" in proper location. It may be at some different path on your machine.

At Experts-Exchange, our aim is to help the programming community.

You can continue with the deletion of this question. I have no objection.

0
 
shark1998Author Commented:
Because you just don't allow people to close questions that are never answered or a solution is not presented.
0

Featured Post

Technology Partners: 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!

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