SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grabbing some values from various text fields outside the form

    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();" ' ?

  2. #2
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    PHP Otaku Gibb's Avatar
    Join Date
    Jul 2004
    Location
    Texas
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •