homepage Welcome to WebmasterWorld Guest from 54.205.207.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
on submit close popup and back to main page with search result
bonagiri

5+ Year Member



 
Msg#: 3717437 posted 10:41 am on Aug 7, 2008 (gmt 0)

Hi Everyone,

I have a page with a link that, when clicked, opens a popup with OnClick=window.open.

Now, the popup contains a form with some fields and a submit button.

What I want to do is when i click on the submit button it must close the popup and the search result must be display in main page.

here is my form:

<form action="http://www.example.co.uk/example.php" method="post" id="form" onsubmit="return FormDance(this.form);">

here is my javascript:

<!--<script language="JavaScript" type="text/javascript">
function FormDance(form)
{
if (document.form.country.value == "")
{
alert("Please select the country you would like to search for"); return false;
}
if (document.form.city.value == "")
{
alert("Please select the city/location you would like to search for"); return false;
}
}
</script>-->

here is my submit button:

<input name="submit" type="submit" class="submit" value="SEARCH" onclick="createCookie('menu', + document.form.fromday.value + ':' + document.form.frommonth.value + ':' + document.form.fromyear.value + ':' + document.form.today.value + ':' + document.form.tomonth.value + ':' + document.form.toyear.value + ':' + document.form.currency.value);" />

I need some sample code for this in JavaScript (or) explain with an example.

I'm new to java scripting so my knowledge is bare minimum, appreciate any help.

Thanks in advance,
bonagiri.

 

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3717437 posted 12:24 am on Aug 8, 2008 (gmt 0)

Welcome aboard bonagiri!

I don't know why you're creating cookies - if it's to pass the data back to the main page, there's an easier way.

You have a link in the main window:

<a href="searchscript.cgi" onClick="return newWin('search.html',400,400);">Search</a>

This opens a new window using a function that accepts url, width, height:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function newWin(url,w,h) {
// This insures it *ALWAYS* opens a new window instead
// of loading content into a window already open
var day = new Date();
var id = day.getTime();
// Pad width and height a bit:
w+=75;
h+=126;
// Always always always leave scrollbars and resizable
// on - you won't know if you're cutting off client's
// viewing area!
params = 'width='+w+',height='+h+',scrollbars,resizable';
var win = open(url,id,params);
return false;
}
</script>
</head>
<body>
<a href="searchscript.cgi" onClick="return newWin('search.html',400,400);">Search</a>
</body>
</html>

Don't misunderstand the meaning of return false - in this case it returns to the link, telling the browser to NOT perform it's normal action, following the href. So if Javascript is disabled, it will still get the users to the search page.

Okay, you've opened a new window and have the form in front of you. The MAIN window is referred to by this pop up as window.opener.

Instead of compiling a cookie, just build a query string and set the location of window.opener.document to the string. This will only work if your script accepts the get method. I've used a list (array) to get the form elements rather than parsing through all elements - I don't need to sent "Go" for the submit button.

Note I've added ID's to the form fields to make it easier to grab them, and getElementById is the preferred method of getting objects and their values:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Search</title>
<script type="text/javascript">
function sendAndClose() {
// list of fields to get the data
var fields = new Array('fromday','frommonth','fromyear','today','tomonth','toyear','currency');
var querystring='';
// Go through a loop and add to the string IF a value was entered.
for (i=0;i<fields.length;i++) {
if (document.getElementById) {
if (document.getElementById(fields[i]).value != '') {
if (querystring != '') { querystring += '&'; }
querystring += document.getElementById(fields[i]).name + '=' +
document.getElementById(fields[i]).value;
}
}
}
// You can do something else on the "else" here.
if (window.opener && !window.opener.closed && (querystring != '')) {
querystring = 'searchscript.cgi?'+querystring;
window.opener.document.location=querystring;
window.close();
}
else { alert('No search parameters where entered or the main window was closed.'); }
return false;
}
</script>
</head>
<body>
<form action="searchscript.cgi" onSubmit="return sendAndClose();">
<p><label for="fromday">From Day:</label>
<input type="text" name="fromday" id="fromday" value=""></p>
<p><label for="frommonth">From Month:</label>
<input type="text" name="frommonth" id="frommonth" value=""></p>
<p><label for="fromyear">From Year:</label>
<input type="text" name="fromyear" id="fromyear" value=""></p>
<p><label for="today">To Day:</label>
<input type="text" name="today" id="today" value=""></p>
<p><label for="tomonth">To Month:</label>
<input type="text" name="tomonth" id="tomonth" value=""></p>
<p><label for="toyear">To Year:</label>
<input type="text" name="toyear" id="toyear" value=""></p>
<p><label for="currency">Currency:</label>
<input type="text" name="currency" id="currency" value=""></p>
<p><input type="submit" value="Go"></p>
</form>
</body>
</html>

All tested and working, however, if you test locally and "searchscript.cgi" is not found it won't close the window. I'm presuming the browser halts scripting on the exception. But if the file exists, it will work.

You'll still have some challenges, like what to do with spaces and non-ascii characters in the query string, and how to extract select list values as opposed to text field values. But this outlines the approach I'd take.

bonagiri

5+ Year Member



 
Msg#: 3717437 posted 2:31 pm on Aug 8, 2008 (gmt 0)

Thanks a lot rocknbil!

It worked perfectly.

But a small question.

Is their any other way to pass the form values of popup to parent window, without using GET method.

If possible(or)not can you please explain me.

Thanks in Advance,
bonagiri.

rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3717437 posted 6:06 pm on Aug 8, 2008 (gmt 0)

Not liking that ugly query string huh? :-)

Actually I've never pursued it, it will require a form post. There are a number of ways to approach it, I'd probably post directly from the pop up window, then on refreshing the location of the page it would re-query the values I've just updated, displaying the updates.

If you Google for post Ajax site:webmasterworld.com it will probably reveal an easy way to do it using Ajax.

to pass the form values of popup to parent window

In case I misunderstood the question: if you have a form in the main window with values that correspond to the pop up window form, this is really easy. It's good for, say, a text field you want to keep small in the main form but want to open a "full window" to edit in a pop up.

If the main page form has a field named "comments" and the pop up also has a field named comments,

<input type="submit" onClick="populate(this.form,'comments');" value="Populate Main Form">

function populate(form,field) {
if (window.opener && !window.opener.closed) {
var target = window.opener.document.getElementById(field);
if (form) { target.value=form.comments.value; }
window.close();
}
}

bonagiri

5+ Year Member



 
Msg#: 3717437 posted 10:04 am on Aug 11, 2008 (gmt 0)

Hi rocknbil,

I thanks a lot for your help....

Actually my problem is....

step 1: I'm in a page example.html that contains a image link, when clicked it opens a popup window.

step 2: the popup contains a form with some fields and a submit button.

step 3: when i click submit button in form.html, i want to POST all the field values to the parent page i.e example.php page.

1)example.html -> form.html(popup window)

2)form.html(popup window) -> example.php(parent page)

onClick="return newWin('http://www.example.co.uk/form.html" it a opens a popup window.

here is my form.html:

<form name="form" action="http://www.example.co.uk/example.php" target="_parent" method="post" id="form" onsubmit="return FormDance(this.form);">

<p><img src="images/space.gif" alt="" width="5" height="5" />
Check In: <img src="images/space.gif" alt="" width="5" height="5" />
<select name="fromday" id="fromday">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="frommonth" id="frommonth" onchange="ChangeMonth();">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="fromyear" id="fromyear" onchange="ChangeYear();">
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<br /><br />
<img src="images/space.gif" alt="" width="5" height="5" />
Check Out:<img src="images/space.gif" alt="" width="1" height="5" />
<select name="today" id="today">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="tomonth" id="tomonth">
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="toyear" id="toyear">
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
<br /><br />
<img src="images/space.gif" alt="" width="5" height="5" />
Country: <img src="images/space.gif" alt="" width="11" height="5" />
<select id="country" style="width:160px" name="country">
<option value="Spain">Spain</option>
</select>
<br />
<img src="images/space.gif" alt="" width="5" height="5" />
Location: <img src="images/space.gif" alt="" width="7" height="5" />
<select id="city" name="city" style="width:160px">
<option value="Barcelona">Barcelona</option>
</select>
</p>

<input name="submit" type="submit" class="submit" value="SEARCH" style="width:150px;height:30px;margin-left: 75px;" style="display: inline;" />

if u click on the submit button the result must display in parent page i.e example.php page.

I can pass the values to parent page through a querystring as you said previously.But i want to POST all the values to parent page i.e example.php page.

Please explain with an example.

ManyThanks,
bonagiri.

bonagiri

5+ Year Member



 
Msg#: 3717437 posted 10:15 am on Aug 11, 2008 (gmt 0)

I want it in JavaScript.

ManyThanks,
bonagiri.

httpwebwitch

WebmasterWorld Administrator httpwebwitch us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3717437 posted 1:06 pm on Aug 11, 2008 (gmt 0)

tricky!
here's one way...

1) put a hidden form on the "opener" page, with all the requisite fields (I mean hidden, like all the <input> are type="hidden", and on the <form>, method="post"
2) when the popup form is submitted, pass all those values back to the opener page, and tuck them into that hidden form
3) use form.submit() to submit that form

cheers

bonagiri

5+ Year Member



 
Msg#: 3717437 posted 1:27 pm on Aug 11, 2008 (gmt 0)

Thanks for u'r help httpwebwitch,

But its not working.

Any help is much appreciated
bonagiri.

seodreamer

5+ Year Member



 
Msg#: 3717437 posted 3:13 pm on Sep 1, 2008 (gmt 0)

I think this might be what you're looking for:

window.opener.document.getElementsByName('Element1').value = 'a value you want to pass back'

You can have multiple hidden elements in the form that opens the pop. Its then simply a case of the pop setting the values of the hidden elements before closing itself.

Once popup is closed, all values are in the opening window. Job done! )

bonagiri

5+ Year Member



 
Msg#: 3717437 posted 12:00 pm on Sep 5, 2008 (gmt 0)

Thanks for u'r help,
bonagiri.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved