Submit to hidden form.

Here's some example code that I found.  I would like some assistance in understanding this code.

In the js file, there is this definition:

 $(function(){
   var win = window.open('', "mywindow");
   var myform = $("#myform");
   myform.find("#myattribute").val("X");
   myform.attr("target", "mywindow");
   myform.submit();
});

Then in the form_one.html , there is code this code (in addition to a another form block between <form> tags with a submit button tied to it):

<form style="display: none;" id="myform" action="myprog.cgi?page=/mypage/index.html">
   <input id="myattribute" name="myattribute" />
   <input type="submit">
</form>

Can you please walk me through these lines?  Does the js load when the is first loaded and will it post variables to a hidden form right away?  If so, how is the hidden form displayed?
mock5cAsked:
Who is Participating?
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.

hieloCommented:
If you had a "visible" form - ex:
<form id="myform" action="myprog.cgi?page=/mypage/index.html">...</form>

when you submit, it would submit to myprog.cgi within the same browser tab/window.

However, if you add a "target" attribute -ex:
<form target="X" id="myform" action="myprog.cgi?page=/mypage/index.html">...</form>

where possible values for X are "_blank | _self | _parent | _top | framename | windowname".  If you were to omit the target attribute, its implied that target="_self".  Hence the reason it submits within the same browser tab/window on the first example above.  More info here:
http://www.w3schools.com/tags/att_form_target.asp

Since you are dealing with a hidden form, the user cannot manually submit. Furthermore, the example you posted has no target attribute set.  The javascript you posted is dynamically creating a popup window named "mywindow", then it programmatically adds target="mywindow" to the hidden form.  Lastly, it programmatically "submits" the <form>.  From the browser's point of view, at the time of submission, the <form> has target="mywindow" and since there is already a popup named "mywindow", it then submits the <form> via the popup.

>> Does the js load when the is first loaded
Yes.  The javascript code you posted is using jQuery.  In jQuery, whenever you execute:
$( function(){
   //some code here.
});

It gets executed as soon as the browser is ready to "manipulate" the html elements/nodes.

>> and will it post variables to a hidden form right away?
Well, its not "posting" to a hidden form.  It is accessing the <input> field and dynamically assigning it a value.  Read the comments in the javascript code at the end.

>> If so, how is the hidden form displayed?
Well, the hidden form is never being displayed.  That's the whole point of a hidden form.  If you look closer at your posted code, your <form> does not have a method attribute.  When omitted, it defaults to <form method="get">.  When a <form> uses the "get" method, the fields within the form are passed via the url.  So in the popup you could retrieve the data from the url.  This is greatly simplified if your popup opens an existing page - ex: window.open('preview.html','mywindow');

and not just some 'blank' window like above. See the following post:
http://www.experts-exchange.com/questions/28695425/Passing-a-value-from-a-textbox-to-a-child-pop-up-window.html#a40873558

$(function(){
   //open a popup window
   var win = window.open('', "mywindow");

  // obtain a reference to the <form> in question so that you can "manipulate" it
   var myform = $("#myform");

   // if you closely, initially <input id="myattribute"/> has no value.  Since the form is hidden
   // the user can't enter anything into it. Here you are programmatically assigning 
   // the value "X" to the <input id="myattribute"/>
   myform.find("#myattribute").val("X");

   // here you are "altering" the form so that it becomes:
   // <form target="mywindow" ...>
   myform.attr("target", "mywindow");

   // here you are submitting the form
   myform.submit();
});

Open in new window


If you are trying to create a "page preview" type of functionality, then the last link above will probably work best for you.
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
Vimal DMSenior Software EngineerCommented:
Hi,

This function will be called when the page getting loaded,

 $(function(){

This is to open new window
   var win = window.open('', "mywindow");

create instant of a form using form id
   var myform = $("#myform");

getting value by using the form control name
   myform.find("#myattribute").val("X");

setting up the new window open "target" attribute
   myform.attr("target", "mywindow");

auto form submit
   myform.submit();
});
0
mock5cAuthor Commented:
Very informative and helpful.
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
JavaScript

From novice to tech pro — start learning today.

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.