PDA

Click to See Complete Forum and Search --> : Using window.open with dynamic form button

birdycarolyn
08-26-2003, 09:33 AM
I'm very new to Javascript and was hoping someone could help me out. I am working on a form that has two buttons. However, each button needs to call a separate page that obtains results from a database, so I'm dynamically setting the ACTION and TARGET properties of the form through the following code:


<INPUT type="button" value="View Results" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Printer Friendly" name=button2 onclick="return OnButton2();">

function OnButton1()
{ document.Form1.action = "results_vr1.asp";
document.Form1.target = "_self";
document.Form1.submit();
return true;
}

function OnButton2()
{ document.Form1.action = "results_vr2.asp"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}

In function OnButton2(), the target is set to _blank which is what I want, but at the same time I would like to incorporate the Window.Open command to control how the window opens and it's width and height:

window.open("results_vr2.asp", "newwindow", "resizeable=yes,scrollbars=yes,toolbar=yes,menubar=yes,width=750,height=550,innerWidth=750,innerHeigh t=550,left=0,top=0");


Does anyone know how I can incorporate the 2? As a bonus, does anyone know how I can keep sending my data to the opened blank window so that I don't have many windows opened every time they choose the button (in other words, keep the focus on that window while refreshing the data table within it)?

I hope I am being clear and appreciate any help! Carolyn
AdamBrill
08-26-2003, 10:05 AM
Try this:<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function do_submit(element){
the_form = element.form;
win = window.open();
the_form.action="whatever.asp";
win.document.write(document.getElementById('test').innerHTML);
win.document.cSize.submit();
}
</script>
</head>

<body>
<div id="test">
<form name="cSize" method="post" action="default.asp">
<input type="text"><br>
<input type=button onclick="do_submit(this)" value="Submit!">
</form>
</div>
</body>
</html>
birdycarolyn
08-26-2003, 10:58 AM
Thanks for the reply, but can you clarify some things for me?

1) onclick="do_submit(this)
What am I actually submitting with the word this? When I call my other asp page, it gets the variables required from the form.

2) win = window.open();
Does this actually call the function window.open that I have to specify how big the window is?

3) win.document.write(document.getElementById('test').innerHTML);

What does this do? What is test?

Thanks for your help!
Carolyn
AdamBrill
08-26-2003, 11:10 AM
LOL, sorry... ;) I should have explain myself a little. :D

Here is the code again(slightly modified):<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function do_submit(element){
the_form = element.form;
win = window.open("","","width=300px; height=300px; top=100px; left=200x;");
the_form.action="whatever.asp";
win.document.write("<div style='display:none;'>");
win.document.write(document.getElementById('test').innerHTML);
win.document.write("</div>");
win.document.cSize.submit();
}
</script>
</head>

<body>
<div id="test">
<form name="cSize" method="post" action="default.asp">
<input type="text"><br>
<input type=button onclick="do_submit(this)" value="Submit!">
</form>
</div>
</body>
</html>Now the explination. ;) This line:

<input type=button onclick="do_submit(this)" value="Submit!">

runs the do_submit() function and sends along the element(ie, the button). This line:

the_form = element.form;

gets the form and puts it into the_form. This line:

win = window.open("","","width=300px; height=300px; top=100px; left=200x;");

opens the new window. These lines:

win.document.write("<div style='display:none;'>");
win.document.write(document.getElementById('test').innerHTML);
win.document.write("</div>");

Write the form from this page into the new window. 'test' is the id of the div that goes around the entire form that you want submitted. This line:

win.document.cSize.submit();

submits the new form(the one that got written into the new window). I know that that is probably confusing, but... ;) If you have any more questions, I'll do my best to answer them for you. :)
birdycarolyn
09-05-2003, 01:53 PM
Thanks for all your input. I ended up simplifying a bit and the following code works. WHIPEE!

<form name="Form1" method="post" action="">
<input type="button" name="bu1" value="button 1" onClick="return OnButton1();">
<input type="button" name="but2" value="button 2" onClick="return OnButton2();">
</form>
<script>
function OnButton1()
{ document.Form1.action = "yourReceiver.jsp";
document.Form1.target = "_self";
document.Form1.submit();
return true;
}

function OnButton2(){
myWindow = window.open('initialBlank.html','myWindow','height=400,width=300,scrollbars,left=100,top=100');
document.Form1.action = 'yourReceiver.jsp';
document.Form1.target = 'myWindow';
document.Form1.submit();
myWindow.focus();
return false;
}
</script>