Learn how to a build a cloud-first strategyRegister Now

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

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
0
stu215
Asked:
stu215
  • 6
  • 3
  • 3
  • +4
1 Solution
 
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
 
stu215Author 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
James RodgersWeb 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
 
stu215Author 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
 
stu215Author 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
 
stu215Author Commented:
Think im just going to have to change my page so that the forms are not in pop up windows :-\
0
 
stu215Author 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
 
b0lsc0ttCommented:
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
 
stu215Author 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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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