How to submit a form into a new window?

yes that's what I'm trying to do

I need the form value in the pop up.

var w = 600;
var h = 300;
var left = (screen.width - w) / 2;
  var top = (screen.height - h) / 4;
  var targetWin = window.open('EditDetailInfo.cfm?' , 'Group' , 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

you can submit...

set target of your form to the new window name!

var myWindow = window.open(...);
myForm.target="myWindow"
myForm.submit();

Select allOpen in new window

see my demo: https://jsfiddle.net/77c80ccp/

I can open the pop up window but the form submission is not working


var w = 600;
var h = 300;
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 4;
var myWindow = window.open('EditDetailInfo.cfm?' , 'Group' , 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);


myForm.target="myWindow"
myForm.submit();

PCADetailForm.target="myWindow"
PCADetailForm.submit();

it should be like this (my first post is not working as intended)

https://jsfiddle.net/6af30d7z/

<form name=myForm action="http://google.ca/search">
  <input name=q value='HainKurt'>
</form>

Select allOpen in new window

var myWin = window.open("about:blank", "myWindow");
myForm.target = "myWindow"
myForm.submit();

Select allOpen in new window

when it runs, it will open a blank window, and submit form to new window...
I am posting 'q=HainKurt' to google and it will show search results...

second parameter, myWindow,  is the name of window and can be targeted...

var myWin = window.open("about:blank", "myWindow");

and myWin is window object so you can use it in your javascript code, close later maybe like

myWin.moveTo(...); //move the current window
myWin.resizeTo(...); //resize the current window
...
myWin.focus();
...
myWin.close();
...

Select allOpen in new window

JavaScript Window - The Browser Object Model
https://www.w3schools.com/js/js_window.asp

You can do like this
target name must be the same as the second parameter in the window.open.

	<form action="YOURTARGETSCRIPT.php" method="post" target="group">
		What is your name ? : <input type="text" name="fullname" />
		<input type="submit" />
	</form>

Select allOpen in new window

jQuery

$(function() {
	$('form').submit(function() {
		var w = 600;
		var h = 300;
		var left = (screen.width - w) / 2;
		var top = (screen.height - h) / 4; 	
		var win = window.open('', 'group', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
	});
});

Select allOpen in new window

Working sample here

I'm not sure what I'm doing wrong


function EditRecord(Group,SEQ_NO,Field,Func,Value1,Value2,DataType)
{
      
      alert("hello");
      
      var page = '<cfoutput>#Defaultpage#</cfoutput>';
      $("#HdnGroup").val(Group);
      $("#HdnSeqNo").val(SEQ_NO);
      $("#HdnField").val(Field);
      $("#HdnFunction").val(Func);
      $("#HdnValue1").val(Value1);
      $("#HdnValue2").val(Value2);
      $("#HdnDataType").val(DataType);  



$('form#PCADetailForm').submit(function() {
            var w = 600;
            var h = 300;
            var left = (screen.width - w) / 2;
            var top = (screen.height - h) / 4;       
            var win = window.open('EditDetailInfo.cfm','group','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
      });


}



<FORM id="PCADetailForm" NAME="PCADetailForm" METHOD="POST" ACTION="EditDetailInfo.cfm" target="group">

</FORM >

____________________________________________

 <button name="EditDetailBtn" id="EditDetailBtn" type="button" style="border: 0; background: transparent;cursor:pointer;" onClick=" return EditRecord('#DetailList.PCAC_GROUP#','#DetailList.PCAC_SEQ_NO#','#DetailList.PCAC_FIELD#','#DetailList.PCAC_FUNC#','#DetailList.PCAC_VALUE1#','#DetailList.PCAC_VALUE2#','#DetailList.PCAC_DATA_TYPE#');" >
                                  <img src="../images/EditPencil_Icon.png" width="18" height="18" alt="Edit Record" style="cursor:pointer;" />
                                  </button>

Julian

your example is what I want to do but I'm not sure what I'm doing wrong.

the other way to do this is to create a session or cookies to pass my parameter from the parent form into the child form.

I need to keep the form like this

<FORM id="PCADetailForm" NAME="PCADetailForm" METHOD="POST" ACTION="" >

because it is used when I delete a record

So where is the form action defined?

in the window.open('EditDetailInfo.cfm','_blank','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

do I need something like this?


$("#PCADetailForm").attr("action","EditDetailInfo.cfm?page=" + page);

$('form#PCADetailForm').submit(function() {
            var w = 600;
            var h = 300;
            var left = (screen.width - w) / 2;
            var top = (screen.height - h) / 4;       
            var win = window.open('','_blank','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
      });

I am trying to find out why your action is not being set in the form?

Can you explain a bit more on what you are trying to do. We can make it work but it sounds like a hack - I would like to understand your requirement a bit better so I can suggest the right way forward.

Julian,

On the parent form I created a hidden fields with some values based on the user record selection.
I pass the those values thru my javascript function called EditRecord().  
In that function I store my values in my hidden field then I need to submit my form to my pop up window so I can retrieve the values.

Can you not pass the values to the popup using query parameters?

open the window with a URL that has the parameters included - the receiving script sends back the data as required

did you try the code I posted?

$('form#PCADetailForm').submit(function() {
            var w = 600;
            var h = 300;
            var left = (screen.width - w) / 2;
            var top = (screen.height - h) / 4;       
var myWin = window.open('about:blank','myWindow','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
this.target = "myWindow";
      });

Select allOpen in new window

I tried this on jsFiddle and no issues

<form id=PCADetailForm action="http://google.com/search">
  <input name=q value="HainKurt">
  <button type=submit>save</button>
</form>

Select allOpen in new window

$('form#PCADetailForm').submit(function() {
  var w = 600;
  var h = 300;
  var left = (screen.width - w) / 2;
  var top = (screen.height - h) / 4;
  var myWin = window.open('about:blank', 'myWindow', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
  this.target = "myWindow";
});

Select allOpen in new window

* I cannot save it, some issues with jsFiddle.net

@HK,
That does not set the action and it is essentially a duplicate of this answer

in that demo, action is already set to "http://google.com/search"
did you try the demo?

and it is modified version of ID: 42282291, based on the code author has now...
my demos are live and evolving :)

I finally got it to work based on Julian example.  

Thank you all for your help

Thank you!!!

It works great!!!!

Thank you Thank you and Thank you

You are welcome.