form submit open in new window certain size

@Baby_JaiDec 24.2007

ok here is my html and the form works great, I just want it to open in a new sized window

[code=php]<form action=”http://www.whatever.com/cgi/webdesign.cgi” method=”post” target=”_new”> <table width=”100%” border=”0″ cellspacing=”1″ cellpadding=”1″ class=”tableborder”> <tr> <td width=”65%” valign=”middle” class=”tableformline2″><input type=”hidden” name=”ID” value=”1″ /> Your Name: </td> <td width=”35%” valign=”middle” class=”tableformline”><div align=”right”> <input name=”name” type=”text” class=”textinput” size=”20″ /> </div></td> </tr> <tr valign=”bottom”> <td width=”65%” valign=”middle” class=”tableformline2″> Email Address:<br /> <span class=”tabbed”>You will be sent an email to verify this form going thru. If you dont put a valid email in here, this form will not be submitted.</span> </td> <td width=”35%” valign=”middle” class=”tableformline”><div align=”right”> <input name=”email” type=”text” class=”textinput” size=”20″ /> </div></td> </tr> <tr valign=”bottom”> <td width=”65%” valign=”middle” class=”tableformline2″>Current Website :<br /> <span class=”tabbed”>Even if you dont have it set up yet, please put your link in here.</span></td> <td width=”35%” valign=”middle” class=”tableformline”><div align=”right”> <input name=”website” type=”text” class=”textinput” size=”20″ /> </div></td> </tr> <tr valign=”bottom”> <td width=”65%” height=”27″ align=”left” valign=”top” class=”tableformline2″>Brief Description:<br /> <span class=”tabbed”>Be as specific as possible when giving the description of what your looking for. If you dont have enough room, dont worry about it. We will speak more on your secondary contact.</span></td> <td width=”35%” valign=”middle” class=”tableformline”><div align=”right”> <textarea name=”description” cols=”40″ rows=”3″ class=”textinput”></textarea> </div></td> </tr> <tr valign=”bottom”> <td width=”65%” height=”” valign=”middle” class=”tableformline2″> Secondary Contact:<br /> <span class=”tabbed”>If you have any type of messenger please select the type from the drop down and in the second box, please put your messenger name.</span></td> <td width=”35%” height=”” valign=”middle” class=”tableformline”><div align=”right”> <select name=”messengertype” class=”textinput”> <option selected=”selected”><—Select One If You Have It—></option> <option value=”AIM”>AIM</option> <option value=”MSN”>MSN</option> <option value=”Yahoo”>Yahoo</option> </select> <br /> <input name=”messenger” type=”text” class=”textinput” value=”N/A If You Dont Have Any” size=”40″ /> <br /> </div></td> </tr> <tr> <td width=”65%” class=”row”><div align=”left”> <input name=”Reset” type=”reset” class=”button” value=”Clear Form” /> </div></td> <td width=”35%” height=”2″ class=”row”><div align=”right”> <input type=”submit” value=”Submit Query” class=”button” /> </div></td> </tr> </table> </form>[/code]

to post a comment

HTML

8 Comments(s) _↴

@nap0leonDec 25.2007 — #Currently your "Submit Query" button runs the form's action, which is a post to whatever.com.

Are you wanting the Submit Query button to submit the form in a new window?

One way to do this is to have your "Submit Query" button launch a pop-up window of the appropraite size and have the pop-up window load the answers to your form and then do the submit.

To accomplish this, a few minor changes are needed to your form:

1- give your form a name

[CODE]
 <form action="http://www.whatever.com/cgi/webdesign.cgi" method="post" target="_new" name="OriginalForm"> 
 [/CODE]

2- give id= to all of your inputs

[CODE]
 <input name="name" id="name" type="text" class="textinput" size="20" />
 <input name="email" id="email" type="text" class="textinput" size="20" />
 <input name="website" id="website" type="text" class="textinput" size="20" />
 <textarea name="description" id="description" cols="40" rows="3" class="textinput">
 <select name="messengertype" id="messengertype" class="textinput">
 [/CODE]

3- make your Submit Query button launch the popup

[CODE]
 <a href="javascript:LaunchPopup('bleh3.aspx','500','300');">Submit Query</a>
 [/CODE]

Here's the code for LaunchPopup

[CODE]
  <script type="text/javascript">
 function LaunchPopup(page,width,height) {
 OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes,dependent=no,directories=no,width=" + width + ",height=" + height + ",x=50,y=50");
 }
 </script>
 [/CODE]

4- create the HTML page that is the pop-up (in this example it is "bleh3.aspx")

[CODE]
  <form action="http://www.whatever.com/cgi/webdesign.cgi" method="post" name="form1"> 
 ID from the calling page: <input type="text" id="ID" value="" />
 <br />name from the calling page: <input type="text" id="name" value="" />
 <br />email from the calling page: <input type="text" id="email" value="" />
 <br />website from the calling page: <input type="text" id="website" value="" />
 <br />description from the calling page: <input type="text" id="description" value="" />
 <br />messengertype from the calling page: <input type="text" id="messengertype" value="" />
 <br />messenger from the calling page: <input type="text" id="messenger" value="" />
 </form>
 <script>
 if (opener.document){
 mother = opener.document;
 document.form1.ID.value = mother.OriginalForm.ID.value;
 document.form1.name.value = mother.OriginalForm.name.value;
 document.form1.email.value = mother.OriginalForm.email.value;
 document.form1.website.value = mother.OriginalForm.website.value;
 document.form1.description.value = mother.OriginalForm.description.value;
 document.form1.messengertype.value = mother.OriginalForm.messengertype.value;
 document.form1.messenger.value = mother.OriginalForm.messenger.value;
 //document.forms['form1'].submit();
 }
 </script>
 [/CODE]

5- once you are happy with the values being properly read from the parent window, uncomment the "submit" line

[CODE]
  //document.forms['form1'].submit();
 [/CODE]

@Baby_JaiauthorDec 25.2007 — #so there is no way to have it open in a new pop up window, cause right now it runs thru a cgi which open s anew window and then closes it in 10 seconds. I just want it to be a pop up though, I guess ill have to attempt it with what your talking about

@nap0leonDec 26.2007 — #The method I posted above submits the form in a pop-up window. Perhaps I'm misunderstanding your intentions. How is the result different from what you are asking for?

@JeffBrown119May 05.2008 — #Your solution for opening the form's action page in a new window is just what I am looking for.

I have applied it to my form, but I have two questions about it.

1. In step one, shouldn't the form tag's "action=" attribute be eliminated? Otherwise two windows are opened.

2. The mother.OriginalForm.selectedanswer.value from step four comes up as undefined. Am not sure as to what is causing the problem.

My form is a vote-for-1-of-4-possible-responses (by way of a radio button), so there is just one value that I am passing.

For step 1 - I have:
[CODE]<form method="post" target="_new" name="OriginalForm">[/CODE]

step 2 -

The variable #ansID# is a Coldfusion variable. I tried hardcoding an ID number but the result was still undefined. My CF code is working fine.
[CODE]<input name="selectedanswer" id="selectedanswer" type="radio" value="#ansID#" />[/CODE]

step 3 -

Function works great.

step 4 -

I get an undefined variable for

mother.OriginalForm.selectedanswer.value:

[CODE]<form action="index_action.cfm" method="post" name="form1"> 
 <input type="radio" id="selectedanswer" name="selectedanswer" value="" />
 </form>
 <script>
 if (opener.document){
 var mother = opener.document;
 document.form1.selectedanswer.value = mother.OriginalForm.selectedanswer.value;
 
 //      document.forms['form1'].submit();
 document.write("document.form1.selectedanswer.value = " + mother.OriginalForm.selectedanswer.value);
 }
 </script>
 [/CODE]

@nap0leonMay 05.2008 — #I am not aware of any negatives to leaving the action=. I used this code previously and only had one window open. If removing it stops the duplicate window then go for it (just be sure to cross-check other browsers for compatibility). My guess is that you are somehow submitting the form twice resulting in the dupilcate window.

"document.form1.selectedanswer.value" presume the answer is not a radio button or checkbox. The syntax for getting the value from those is different.

document.form1.selectedanswer[0].checked == true means answer 1 is checked.

document.form1.selectedanswer[1].checked == true means answer 2 is checked.

document.form1.selectedanswer[2].checked == true means answer 3 is checked.

document.form1.selectedanswer[3].checked == true means answer 4 is checked.

Perhaps that helps?

@JeffBrown119May 06.2008 — #Concerning the opening of a 2nd window when OriginalForm has an action attribute; I see now that if a submit button (with an onClick event handler to invoke LaunchPopup) is used instead of a submit link, then a 2nd window will be opened.

Thanks for the reminder that radio buttons are handled differently (Dreamweaver writes form elements as if they all contained the same attributes).

I put the following code into the file that contains form1. The code detects which button was clicked but the value for selectedID remains undefined:

[CODE]
 <body>
 <form action="index_action.cfm" method="post" name="form1"> 
 <input type="text" id="selectedID" name="selectedID" value="" /> 
 </form>
 <script>
 if (opener.document){
 var mother = opener.document;
 if (mother.OriginalForm.selectedanswer[0].checked == true) {
 document.form1.selectedID.value = mother.OriginalForm.selectedID.value;
 document.write("0 document.form1.selectedID.value = " + mother.OriginalForm.selectedID.value);
 }
 if (mother.OriginalForm.selectedanswer[1].checked == true) {
 document.form1.selectedID.value = mother.OriginalForm.selectedID.value;
 document.write("1 document.form1.selectedID.value = " + mother.OriginalForm.selectedID.value);
 }
 if (mother.OriginalForm.selectedanswer[2].checked == true) {
 document.form1.selectedID.value = mother.OriginalForm.selectedID.value;
 document.write("2 document.form1.selectedID.value = " + mother.OriginalForm.selectedID.value);
 }
 if (mother.OriginalForm.selectedanswer[3].checked == true) {
 document.form1.selectedID.value = mother.OriginalForm.selectedID.value;
 document.write("3 document.form1.selectedID.value = " + mother.OriginalForm.selectedID.value);
 }
 //      document.forms['form1'].submit();
 }
 </script> 
 </body>[/CODE]

I added the selectedID text field into the OriginalForm:

[CODE]
 <input name="selectedanswer" id="selectedanswer" type="radio" value="true" /> 
 <input type="text" name="selectedID" id="selectedID" value="#ansID#" size="4" />[/CODE]

@JeffBrown119May 06.2008 — #I got it to work. In the loop of the OriginalForm that displays the radio buttons I needed to assign a different name to the text field that holds the ID of the selected radio button:

[CODE]	<cfoutput>
 <cfset fieldname = "selectedID"&#answerCount#> 
 <cfset answerCount = #answerCount# + 1>
 <tr>
 <td valign="top" class="Acells"><input name="selectedanswer" id="selectedanswer" type="radio" value="true" /> 
 <input type="text" name="#fieldname#" id="#fieldname#" value="#ansID#" size="4" />
 </td>
 </tr>
 </cfoutput>[/CODE]

With the above in place, in form1 I can now target the correct text field:

[CODE]    if (opener.document){
 var mother = opener.document;
 if (mother.OriginalForm.selectedanswer[0].checked == true) {
 document.form1.selectedID.value = mother.OriginalForm.[B]selectedID0[/B].value;
 document.write("0 document.form1.selectedID.value = " + mother.OriginalForm.[B]selectedID0[/B].value);
 }
 if (mother.OriginalForm.selectedanswer[1].checked == true) {
 document.form1.selectedID.value = mother.OriginalForm.[B]selectedID1[/B].value;
 document.write("1 document.form1.selectedID.value = " + mother.OriginalForm.[B]selectedID1[/B].value);
 :
 etc. [/CODE]

Thanks for your solution and for getting me on the right track.

@sanjoyroyNov 03.2008 — #Thanks nap0leon.

That was what I was looking for. You have saved an hrs of my time.

document.getElementById('h_order_by1').value = document.getElementById('order_by1').value;

var order1 = 'asc';

if (document.classified.order1[1].checked){

order1 = 'desc';

}

document.getElementById('h_order1').value = order1;

document.getElementById('h_order_by2').value = document.getElementById('order_by2').value;

var order2 = 'asc';

if (document.classified.order2[1].checked){

order2 = 'desc';

}

document.getElementById('h_order2').value = order2;

document.exportForm.submit();[/QUOTE]

Good job.

I am not aware of any negatives to leaving the action=. I used this code previously and only had one window open. If removing it stops the duplicate window then go for it (just be sure to cross-check other browsers for compatibility). My guess is that you are somehow submitting the form twice resulting in the dupilcate window.

"document.form1.selectedanswer.value" presume the answer is not a radio button or checkbox. The syntax for getting the value from those is different.

document.form1.selectedanswer[0].checked == true means answer 1 is checked.

document.form1.selectedanswer[1].checked == true means answer 2 is checked.

document.form1.selectedanswer[2].checked == true means answer 3 is checked.

document.form1.selectedanswer[3].checked == true means answer 4 is checked.

Perhaps that helps?[/QUOTE]

Also in #HTML _↴

Count the days since .... DateDiff Save xml document locally Using javascript variable in html code

Success!

Help @Baby_Jai spread the word by sharing this article on Twitter...

Tweet This

form submit open in new window certain size

8 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

form submit open in new window certain size

8 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #HTML _↴