Close Pop-Up on Submit if Form Validation = True

I pop-up a form window from my main page.
On submit it gets form validation then should close and submit the data back to the main window.

I cant get it to do so without skipping the form validation though :-(

main.cfm - ( pops up ) -> myForm.cfm - ( targets main pg ) -> myForm_handler.cfm - ( relocates to ) ->main.cfm
----------------------------------------------------------------------------------------------------------------
This does the form validation but doesnt close the window ::

<form name="form1" method="post" action="modTitle_h.cfm" target="main" onSubmit="return validateForm(this);self.close();">
   <input type="Submit" name="Enter" value="Enter"/>
</form>

----------------------------------------------------------------------------------------------------------------
I also tried the following but it skips the form validation::

<form name="form1" method="post" action="modTitle_h.cfm" target="main" onSubmit="return validateForm(this);">
   <input type="button" name="Enter" value="Enter" onClick="document.form1.submit();self.close();"/>
</form>
----------------------------------------------------------------------------------------------------------------

I also tried closing the opener from myForm_handler.cfm but i can't seem to reference it from there...

... Just need the form to submit and close the pop up window upon validation = True
LVL 10
stu215Systems AnalystAsked:
Who is Participating?
 
James RodgersConnect With a Mentor Web Applications DeveloperCommented:
if you are refreshing  the parent pag there is no way to close the child, once the processing page loads thereference to the child is lost,  you canb try adding this to teh form page but its not 100%


at teh end of teh form validate add this line (on success of course)
setTimeout("window.close()",10000); this will close teh window after a 10 second delay, if teh page takes longer than that to process, no joy.

0
 
James RodgersWeb Applications DeveloperCommented:
at the end of the validation, if there is no error, execute this line

window.close();

thats it
0
 
James RodgersWeb Applications DeveloperCommented:
soryy, that shluld have been add it to the processing page code, make it the last line.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
stu215Systems AnalystAuthor Commented:
I tried that and it doesnt work ...

[ on the form page ]
I pasted it above and it just skips the form validation...

[ on the processing page ]
If I put window.close();  on the processing page it closes the one that should contain the results.
Im pretty sure this is due to the target='main' but i need the results to show in the main window.
0
 
stu215Systems AnalystAuthor Commented:
Hmm, any suggestions to work around this?

The form allows a user to change the title / description of a listing then updates the main page ...

Is it possible to maybe do like an onBlur event or something so that if the pop-up window is put into the background ( not the top window / focus ) it auto closes...
0
 
olivier-auberCommented:
I hope I understand what you want to do: be able to editate a title and a description from a popup
tell me about this:


mainpage (home.html)
<html>
      <body>
            <div id="name" style="font-weight: bold;">My Default title</div><br/>
            <div id="description">My amazing comment</div>
            <a href="#" onclick='window.open("popup.html", "myPopUp", "menubar=1,resizable=1,width=350,height=250")'>click to edit</a>
      </body>
<html>


popup (popup.html)
<html>
      <body>
            <script>
            function submit()
            {
                  var myName=document.getElementById("name").value;
                  var myDescription=document.getElementById("description").value;
                  var dataChecked = false;

                  //put the logic to check if the data is ok (here, it will be true)
                  dataChecked = true;
      

                  if (dataChecked)
                  {
                        opener.document.getElementById("name").innerHTML = myName;
                        opener.document.getElementById("description").innerHTML = myDescription;
                        window.close();
                  }
            }

</script>
            name: <input type="text" id="name" /><br />
            description: <input type="text" id="description" /><br />
            <a href="#" onclick="submit()">click to save</a>
      </body>
<html>
0
 
stu215Systems AnalystAuthor Commented:
Its more like ::

( viewMtg.cfm )
<html>
<body>

<a href="X" onClick="window.open(' ','name4','resizable=no,scrollbars=no,width=650,height=310,left=500,top=75,toolbar=no');document.modTitle.submit();return false;">Modify Title / Desc.</a>

<form name="modTitle" action="modTitle.cfm" method="post" target="name4">
      <input type="hidden" name="R_ID" value="#R_ID#">
</form>

</body>
</html>

( modTitle.cfm)
<html>
<script>
      window.opener.name="main";
</script>
<script src="Validation/FormValidation.js"></script>
<body>

<form name="form1" method="post" action="modTitle_h.cfm" target="main" onSubmit="return validateForm(this);self.close();">
  ... some form vars...
</form>

</body>
</html>

( modTitle_h.cfm )
<html>
<body>
 ... Process the form ...
<CFLocation url="viewMtg.cfm?R_ID=#form.R_ID#">
</body>
</html>
0
 
stu215Systems AnalystAuthor Commented:
Think im just going to have to change my page so that the forms are not in pop up windows :-\
0
 
stu215Systems AnalystAuthor Commented:
Seperately my form validation works fine, and the window close work fine...
Combining them so the window closes after validation is what does not work.

My program interacts with databases in the background so just changing the values on the opener page does not work for me :
----------------------------------------------------------------------------------------------------------------
                  if (dataChecked)
                  {
                        opener.document.getElementById("name").innerHTML = myName;
                        opener.document.getElementById("description").innerHTML = myDescription;
                        window.close();
                  }
----------------------------------------------------------------------------------------------------------------
0
 
daluuCommented:
My guess is that the ordering of your onSubmit code is the problem.

>> onSubmit="return validateForm(this);self.close();"

Logically, if you validate first & return the result, the next statement (close window) will never run because you just said to "return" or exit the whole block of code for that javascript event. If you don't need the return value, taking out "return" might work for you like:

onSubmit="validateForm(this);self.close();"

If you put window close statement first, the window will likely close before you can validate the results.

Another workaround could be to put validate function as a function call within another function like this:

onSubmit="processForm(this);"

//then in the code for processForm:
function processForm(theForm){
    var result = validateForm(theForm);
    //do whatever you need with "result"
    self.close(); // or window.close();
}
0
 
olivier-auberCommented:
so here is the process you are using:

main.cfm - ( pops up ) -> myForm.cfm - ( targets main pg ) -> myForm_handler.cfm - ( relocates to ) ->main.cfm

on myForm.cfm (the popup) you will have your form
<form name="form1" method="post" action="modTitle_h.cfm" target="main" onSubmit="return validateForm(this);">
   <input type="text" id="myNewTitle" />
   <input type="Submit" name="Enter" value="Enter"/>
</form>

the javascript function validateForm will return true or false is the data is correct or not

It the data is correct, then the popup will submit the data to modTitle_h.cfm, this page will record the data in DB and when it is done and if the recording has been working (you can know that by getting the value returned by the CFM function you called), you display the following code in the page:
<script>
opener.location.reload(true);
self.close();
</script>

so the pop up will close itself and the main page will reload and display the data updated.

if the SQL has not been working you can display an error message
0
 
LeeKowalkowskiCommented:
I think you need:

onsubmit="opener.name='main';if(validateForm(this)) setTimeout('self.close()',500); else return false;"

--
Lee
0
 
LeeKowalkowskiCommented:
It's not clear the author was satisfied with that answer, given subsequent discussion.
0
 
b0lsc0ttIT ManagerCommented:
LeeKowalkowski,

Thanks for your comment.  I debated a while on how to close this.  Let me elaborate and then feel free to let me know your recommendation if you still object.  Please keep in mind the points I mention though.

First, there are only 50 points.  At most I can accept 2 comments (20 points min required).

From the last comments the Asker posted it seems like he was helped by the comment I suggested and decided to change what he was doing.  The expert pointed out the problem trying to refresh, close, etc.

Finally I do think there were other good posts here but the lack of response makes me think I am right in what I just said (see last paragraph).  If there were more points or a second standout comment then I would've suggested a split.

I hope these details help.  Let me know if you or anyone has an objection.  Please be specific in what you recommend though.  I can't just split among all experts.  Thanks for your participation and help here though no matter how this is closed.

b0lsc0tt
EE Cleanup Volunteer
0
 
LeeKowalkowskiCommented:
Er, alright then.

--
Lee
0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0
 
stu215Systems AnalystAuthor Commented:
Hey, Sorry it took so long to get back on here... Broke a few bones and was out for a while...

I ended up getting rid of the pop-up so yeah, Jester_48's answer was the closest solution for me ::
-------------------------------------------------------------------------------------------------------------------------
"if you are refreshing  the parent pag there is no way to close the child, once the processing page loads thereference to the child is lost,  you canb try adding this to teh form page but its not 100%"
-------------------------------------------------------------------------------------------------------------------------

Thanks,
~Stu :-)
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.