SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast fractaldimension's Avatar
    Join Date
    Jul 2006
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove x & y from form submit

    I'm finding to my chagrin that when using an image button to submit a form, it passes along the x & y coordinates of where the user clicked. It is very important to me to NOT have these in the query string, as my employer has placed a strong emphasis on minimal and understandable URLs.

    Is there a way to use JavaScript to remove the x & y when the form is submitted? I've looked at some form validation procedures used with onSubmit, and that seems interesting but they only return true or false -- i would like to destructively modify what keys (from key value pair, e.g. x=7) get passed. Could I do that during an onSubmit handler? If so, how?

    Alternatively, is there some easy way to just force those image buttons to not submit their coordinates?

  2. #2
    SitePoint Enthusiast fractaldimension's Avatar
    Join Date
    Jul 2006
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Short follow-up: I have resolved this to my satisfaction using PHP -- directing the search form to a temporary page that cleans up the query string and then redirects to the actual search page.

    But, I'm still very curious about the feasibility of solving this with javascript...

  3. #3
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I'm not mistaken, only fields that have a 'name' attribute are passed in the querystring - what about removing the 'name' from the image field?


  4. #4
    SitePoint Enthusiast fractaldimension's Avatar
    Join Date
    Jul 2006
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was an interesting lead, but I double checked and do not have a name attribute.. Here's the code for the button I'm using:
    HTML Code:
    <input type="image" class="searchbutton" src="images/searchbutton2.gif" value="Search" alt="Search">
    Maybe is it because it has a value?

  5. #5
    SitePoint Zealot milenko1054's Avatar
    Join Date
    Jan 2004
    Location
    Ohio
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're right - it's not the name attribute.

    What about using an onclick handler for the image to submit the form:

    <form action="yourpage.php" method="get" id="thisform">
    <img src="imagelocation.gif" alt="Search" onclick="document.getElementById('thisform').submit();">
    </form>


  6. #6
    SitePoint Enthusiast fractaldimension's Avatar
    Join Date
    Jul 2006
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not a bad idea -- I could gracefully degrade in the absence of javascript by adding an image submit tag in the noscript area...

    I think I like using PHP to filter the query string -- certainly more foolproof -- but will consider this option too.

    Any other ideas?

  7. #7
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using "GET" .. why not use Javascript to change the document.location string?
    HTML Code:
    function go() {
      //code to get needed form values
      //code to concat a querystring
      document.location.href = 'placetogo.html?' + querystring;
    }
    <img onclick="go()" />

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,870
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The image is BY DESIGN passing the x and y coordinates. If you don't want to pass what the image is designed to pass then don't use a form image field. You could substitute an ordinary image and attach a submit function to that using Javascript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there fractaldimension,

    have you considered using <input type="submit"/> and styling it with CSS...
    Code:
    <style type="text/css">
    .searchbutton {
        width:xxxpx;  /*image width*/
        height:xxxpx;  /*image height*/
        background-image:url(images/searchbutton2.gif);
     }
    </style>
    
    <input type="submit" class="searchbutton" value=""/>
    coothead


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
  •