Develop Reference

How do I fetch a web response to use as a variable in HTML/JavaScript

So I have a tag in my HTML where onclick calls a JavaScript script, and passes a number to it:
<svg id="fillgauge1" onclick="gauge1.update(42);"></svg>
But I also have a web service that streams a number back to me (as text/plain):
http://myserver/stream?GetNumber&token=xyz
What I want is to be able to do is take the result of that service, and pass it to the JavaScript, sort of like this:
<svg id="fillgauge1" onclick="gauge1.update(http://myserver/stream?GetNumber&token=xyz);"></svg>
But, obviously, it isn't as simple as that!
I guess I'm asking a couple of things. Is there a way to retrieve the value like this, within the HTML, or should the operation go into the JavaScript? And if it should go into the JavaScript, what technique or commands do I use? I'm fairly inexperienced (which I'm sure shows) but I can research what to do if I can just get some pointers. My Googling just isn't finding what approach to take, so I'm kind of lost, and any suggestions would be appreciated.
To clarify the scenario, I have an SVG object with a number label on it. The user clicking the object causes the number to update. I can make it update to a fixed value, but I'd like to get that number, live, from a web service. I can easily change that service from serving text/plain to XML or JSON if that's a better technique.

I need access to variables both in php and the page's javascript

I am working on a php/JavaScript web application that must perform many calculations using many values input by the user. There are several pages of inputs, and calculations using values input on previous pages are everywhere.
I have been passing the recently entered values between pages using $_POST, and storing them for use in a serialized class saved as a $_SESSION variable. One obvious way to pass values from PHP to the page for use by JavaScript is to populate the page with hidden form elements. JavaScript could use this data and modify it as necessary, then pass the values via POST.
I may have many such hidden elements, and I can't help but think that this is a good way to slow down the pages. Is there a better way to store this data between pages? Cookies?
Thanks!
SH

Search AJAX in google. It's a technic that helps your javascript to communicate with your php. First it is hard to learn the syntax but watching videos from youtube will do just fine.

Passing additional information per input box using HTML

I'm asking this question since I'm simply not clear on where to research further - I have experience primarily with Python, while my HTML and Javascript knowledge are on an as-needed basis. I simply haven't been able to figure out the most elegant and standard way to do this, and which component (the HTML itself, a Javascript component, Django) should be responsible for doing what I want.
I am trying to create a form for input of linguistic data with a Django app. Important for what I'm doing here is that each datum has associated tags. Also, most linguistic data is paradigmatic, so I want to be able to have users input an entire paradigm at a time (rather than one single datum at a time, which can be done already using the Django admin interface). I also, ultimately, want to have the paradigmatic input be dynamic in the future, so that I do not have to hardcode things.
For example, I would like have a form that looks like the following:
On submit, I would like the page to send something like this to the server:
'I', tags:'singular, 1st'
'we', tags:'plural, 1st'
ˈYou',tags:'singular, 2nd,masculine'
...
I simply don't know what the best way is to embed this extra data into the website so that it gets submitted when the page gets submitted. Ideally, the input boxes could somehow 'inherit' the tags based on their position in the columns and rows rather than each input box needing to be have that information added individually.
The only idea I've had so far is to embed the tag information into the names of the input boxes so that the string passed on a get command would be something like '?singular_1st=I&plural_1st=we&singular_2nd_masculine=You' and I would just have to process the strings on the Django backend. I could also use javascript to assign the names of each of the textboxes on pageload somehow, though I'm not sure how to figure out which textbox is located where relative to the headers of the table.
What is the best way to do this? Can I somehow pass more structured data on submitting the page, rather than having to reparse everything on the backend? I've read something about passing JSON to the server, but I'm not sure how exactly to do this. Similarly, there's a data attribute in HTML 5, but I'm not sure how (or if) that gets passed to the server on submitting a page. I'm not asking for anyone to do my coding for me, but simply a suggestion about how best to do this and further resources or tutorials showing similar projects.

Save Value State for Public Sharing (Add to URL)

http://liveweave.com/xfOKga
I'm trying to figure out how to save code similar to Liveweave.
Basically whatever you code you click the save button and it generates a hash after the url. When you go to this url you can see the saved code. (I been trying to learn this, I just keep having trouble finding the right sources. My search results end up with references completely unrelated to what I'm looking for, example )
I spent the past two days researching into this and I've gotten no where.
Can anyone can help direct me to a tutorial or article that explains this type of save event thoroughly?

To understand the functionality, it is best to try and identify everything that is happening. Dissect this feature according to the technology that would typically be used for each distinguishable component. That dissected overview will then make it easier to see how the underlying technologies work together. I suspect you may lack the experience or nomenclature to see at a glance how a site like liveweave works or how to search for the individual pieces, so I will break it down for you. It will be up to you to research the individual components that I will name. Knowing this, here are the keys you need to research:
Note that without being the actual developer of liveweave, knowing all the backend technology is not possible, but intelligent guesses will suffice. The practice is all the same. This is a cursory breakdown.
1) A marked up page, with HTML, CSS, and JavaScript. This is the user-facing part of the application, where content can be typed, and how the user interacts with the application.
2) JavaScript to asynchronously (AJAX) submit the page's form to the backend for processing.
3) A backend programming/scripting language to process the incoming form. In the case of liveweave, the form is POSTed. It is also using PHP to process the form.
4) A database table with a column for each language (liveweave has HTML, CSS, and JavaScript). This database will insert the current data from each textarea submitted in the form and processed by PHP as a new row. Each row will generate a new hash and store it alongside the data just inserted. A popular database is MySQL.
5) When the database insert is complete, the scripting language takes over again, and send its response back to the marked up page (1). That page is waiting for a response from the backend. JavaScript handles the response. In the case of liveweave, the response is the latest hash to be used in the URL.
6) The URL magic happens with JavaScript. You want to look up JavaScript's latest History API, where methods like pushState will be used to update the URL in the browser without actually refreshing the page.
When a URL with a given hash is navigated to, the scripting language processes the request, grabs the hash, searches for the hash in the database table, finds a matching row, and populates the page's textareas with the data just found.
Throughout all this, there should be checks to avoid duplication and a multitude of exploits. This is also up to you to research.
It should be noted that currently there are two comments for your question. Darren's link will indeed allow the URL to change, but it is a redirect, and not what you want. ksealey's answer is not wrong; that is one way of doing it, but it is not the most robust or scalable, and would not be the recommended approach for solving this.

Is it possible to recover field values from the browser form cache across reloads for generated INPUTs?

When building custom widgets it's usually nice to always keep your widget-state inside in the value attribute of actual browser inputs as most browsers will preserve those values across reloads or when hitting 'back'. This usually works well.
However, any sort of "growing" custom-widgets that generate new inputs during use are not handled similarly. I was hoping I could save the "new" widget count in a hidden field and then on domReady simply generate the missing input fields and assign them their original names and IDs but this doesn't seem to work, browsers don't seem to want to do anything with generated content.
Overall this is probably sensible enough, but is there maybe a way to interact with this form cache mechanism directly? One possible work-around would be to store not only the new item count in a hidden field but some sort of serialization of the full content of the new widgets. Should work but it's a fair bit of additional effort :/
Barring all this is there any good reference available that describes this caching mechanism? I don't suppose it's part of a spec? (seems quite likely it's just incidentally similar behaviour provided by all major browser vendors)