SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)

    URL + Query String + form - How is it done?

    Hello,

    could any of you smart JS gurus assist me with getting URLs with query strings to work? For example, I'd like to be able to parse a form's data containing a URL with query strings. The URL would look like this:

    Code HTML4Strict:
    mypage.php?action=add&id=1

    Here is the JavaScript I have:



    Code JavaScript:
     this.captureData = function() {
      if (container.nodeName.toLowerCase() == "form") {
       container.onsubmit = function() {
        var query = "";
        for (var i=0; i<this.elements.length; i++) {
         query+= this.elements[i].name;
         query+= "=";
         query+= escape(this.elements[i].value) ;
         query+= "&";
        }
        data = query;
        return !start();
       };
      } 
     };
     
    function cart() {
     
     var prepareCart = function(element) {
      var xhr = new Hijax();
      xhr.setContainer(element);
      xhr.setUrl("mypage.php");
      xhr.setCanvas(document.getElementById("shoppingcart"));
      xhr.setLoading(function() {
       displayLoading(document.getElementById("shoppingcart"));
      });
      xhr.setCallback(function() {
       fadeUp(document.getElementById("shoppingcart"),255,255,204);
      });
      xhr.captureData();
     };

    My question is, how can I modify the JavaScript so that it can accept query strings?

    Thanks in advance,

    kohoutek
    Maleika E. A. | Rockatee | Twitter | Dribbble



  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Use the parsing a querystring library

  3. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    pmw57, thank you for your prompt response and help.
    Unfortunately, I don't understand the contents of the link and how it might apply to what I'm looking to do.

    I don't want to reference the name attribute but rather the URL with a query string as the value of the action attribute in the form that would look like this:

    Code HTML4Strict:
    <form class="shopping" action="mypage.php?action=add&id=1" method="post">
     
    <fieldset>
           <input type="text" class="amount" name="amount" value="1" />
           <input type="hidden" name="product" value="BeaSunglow" />
           <input type="submit" name="fabric" value="Add to cart" />
    </fieldset>
    </form>

    That'd be the form. If anyone can explain this or give a sample as if they were trying to explain to a complete imbecile, that'd be great.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Save the querystring library to somewhere like js/querystring.js and then include it as follows

    Code HTML4Strict:
    <script type="text/javascript" src="js/querystring.js"></script>

    Here is how you would use it if the url for the page was mypage.php?action=add&id=1

    Code JavaScript:
    // get querystring from url
    var qs = new Querystring();
    // get querystring parameters
    var action = qs.get('action');
    var id = qs.get('id');

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Thanks a ton for your explanation and sample. I am still not sure how I would implement it in this function for example:

    Code JavaScript:
    function cart() {
     
     var prepareCart = function(element) {
      var xhr = new Hijax();
      xhr.setContainer(element);
      xhr.setUrl("mypage.php");
      xhr.setCanvas(document.getElementById("shoppingcart"));
      xhr.setLoading(function() {
       displayLoading(document.getElementById("shoppingcart"));
      });
      xhr.setCallback(function() {
       fadeUp(document.getElementById("shoppingcart"),255,255,204);
      });
      xhr.captureData();
     };

    I know I'm being an uneducated bug. I'm working on becoming better on the former though.


    These:

    Code JavaScript:
            // get querystring from url
             var qs = new Querystring();
             // get querystring parameters
             var action = qs.get('action');
             var id = qs.get('id');
    variables need to be integrated somehow, that much I understand. But how?

    Thanks again and sorry for my density.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The question needs to be asked, what do you want to occur based on the querystring information?

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    well, the entire URL needs to be parsed so that the ajax can automatically update the page.

    For example, this is my form. It uses php:

    Code PHP:
    <?php
    $sql = 'SELECT * FROM fabrics ORDER BY id';
    $result = $db->query($sql);
     
     
    while ($row = $result->fetch()) {
        $output[] = '"'.$row['title'].'" <img src="'.$row['image'].'" />: &dollar;'.$row['price'].'<br /><form class="shopping" action="mypage.php?action=add&id='.$row['id'].'" method="post">
            <fieldset>
           <input type="text" class="amount" name="amount" value="1" />
           <input type="hidden" name="product" value="'.$row["title"].'" />
           <input type="submit" name="action=mypage.php?=add&id='.$row['id'].'" value="Add to cart" />
          </fieldset>
        </form>';
    }
     
    echo join('',$output);
    ?>

    So basically, I'd like for the script to recognize the value from the action attribute.

    For example, I have this line here:

    Code JavaScript:
      xhr.setUrl("cart.php");

    If I change this line to this:

    Code JavaScript:
    xhr.setUrl("cart.php?action=add&id=1;")

    it works, but of course only for the form where the action value that has the id of 1 which makes no sense.

    So basically, what I want to achieve is have the xhr.setUrl("cart.php") work in such a way as to allow strings to be attached to it.

    I am running a test page here (obviously still a mess but the cart should get updated and it doesn't because the string is not recognized.

    Thanks again, pmw57
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Can you do something like the following?

    Code Javascript:
    var url = 'mypage.php';
    var qs = location.search.substring(1,location.search.length);
    if (qs) {
        url += '?' + qs;
    }
    xhr.setUrl(url)

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Can you do something like the following?

    Code Javascript:
    var url = 'mypage.php';
    var qs = location.search.substring(1,location.search.length);
    if (qs) {
        url += '?' + qs;
    }
    xhr.setUrl(url)

    Thanks pmw57. This is not working, unfortunately.
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •