We Keep Coding

JavaScript: how to pass additional information to source page?

I have a website and when a user follows an internal link I would like to pass some extra information to a new page, so JavaScript on the destination page could do some useful highlighting.
There is an option to pass that information via the link parameters (GET), but it will generate lots of virtually duplicate pages and break pretty URLs concept. Another way is to make a webapp using AJAX, but it will also bound content to a single URL.
How can I transparently pass some information to the new page during navigation w/o messing with site's URL structure?

You could store the data in local storage or session storage, and retrieve it again on the destination page.

So you have a few options.
Form Submission
First option post a form with the data. Add a hidden form, on the anchor click capture the click event, set the hidden fields with the values you want to send to the next page, and submit the form. On the next page, read the post parameters in the backend and update the page.
Local Storage
On click of the anchor, set localStorage to the values you want to appear on the next page. When the next page loads, read the localStorage values and update the page. Note: The server will not have access to the values
Ajax with pushState
Use Ajax to submit the form. When the Ajax call returns, use window.history.pushState to update the url with whatever url you want to be displayed to the user.

One of the options not mentioned is to create a dirty URL:
/destination/param1/value1/...
then strip additional parameters at server-side and redirect:
/destination
keeping additional values stored at server-side (e.g. via sessions). I still prefer using sessionStorage in a real application, but it worth mentioning anyway.

What do you mean it will "bind content to a single url"? AJAX request is the first thing that comes to my mind as the solution to this problem. You dont have to use the url of the page to make the ajax request, you can build the url inside your javascript based on whatever conditions exist in your application.
Besides AJAX and passing parameters in the URL, the only other thing I can think of is to use Cookies. That of course runs into problems if the user has cookies disabled. I think an Ajax call to your server is the most robust way of handling the problem.

Saving input->values without embed php

Main problem is values written in input elementss disseapear after page reload (submit , refresh etc.)
I have a completed form ... /form element. Traditionally, I can insert a php line.
<input value="<?php if(isset($_POST['foo']))echo $_POST['foo'] ?>">
This solves the submit part. However, I feel that this is the worst solution, in my case. I have hundreds of input elements in my form. There are even some inputs to produce input tables. Number of input elements are so much that i became curious about finding a work around.
Is there a way to store input->values before the submit operation and inject them after page reload?
So that, the user can upload a file, file will be parsed by php core. And when the page reloaded both user originated inputs and file originated values are exist.
To simplify:
After "file submit & read & append file values to form", user shouldn't need to fill inputs that s/he already filled. I need an idea to achieve this, different then "inserting a php line to every single input element."

In such a situation I could recommend sending the file via AJAX and handling the response of that thereafter and then only injecting the values from the process and uploaded file when you get the response from the server.
Alternatively you could use localstorage or cookies to persist the information. However both local storage and cookies have a defined limit on what they can store. Cookie can only store 4KB in total which doesn't allow much.
Without uploading via AJAX, you could write a javascript function to find all inputs with jQuery/javascript and save their values in localstorage and on new page load to a check to see if there are any present and inject them back into the same inputs based on id/class/ etc with jQuery making sure to delete the localstorage values when done.

How to get POST contents before form submits using javascript

So, I know that when I submit a form whose method is POST that the server receives the contents of that form and then processes them accordingly, and then returns a page with the desired content. What I am trying to learn is what exact query url is being passed to the server side script when I submit a form on a website that does not belong to me. The reason I want this query string is so that I can make use of the server side script programatically with my own data. There is no public API served by this website, but I would like to formulate my own.
So my question is, is there a way to intercept the POST as a query string URL? Perhaps by using a javascript console in browser?
I know I can look at the source code for the page and find the names/values of the form fields. However, there also happens to be a hidden field on this page whose properties are set by javascript during validation at submission time. How should I go about this?

You can use an extension for intercept the data : Tamper Data on FireFox
https://addons.mozilla.org/fr/firefox/addon/tamper-data/
You can intercept and modify all headers requests

How to get bookmarklet running that allows to grab text, load a specific form and past the text into the form

I am very very new to JavaScript and I would like to build a Bookmarklet for a webservice I use. I need to grab text from any page, load the form of the service and post the text into the textfield of the form. So far I got this:
// grab text
javascript:(function(){var t=window.getSelection?window.getSelection().toString():document.selection.createRange().text;t="You selected: "+t;alert(t);})()
//load form
document.onload=function(){window.location=%22http://www.streetmails.com/index.php%3Fc=mailing%26a=content%22})();
//paste text into form
window.onload=function%20D(a,b){c=b.split('|');d=false;for(q=0;q<c.length;q++){if(c[q]==a)d=true;}return%20d;}function%20E(){f0=document.forms[0];f0['subject'].value='news from London';f0['content'].value='<echo$_GET['t']?>';f0[''].value='Add%20a%20picture...';f0['topicId'].value='4';}E
Can you help me? I searched and keept trying and trying but cant get it running....
Thanks in advance!

You can not do exactly what you are trying to do using a bookmarklet. When you execute a bookmarklet, you are executing Javascript inside the current web page. Javascript running in the web page of one web domain can not interact with pages from a different web domain. document.onload will almost never work in a bookmarklet because usually a web page is already loaded before you click the bookmarklet.
Lets call the page with text the "text-page". Lets call the page with the form the "form-page". A web form always submits to another page or to itself. It depends on the form's action value. Lets call that the action-page. Forms can be either submitted via GET or via POST.
To accomplish your goal with a bookmarklet, generally what is done is the bookmarklet will create a form on the text-page and then submit that form directly to the action-page.
If the action-page will accept a GET (only query string values), that is easiest. Look here for many such examples: https://www.squarefree.com/bookmarklets/search.html
If the action-page requires a POST, that is a little more complex because you must use Javascript to create the form: http://www.google.com/search?q=javascript%20create%20form
Addons, extensions, and user scripts can be used to do what you want more directly because they are not limited to operating only in the current domain, but of course they are more complicated to program.

Jquery lightbox framework

I am building a new site and would like all the Add/Edit of new items to be in lightbox with ajax and i am using JQuery.
The lightbox should include on page validation in some cases, also should show the errors from server on form without submit or page refresh, the lightbox will have similar template (title, input fields and submit button) but the requirements and input fields will be different.
Another requirement will be to show loading icon while loading the lightbox and while doing the ajax.
My question is there already a solution for that?
If not how would you design it?
I started doing it with JQuery plugin to load the Form object and Inputs object array and create a template using Mustache, but this seems to be over complicated.
How other sites handle this?

I would handle it by fetching JSON from the server and sending JSON to the server on form submit. Or in another format like jQuery.serialize on the forms.
You would render the form in the lightbox based upon the JSON you receive from the server. If the use clicks submit you'd send the data of the form in a JSON format to the server and have the server return any errors (or success).
Alternatively you could mirror the validation on the JavaScript side and only submit once JavaScript-side validation passes but that will close the popover.
I don't think this would be an exceptionally convoluted approach, though it might be if you are going to pull in plugins and other frameworks for this.