Modal window with submit button, want to stay on same page after submit clicked

I have a modal window for a complaint form. Validation is done with JS. If all is good the form is then emailed to me.

Everything works great, but I would just like the modal window to close after the submit button is pressed leaving the user on the support page. However, right now after a user clicks on the submit button they are redirected to the php file that handles the email.

You can see what i'm talking about at www.totaleeyoustore.com/support - just click on submit complaint.

I would assume there is a way to do this.

Thanks,

neo
LVL 1
MorganAsked:
Who is Participating?
 
Shaun McNicholasConnect With a Mentor Senior Marketing TechnologistCommented:
I put this solution in the other question you posted, but here's the code you'll need - just let me know if you need any explanations about what's happening and/or why.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function window_size() {
	var modalWindow = document.getElementById('modalWindow');
	var mainPage = document.getElementById('mainPage');
if (window.innerHeight)
	{ 
		win_height = self.innerHeight;
		win_width = self.innerWidth;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
	{ 
		win_height = document.documentElement.clientHeight-WinPosLeft;
		win_width = document.documentElement.clientWidth-WinPosTop;
	}
	else if (document.body)
	{ 
		win_height = document.body.clientHeight;
		win_width = document.body.clientWidth;
	}
	modalWindow.style.height=(win_height * .9) +'px';
	modalWindow.style.width=(win_width * .9)+'px';
	modalWindow.style.top=(win_height * .05)+'px';
	modalWindow.style.left=(win_width * .05)+'px';

	mainPage.style.height=win_height+'px';
	mainPage.style.width=win_width+'px';
}
function formSubmitScript() {
	document.getElementById('modalWindow').style.display='none';
	
	document.getElementById('mainPage').style.opacity=1;
}
window.onload=window_size;
window.onresize=window_size;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page Title</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
	overflow:hidden;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}
a:active {
	color: #000000;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#modalWindow {
	position: absolute;
	background-color:#999 #09F;
	border:thin #000;
	left:0px;
	top:0px;
	width:0px;
	height:0px;
	overflow:hidden;
	border:0;
	z-index:99;
	display:block;
	opacity:1;
}
#mainPage {
	position: absolute;
	background-color:#F99 #09F;
	left:0px;
	top:0px;
	width:0px;
	height:0px;
	overflow:hidden;
	border:0;
	z-index:1;
	display:block;
	opacity:.5;
}
-->
</style>
</head>
<body>
<iframe id="processing" name="processing" style="display:none;" frameborder="0" width="0" height="0"></iframe>
<div id="modalWindow">
	<table id="modalWindowTable" width="100%" height="100%" bgcolor="#CCCCCC" border="0" cellpadding="0" cellspacing="0" style="height:100%;">
    	<tr valign="middle">
        	<td width="100%" align="center">
                <form action="actionPage.php" target="processing" onsubmit="formSubmitScript();">
            	<table id="inputForm" border="0">
                	<tr><td align="center">modalWindow</td></tr>
                    <tr><td align="center"><input type="text" name="textSubmit" size="50" value="" /></td></tr>
                    <tr><td align="center"><input type="submit" name="SAVE" value="SAVE" /></td></tr>
                </table>
                </form>
            </td>
        </tr>
    </table>
</div>
<div id="mainPage">
	<table id="mainPageTable" width="100%" height="100%" bgcolor="#FF9999" border="0" cellpadding="0" cellspacing="0" style="height:100%;">
    	<tr valign="middle">
        	<td width="100%" align="center">mainPage</td>
        </tr>
    </table>
</div>
</body>
</html>

Open in new window

0
 
Maverick_CoolCommented:
you need to explain that are trying achieve little bit more.

why u need the modal window and when it should get closed. whats purpose this modal window.
If it requires functionality , can't you use ajax.
0
 
MorganAuthor Commented:
The modal window is to display a complaint form, which can be seen at the site listed in my original post.

It should close out when the user fills out all forms and clicks the submit button, or when they click the close button. Both work, however when they click on the submit button it redirects them to the from action="http://www.totaleeyoustore.com/themes/totaleeyoustore/components/script/complaint_script.php"

I don't want the redirect. I just want the forms to be submited and emailed to me via the compalint_script.php and the modal window to close, leaving the user at the support page.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Maverick_CoolCommented:
my suggestion is t use iframe or ajax div to do same.
In case you want to use a modal div, the server should the modal window to close after done processing.
0
 
Maverick_CoolCommented:
my suggestion is t use iframe or ajax div to do same.
In case you want to use a modal dialog, the server should tell the modal window to close after done processing.
0
 
MorganAuthor Commented:
How do I have the server close it out?

Ajax is an option however, I don't know anything about ajax :(
0
 
gdemariaCommented:


This is in the COldfusion zone, so I assume CF is an option.   Using CFFORM, the modal window will automatically submit asynchronously rather than submitting the entire page.  Once the action has been processed just use the ColdFusion js function hideWindow() to close the model window.   So, just two easy steps with Coldfusion, CFFORM and a js function to hide the model.
0
 
MorganAuthor Commented:
Gdrmaria:

Thank you for the reply. Where do I apply the hidewindow function?
0
 
MorganAuthor Commented:
...coldfusion??? I swore I selected PHP...

Is there a way to change zones?
0
 
gdemariaCommented:

Your Zones Are:

 Zones:  Cold Fusion Markup Language, PHP Scripting Language, JavaScript


Click Request attention if you want to remove it from CF...
0
 
Maverick_CoolCommented:
see dont panic,
go with my solution. In the modal window/submit action page after processing is over just call the javascript from php. refer this:
http://forums.devshed.com/javascript-development-115/calling-javascript-function-from-php-4718.html

inside javascipti tag execute statement :
window.close();
0
 
MorganAuthor Commented:
Maverick Cool:

Unfortently that did not work, or if it did I did not know as I was being redirected to the php email script...the whole page was blank.

maestropsm:

that worked I appreciate it! Thank you.
0
 
Shaun McNicholasSenior Marketing TechnologistCommented:
neonate

In response to the question regarding the re-display of the complaint form after its been submitted.
Can you open another question and I'll see if I can figure that one out.
I don't see, in the code you put in the other support question, anything regarding the method you are using to hide the complain form modal window. I see the code for displaying it but what is the function you are using to close the modal window when you submit that form?

That's where the problem appears to be happening - I suspect you are hiding more div tags than you are displaying when you click the function to open the modal window. It's probably a function being fired in the email form once the email is submitted.
0
 
MorganAuthor Commented:
yeah posting a new on now. called "modal window when submit, will not reopen"
0
 
MorganAuthor Commented:
Maestropsm:

You are right I was hiding the wrong div. I fixed it as outlined in the question "modal window when submit, will not reopen"

If able post a response in there and I'll award you the points as you pointed me in the right direction.

Thanks,
neo
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.