Develop Reference

Why is the input field with the disabled attribute not saving the entered data at the field after submitting tha data and stepping back?

there.
I have the simplest form with the code:
<script>
var field1 = document.querySelector("#field1")
var field2 = document.querySelector("#field2")
field1.addEventListener('focus', function (e) {
field2.removeAttribute("disabled")
})
</script>
<form action="/" method="POST">
<input id="field1" name="field1" required="" type="text" value="">
<input disabled="disabled" id="field2" name="field2" type="text" required="" value="">
<input id="submit" name="submit" type="submit" value="Save">
</form>
After entering data, sending the form and stepping back, I see no data in the second field. Why?
Before sending data:
After sending data and stepping back in a browser history with a mouse back button:

When sending data by clicking on the Save button, the values in both the input are being sent. But, when you step back you are effectively reloading the page. On reloading, two things are happening:
The page DOM is reset to its initial state i.e. to the markup in your HTML. Since, in your initial HTML markup, field2 is set as disabled, on page reset the same thing happens.
The browser is autocompleting the previous values that were filled in the inputs. This is a feature of the browser itself and if it were not there, then even in the first field there would've been no data on stepping back. You could verify this by adding autocomplete="off" to the first input field.
Therefore, as your browser implements autocomplete on page reload (due to stepping back), the first input field is filled but the second input field is not because it is reset to its disabled state.

get title of items selected using TAB button, on a web page

I have a web application with no images in it. It is for visually impaired people. It is navigated using TAB button. How can I get the title/text of the selected web page like button,menu,etc. By selected I mean using TAB button, not mouse click. Using Javascript or any other language.

Use .focusin() method of jQuery library. Try to navigate on the form inputs from the snippet below using TAB button.
$(document).focusin(function(e) {
console.log(e.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" name="input1"/>
<input type="text" name="input2"/>
<input type="text" name="input3"/>
</form>
I used name property of the event target in my example, but you could get any property value. For example
$(document).focusin(function(e) {
console.log($(e.target).attr("type"));
});
It is possible to get id and another info by same way.

Input field with onchange fails to trigger when user click button in another form

I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>

Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?

The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.

Show/Hide previous form field entries

I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?

You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.

It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />

Tab order issue in IE with initial Javascript select of field in form

I'm trying to achieve the following behaviour in html: user is presented with a form involving several text fields. The fields are populated with default values, but in many cases the user will wish to enter their own. When the page loads, the value in the first field is selected, so the user can either replace it by simply starting to type and tabbing out to the next field, or simply leave it and tab out. Here's a pared down example of what I have:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello"/><br/>
<input value="goodbye"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
This works in Chrome (and Firefox I believe, but I don't have it here). In IE, the field is selected as intended, but when the user hits tab, the browser tabs out to its address bar rather than to the goodbye field. If I replace the select with a simple focus, like
<body onload="document.getElementById('helloField').focus()">
the tabbing is okay in all browsers, but this isn't what I want. I want the user to be able to start typing right away to replace the default value.
Anyone have any ideas?
Thanks.

Focus, then select.
Also consider putting the code in a script block directly after the input in question. If you have a bunch of images on the page, document.onload can fire quite a lot later, and the last thing you want is to be typing away in an input box when onload fires and hijacks your focus (making you delete the contents of the box).
<input id="helloField" value="hello"/><br/>
<script type="text/javascript">
var hello= document.getElementById('helloField');
hello.focus();
hello.select();
</script>

Try setting the tab order of the fields using tabindex:
<html>
<body onload="document.getElementById('helloField').select()">
<form>
<input id="helloField" value="hello" tabindex="1" /><br/>
<input value="goodbye" tabindex="2" /><br/>
<input type="submit" value="Submit" tabindex="3" />
</form>
</body>
</html>