SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Denmark
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript values send with form

    okey, I have absolutely no clue on how to do very much in javascript so here goes:

    I have a dragable and resizeable layer (layer1), using walterzorns api.

    in this api some report vars are built in, all this is going just fine, .. but

    when I found the right size and placement for the layer I want to send the coordinates to another page (results.asp) using a form.

    the built in properties for the layer are:

    dd.elemenst.layer1.x
    dd.elemenst.layer1.y
    dd.elemenst.layer1.h
    dd.elemenst.layer1.w

    that's it. I want to send this 4 values with a form, but I have no idea on how to set the form values to these vars. anyone who can show me how?

    info on the api is here: http://www.walterzorn.com/dragdrop/api_e.htm

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. I'd forgotten how clever Walter Zorn's work is; thanks for reminding me. Happens that I've got just the use for it currently; my client thanks you as well (in advance). Per your question - probably best to put the parameters into hidden fields and just submit that...here's a quick example.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    //sample values
    dd = { elemenst: { layer1: { x: 99, y: 77, h: 365, w: 444 } } };
    
    function setFields()
    {
    	var els = document.forms[0].elements;
    	var layer = dd.elemenst.layer1;
    	els['x'].value = layer.x;
    	els['y'].value = layer.y;
    	els['h'].value = layer.h;
    	els['w'].value = layer.w;
    	return true;
    }
    
    </script>
    </head>
    <body>
    <script type="text/javascript" language="javascript">
    
    for (prop in dd.elemenst.layer1)
    	document.write('<b>' + prop + '</b> = ' + dd.elemenst.layer1[prop] + '<br />');
    
    </script>
    <form action="next.html" onsubmit="return setFields()">
    <input type="hidden" name="x" value="">
    <input type="hidden" name="y" value="">
    <input type="hidden" name="h" value="">
    <input type="hidden" name="w" value="">
    <input type="submit" value="next">
    </form>
    </body>
    </html>
    [next.html]
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    function setFields()
    {
    	var Q, i = 0, field, fields, args = new Object(), els = document.forms[0].elements;
    	Q = location.search.substring(1);
    	fields = Q.split('&');
    	for (i; i < fields.length; ++i)
    	{
    		field = fields[i].split('=');
    		args[unescape(field[0].replace(/\+/g, ' '))] = unescape(field[1].replace(/\+/g, ' '));
    	}
    	for (arg in args)
    		if (els[arg])
    			els[arg].value = args[arg];
    }
    
    onload = setFields;
    
    </script>
    </head>
    <body>
    <form>
    <b>x = </b><input type="text" name="x" value="" size="2">
    <b>y = </b><input type="text" name="y" value="" size="2">
    <b>h = </b><input type="text" name="h" value="" size="2">
    <b>w = </b><input type="text" name="w" value="" size="2">
    </form>
    </body>
    </html>
    The querystring parser is generic; sounds like you'll be passing the values to asp for processing (presumably POST) but this approach keeps the data accessible client-side, if you needed that.
    ::: certified wild guess :::


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
  •