Grabbing some values from various text fields outside the form

**Gibb** · Sep 27, 2006 13:40

I searched around for a bit but couldnt find anything too specific for this question.

I have 2 separate forms on 1 page, basically a one or the other method of getting to a search results page. I have address input fields separate from the forms, and I would like to include the values from the address fields as passed variables within either form when it is submitted.

I'm not very knowledgeable about JavaScript, but here is how I think it could work.

When either form is submitted, run a function which grabs the values from the address fields.

One other problem, I'm using an implementation of LiveSearch on both forms, so I have ' onsubmit="return liveSearchSubmit()" ' in my <form> tag. Is it possible to call 2 functions, ala ' onsubmit="return liveSearchSubmit(); return getAddress();" ' ?

**Gibb** · Sep 27, 2006 15:29

Ok I wrote a little test function and it looks like it's working, but I get this huge error message in the JavaScript console within Firefox.

---------------------------
Error: [Exception... "'Permission denied to get property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: http://localhost/testpage.aspx?id=1&name=efeaf :: getAddress :: line 19" data: no]
Source File: http://localhost/testpage.aspx?id=1&name=efeaf
Line: 19
---------------------------

Here is my function, and the part of my form that calls it:

Code:

function getAddress() {
    var street = document.addressform.street.value;
    var city = document.addressform.city.value;
    var state = document.addressform.state.value;
    
    alert("Your address fields:" + street + " " + city + " " + state);    
    return false;
}

// within the form
<input type="text" onclick="getAddress()" name="search" onkeypress="liveSearchStart()" maxlength="35">

When I put values into the addressform, then click into this input field in the 3rd form, the popup appears and shows the proper values, but I still get that huge error in the background according to Firefox.

**MikeFoster** · Sep 27, 2006 21:57

Hi Gibb,

Try this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type='text/css'>
</style>
<script type='text/javascript' src=''></script>
<script type='text/javascript'>
window.onload = function()
{
}
function getAddress()
{
  var f1 = document.forms['form1'];
  var f2 = document.forms['form2'];
  if (!f1.city.value.length || !f1.state.value.length) {
    alert('You must provide an address.');
    return false;
  }
  f2.city.value = f1.city.value;
  f2.state.value = f1.state.value;
  return true;
}
function liveSearchSubmit()
{
  return confirm('return true?');
}
</script>
</head>
<body>

<form name='form1' onsubmit='return false'>
<p>City: <input name='city' type='text'></p>
<p>State: <input name='state' type='text'></p>
</form>

<form name='form2' method='GET' action='' onsubmit='return liveSearchSubmit()'>
<p>Query: <input name='query' type='text'></p>
<p><input type='submit' onclick='return getAddress()'></p>
<input name='city' type='hidden'>
<input name='state' type='hidden'>
</form>

</body>
</html>

**Gibb** · Sep 28, 2006 10:03

Hey Mike thanks for the reply.

The alert message for not having an address is working, but I cant seem to get the address values to pass to the form processing page. I just get a URL of empty variables every time:

localhost/results.aspx?name=test&id=1&street=&city=&state=

Here is my modified code based on your post:

Code:

function getAddress2() {     
       
      var f1 = document.forms['startpointform'];
      var f2 = document.forms['searchform2'];
      if (!f1.city.value.length || !f1.state.value.length) {
        alert('You must provide at least a city and state as a starting point.');
        return false;
      }
      f2.street.value = f1.street.value;
      f2.city.value = f1.city.value;
      f2.state.value = f1.state.value;
      
      return true;
}

<form name="startpointform" id="startpointform" >
Address:<br />
<input type="text" name="street" size="30" /><br />
City / State<br />
<input type="text" name="city" size="15" />&nbsp;
<input type="text" name="state" size="3" maxlength="2" /><br />
</form>

<form action="results.aspx" name="searchform2" id="searchform2" onsubmit="return liveSearchCatSubmit()">

<input type="text" onclick="return getAddress2()" name="name" id="livesearch" onkeypress="liveSearchStart()" maxlength="35"  />

<!-- VARIABLES -->
<input type="hidden" name="id" value="<%= Request.Params("id") %>" />
<input name='street' type='hidden' />
<input name='city' type='hidden' />
<input name='state' type='hidden' />
<!-- END VARIABLES -->
</form>

I think I may have messed up something recently because the pop up box is no longer appearing if I leave a City or State vacant.

Thanks again for the help.

**MikeFoster** · Sep 28, 2006 11:57

Hi Gibb,

The only thing I saw was that getAddress2() also needs to be called 'onfocus' because they may tab to the textbox instead of clicking on it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type='text/javascript'>
window.onload = function()
{
  // You can assign event handlers here so you don't
  // have to have Javascript mixed with the HTML.
  var f2 = document.forms['searchform2'];
  f2.onsubmit = liveSearchCatSubmit;
  f2.term.onkeypress = liveSearchStart;
  f2.term.onclick = getAddress2;
  f2.term.onfocus = getAddress2;
}
function getAddress2()
{
  var f1 = document.forms['startpointform'];
  var f2 = document.forms['searchform2'];
  if (!f1.city.value.length || !f1.state.value.length) {
    alert('You must provide at least a city and state as a starting point.');
    return false;
  }
  f2.street.value = f1.street.value;
  f2.city.value = f1.city.value;
  f2.state.value = f1.state.value;
  window.status += 'getAddress2, ';///////
  return true;
}
function liveSearchCatSubmit()
{
  return confirm('liveSearchCatSubmit: return true?');
}
function liveSearchStart()
{
  window.status += 'liveSearchStart, ';///////
}
</script>
</head>
<body>

<form name="startpointform" id="startpointform" >
Address:<br />
<input type="text" name="street" size="30" /><br />
City / State<br />
<input type="text" name="city" size="15" />&nbsp;
<input type="text" name="state" size="3" maxlength="2" /><br />
</form>

<form action="" name="searchform2" id="searchform2">
<!--
<form action="http://cross-browser.com/test/echo.php" name="searchform2" id="searchform2" onsubmit="return liveSearchCatSubmit()">
-->
<!-- I changed the name value from 'name' to 'term'. Use whatever you want,
but I suggest not using a value that is the same as an attribute name. -->
<input type="text" name="term" id="livesearch" maxlength="35"  />
<!--
<input type="text" onfocus="getAddress2()" onclick="getAddress2()" name="term" id="livesearch" onkeypress="liveSearchStart()" maxlength="35"  />
-->
<!-- VARIABLES -->
<input type="hidden" name="id" value="" />
<input name='street' type='hidden' />
<input name='city' type='hidden' />
<input name='state' type='hidden' />
<!-- END VARIABLES -->
</form>

</body>
</html>

User Tag List

Thread: Grabbing some values from various text fields outside the form

Thread Tools

Display

Grabbing some values from various text fields outside the form

Bookmarks

Bookmarks

Posting Permissions