Just a little POST/GET FYI ...

Beau Schwabe · 2011-08-16 13:46

Perhaps this is old news to some of you, but it hung me up last weekend...

When you post or get data i.e. ....

http://{Some valid IP address}:{Some valid Port Number}/{text}

... some characters in the 'text' can cause problems. for example a # (pound sign) if you send something like...

http://192.168.0.1:3333/This is a test

... it will come through just fine, however if you send something like ...

http://192.168.0.1:3333/This is test #5

... the # plus anything to the right of it will truncate, so on the receiving end all you see is...

This%20is%20test%20

... Anyway, just an FYI I thought I would share, and my own suspicion why I'm having similar issues with 'Smart Phone' data submissions. I'll setup a test page this weekend to show you an example.

Phil Pilgrim (PhiPi) · 2011-08-16 13:59

Beau,

Can't you just send %23 for the "#"?

-Phil

Beau Schwabe · 2011-08-16 14:02

You could, but this was for a form field that would be submitted, in which case, there would need to be a check to make the conversion prior to submission.

Phil Pilgrim (PhiPi) · 2011-08-16 14:13

That's strange. # is considered a reserved character in a URI, so your browser should convert it to %23 automatically when submitting the form.

-Phil

Beau Schwabe · 2011-08-16 14:17

"That's strange. # is considered a reserved character in a URI, so your browser should convert it to %23 automatically" - One would think, but I've come to realize that you can't assume anything, especially when trying to make something that is cross browser compatible (<- I won't mention any names here) ... just an FYI

Mike G · 2011-08-16 15:16

In the URL, the # is used as a named anchor. As Phil stated the # has to be URL encoded if you want to use the # for some other purpose, otherwise it needs to be at the end of the URL for the named anchor to function as expected. In a POST the # has to be HTML encoded, so you might try adding the enctype attribute in the form tag.

enctype="application/x-www-form-urlencoded"

However, application/x-www-form-urlencoded should be the default. You need the method="post", method="get" uses the URL to pass state data. If all else fails there is always JavaScript onsubmit.

HTML

<form action="post.htm" method="post">
            <div class="content">
                <h2>Submit</h2>
                <label for="name">Name:</label>
                <input type="text" name="name" />
                <input type="submit" name="submit" value="Submit" />
                <div id="placeholder"></div>    
            </div>
        </form>

FireFox

POST /post.htm HTTP/1.1
Host: spinneret2:5000
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://spinneret2:5000/post.htm
Content-Type: application/x-www-form-urlencoded
Content-Length: 37

name=This+is+a+%23+test&submit=Submit

IE

POST /post.htm HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/xaml+xml, application/vnd.ms-xpsdocument, application/x-ms-xbap, application/x-ms-application, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, */*
Referer: http://spinneret2:5000/post.htm
Accept-Language: en-us
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe/13.0.782.112; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E)
Accept-Encoding: gzip, deflate
Host: spinneret2:5000
Content-Length: 37
Connection: Keep-Alive
Cache-Control: no-cache

name=This+is+a+%23+test&submit=Submit

Mike G · 2011-08-17 06:31

Here's a JavaScript example that encodes the value of a textbox in a web form.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>POSTing to the Server</title>
<script language="javascript" type="application/javascript">
	function htmlEncode(target)
	{
		var tag = document.getElementById(target); 
		var str = escape(tag.value);
		tag.value = str;
		return true;
	}
</script>
</head><body>
<div style="width:600px;margin:auto;">
    <form id="post" name="post" method="get">
        <input id="led" type="text" name="led" /> 
        <input type="submit" name="Submit" onClick="return htmlEncode('led')" value="Click Me!" />
    </form>
</div>
</body>

Beau Schwabe · 2011-08-17 17:22

Here is an example of the # problem I was describing using a similar fix with the JavaScript 'replace' command...

DataToSend = DataToSend.replace(/#/g,"%23");

The code below would normally live on a traditional server and send data to a custom server such as the Spinneret.

<!doctype html>
<meta http-equiv='X-UA-Compatible' content='IE=EmulateIE7' >    <!-- Emulate Internet Explorer version 7 compatibility -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>POSTing to the Server</title>

<script LANGUAGE='JavaScript'>

        function FormSubmit(form) {
                 var PageID = "[Parallax Test]";   		  // Create an ID, so the server knows the data source //

                 var DataToSend  = PageID          		  // Initialized Data to Send                          // 
                     DataToSend += "["+form.Comment.value+"]";    // append Data to send                               //

                 form.Comment.value = "";                         // Clear field, so that when the server returns us   //
                                                                  // the next person in line does not see the data.    //

                 DataToSend = DataToSend.replace(/#/g,"%23");	  // replace all # signs with %23                      // 
 
                 WindowID = window.open("http://24.253.241.231:8890/"+DataToSend,"_self","");   // Send data to server //

                                  }
</script>
</head><body>
<div style="width:600px;margin:auto;">
    <form id="post" name="post" method="get">
       <P align=center>
          <input type="button" name="Submit" onClick="FormSubmit(this.form);" value="Click Me!" />
           Please leave your comments in the box below.<br>
           <textarea rows=10 cols=60 id=Comment name='Comment'></textarea>
        </P>

    </form>
</div>
</body>

Just a little POST/GET FYI ...

Comments