Develop Reference

Retain the form values in HTML even after re-directed from another HTML page

I am creating a Sample Registration form using HTML and JS.
After filling out all the fields in the form, I have a href link, on clicking it, takes to new HTMl page for uploading documents and on clicking a button in the upload page...it then re-directs to the form page.
But the form page gets reloaded and so I am losing all the values given as input.

Here's one way you can do this :
In the JavaScript of the first HTML file (where you get the data):
localStorage.setItem('variable',value)
and then retrieve it from another JavaScript file:
localStorage.getItem('variable')
Another approach:
Global variables in Javascript across multiple files

replace only some part of current page on click of link Using javascript

Current scenario
Hi i want to load page onclick of link that will replace only some part of page.I don't want to load new page or tab.The part to replace should be dynamic and rest should be static.Any suggestion.I tried window.location and other options but didn't meet requirement.

One way is to load the "dynamic part" of the page in an iframe inside the "static part" of the page.
Another option is for you to figure out how to update the DOM content of a HTML element (for example more commonly a div) using JavaScript and how/where to load the DOM content from.

Hide button after page is saved as html

At the bottom of html page, there's a button with onClick function.
As the page has only internal css, when users save the page (Right click > Save As) as html file, the page is saved without additional folders (just html) but the button is visible at the bottom.
How to hide the button when people save html page. After saving, when they open it on their computer, the button should be hidden because it doesn't work without scripts so it has no purpose to stay there.

JavaScript has no event for this type of action. You cannot determine when a user saves a page. It is part of the browser itself, not part of the page.

Ok, based on the comment string in Diodeus's answer, you could use Javascript to generate the button. Provided the script file is linked and not hosted, it won't be accessible when the user saves the page, and therefore the button would never be generated. Something like this:
Header
<script type="text/javascript" src="/js/script.js"></script>
Where script.js is the Javascript to generate your button. that script should include something like:
window.onload = button;
function button() {
//generate button here
}
Since script.js doesn't exist on the user's local machine, it will never run and the button will not exist. It does however exist on your hosted server and so any user visiting your site will see the button.

Make the button hidden by default (using CSS: display:none;), and then unhide it with Javascript when the page loads. You can do this by adding (or removing) a CSS class, or by updating the button's style attribute directly.

Evaluate the current url with document.URL and if it is equal to C:\ or http://localhost than do $('button').remove();

Programmatically load usercontrol to a div in masterpage

There are different user controls to be included in the master page dynamically.
Only some of the pages inheriting the master page will be required to display some of the user controls. I need to know what are the best options for displaying these user controls. Can we decide which user control is to be loaded and do it programmatically through code? Or is there a way in javascript or jquery to do this?
I wanted to know how to load the user control programatically to a div in master page from a content page.

You can load UserControls dynamically by using the LoadControl method available on all TemplateControl based classes (such as Page, UserControl and MasterPage). See this MSDN article for an expanded explanation.
var userControl = (TheTypeOfMyUserControl)LoadControl("~/MyUserControl.ascx");
var div = TheNameOfMyRunAtServerDiv;
div.Controls.Add(userControl);
Edit: The above is required to be placed in the MasterPage. If you want to invoke it from a content page you can create a public method on the MasterPage that the page can call (taking the user control path as a parameter).

following code will work for you,
UserControl uc = (UserControl)LoadControl("controlPath");
div.Controls.Add(uc);
reference:
http://msdn.microsoft.com/en-us/library/c0az2h86(v=VS.90).aspx

JQuery Mobile page does not load getJSON content until page is refreshed

I have a list of "patients" that is queried and linked like so:
list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+data[i].UnitNumber+"&type='/><h3>"+data[i].LastName+", "+data[i].FirstName+" "+data[i].MiddleName+"</h3><p>Age: "+data[i].Age+"</br>SSN: "+data[i].SSN+"</p></a><a href='./patient.html?id="+data[i].UnitNumber+"' data-transition='slideup'>info</a>"));
Upon clicking that page I arrive at a patient profile page that should load in some of this data using the query in the URL (i.e. patient.html?id=100002). That ID is used in a getJSON call to populate the various fields. I want this to happen as soon as the page is loaded.
Problem: When one of the list elements above is clicked, it leads to the patient profile page but none of the fields have been populated. If I Refresh that same page, all of the data loads fine. Here's some code:
function login() {
var query = window.location.search;
if (query.substring(0, 1) == '?') {
query = query.substring(4);
}
$.getJSON("http://URLGOESHERE/wcf/PatientSearch.svc/byunitnumber?unitnumber="+query+"", function(data) {
var head1 = document.getElementById("name");
var newtitle=""+data.LastName+", "+data.FirstName+" "+data.MiddleName+"";
head1.firstChild.nodeValue=newtitle;
document.frmLogin.email.value=" "+data.BirthDateText+" ("+data.Age+")";
document.frmLogin.password.value=" "+data.SSN;
document["profpic"].src = "http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+query+"&type=pic";
});
}
I call the function "login()" at document.ready. I even tried calling it "onLoad" of the body. No idea why this doesn't work when linked, but does if I just go to the URL directly or I refresh..

Linking within a multi-page document
A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
href="multipage.html" rel="external">Multi-page link