Forum Moderators: open

Message Too Old, No Replies

Form functionality

         

woldie

8:12 am on Apr 28, 2004 (gmt 0)

10+ Year Member



Hi,

Okay I admit my JavaScript isn't my strongpoint, however I have a small problem but trying to code it!

What I have is a form in which when you select 'other' a popup window appears. In the popup window is another form in which you have to enter something when you enter a value.

When you do enter a value I want it to close the popup window, with the value stored, I think you use a focus() command and then it enters the value in the input box on the form you came from. Makes sense?

Code:

<!-- START FORM CODE -->

<script type="text/JavaScript">
function doStuff(obj)
{
if(obj.value=="Other")
{
//url=document.form1.purpose.options[document.form1.purpose.selectedIndex].value
var daWin=window.open("../other.php","PageName","width=620,height=175");
}
}
</script>

<form name="form1" method="post" action="validate.php">
<select name=purpose size=1 class="property">
<option value="null">Select One</option> <option value="Replace existing borrowing">Replace existing borrowing</option>
<option value="Home Improvements">Home Improvements</option>
<option value="Purchase Car">Purchase Car</option>
<option value="Go on Holiday">Go on Holiday</option>
<option value="Other">Other</option>

<!-- this is where the value from the pop-up to appear here -->
<input type="text" name="field" maxlength="40" size="10" class="small" style="width:150px">
</form>

<!-- END FORM CODE -->

<!-- START POP UP -->
Code:

var prompt = "";

function Verify()
{
fvalue = document.theForm.field.value; // entered words
// check if empty
if (fvalue == "")
{
prompt = "Nothing has been entered.";
document.theForm.other.value = 1;
alert (prompt);
}
else
{
// this is where the code goes where the user has entered a value closes the window and then passes the value back to the form
// need help here!
<a onclick="javascriptpener.location.href='index.html'; window.close(); return false" href="index.html"><img src="24images/logo.gif" width="134" height="116" border="0" alt=""></a>
}

}

<form name="theForm">
<table width="500" border="0" cellspacing="1" cellpadding="3" bgcolor="#663399">
<tr>
<td bgcolor="#FFDC00">Please let us know the main reason for you remortgage below</td>
<td bgcolor="#FFDC00"><input type="hidden" name="other" value="0"><input type="text" name="field" maxlength="40" size="10" class="small" style="width:150px"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFDC00" align="right"><input type="submit" name="submit" style="BACKGROUND-COLOR: #663399; color: #FFFFFF; font-weight: bold" FONT: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; value="Proceed" onClick="Verify()"></td>
</tr>
</table>
</form>

<!-- END POP UP -->

Cheers for your help

:o)

woldie

8:18 am on Apr 28, 2004 (gmt 0)

10+ Year Member



Sorry I made a mistake on this line...

It should read....

<form name="theForm" onClick="Verify()">

Thanks

woldie

9:08 am on Apr 28, 2004 (gmt 0)

10+ Year Member



I've been searching around to what I'm trying to achieve,

This is very similar....

here's the url

[bignosebird.com...]

Can anyone help?

Ta very much

Bernard Marx

10:00 am on Apr 28, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I hope I have the right end of the stick.
You have a 'proceed' button, so there's no need for any other button to appear.

----main page-------------------------------


<script type="text/JavaScript">
function doStuff(obj)
{
if(obj.value=="Other")
{
var daWin=window.open("page2.htm","PageName","width=620,height=175,status=1");
}
}
</script>

<form name="form1" method="post" action="validate.php">
<select name=purpose size=1 class="property" onchange="doStuff(this)">
<option value="null">Select One</option>
<option value="Replace existing borrowing">Replace existing borrowing</option>
<option value="Home Improvements">Home Improvements</option>
<option value="Purchase Car">Purchase Car</option>
<option value="Go on Holiday">Go on Holiday</option>
<option value="Other">Other</option>
</select>

<!-- this is where the value from the pop-up to appear here -->
<input type="text" name="field" maxlength="40" size="10" class="small" style="width:150px">
</form>

+----------- page2.htm -----------------------------------------------+

<script>
String.prototype.trim = function(){ return this.replace(/^\s+/,'').replace(/\s+$/,''); }

function Verify()
{
// entered words + Trailing whitespace removed
var fvalue = document.getElementById('field').value.trim();
// check if empty
// empty string evaluates to false
if (!fvalue)
{
alert ("Nothing has been entered.");
}
else
{
opener.document.forms['form1'].elements['field'].value = fvalue
window.close()
}

}
</script>

<table width="500" border="0" cellspacing="1" cellpadding="3" bgcolor="#663399">
<tr>
<td bgcolor="#FFDC00">Please let us know the main reason for you remortgage below</td>
<td bgcolor="#FFDC00">
<input type="text" id="field" maxlength="40" size="10" class="small" style="width:150px">
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFDC00" align="right">
<input type="button" name="submit" style="BACKGROUND-COLOR: #663399; color: #FFFFFF; font-weight: bold" FONT: 10px; font-family: Verdana, Arial, Helvetica, sans-serif;" value="Proceed" onClick="Verify()">
</td>
</tr>
</table>

+--------- end --------------------------------------------------+

Some notes:

1. I made fname a local variable. Doesn't really matter here, but good practice.

2. wrt 1, I took the content of the variable, prompt, and put it straight into the alert.
It's not safe using that word as a global variable. prompt is a window method. If you assign it to something else, you won't be able to use it (not that you were planning to).

3. You forgot to close the quotes on the style attribute for the input in the pop-up. If you get a text editor with syntax highlighting you will see that kind of error straight away ([textpad.com ] is good).

4. You don't actually need a form element, or hidden fields in the pop-up, as you're not posting anything - and I changed the submit to a simple button.

5. In Verify, I added a check for whitespace, using the added String method.

Hope it works for you.

woldie

10:18 am on Apr 28, 2004 (gmt 0)

10+ Year Member



Thanks for replying Bernard Marx, much appreciate your efforts :o)

I'll give that a go and I will let you know in due course.

Thanks again.

Woldie