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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
Shaun McNicholasSenior 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.