Develop Reference

Getting and storing user text input on the fly without save button

It is a web app.
The user type information in a Textarea box.
The information is stored in the localStorage.
Right now the user needs to click "OK" button in order to keep the information.
I would like that the information will be stored automatically.
What is the proper way to do it?

Without jQuery, we need to make sure that the text changes are captured for all (or most) of the browsers, so we can attach several listeners to the textarea element, updating local-storage, whenever the text changes.
function onTextChange(obj) {
var elem = obj.target;
// If text has changed, update local-storage and save the saved
// value with the element for later checking w/o having to read
// from local-storage.
if (elem.old_value !== elem.value) {
elem.old_value = elem.value;
window.localStorage.setItem("textEntry", elem.value);
console.log('saved',elem.value);
}
return false;
} // onTextChange()
var elem=document.getElementById('textinput');
if (elem.addEventListener){
elem.addEventListener('input',onTextChange.bind(elem),false)
elem.addEventListener('keyup',onTextChange.bind(elem),false)
elem.addEventListener('change',onTextChange.bind(elem),false)
}
else if (elem.attachEvent) {
elem.attachEvent('onpropertychange', onTextChange.bind(elem))
}
More information about events which capture changes, see keydown, keypress, keyup and the example at textInput event.

You mean you store the data on the localstorage? IF yes, then you can update the localstorage content on every keypress on the textarea.
Example
$("#myTextarea").keypress(function(){
window.localStorage.setItem("textAreaContent", $(this).val());
});

How to Capture changing value of textbox

I have a webpage with a small survey. I want to pre populate some of the answers based on user inputs to previous question.
In the below code, if value of id QR~QID3 depends upon value of QID1_Total. However after the page loaded and even if the condition is met the textbox is not populated with correct value.
.addOnload(function()
{
if(document.getElementById("QID1_Total").value>15) {
document.getElementById("QR~QID3").value = "Good";
}
else{
document.getElementById("QR~QID3").value = "Average";
}
});

$("#QID1_Total").on("input", function() {
//statements goes here
});
use of on("input" will track every inputting event, include drop and paste.
know more about onInput : https://mathiasbynens.be/notes/oninput
Here is an Fiddle Example to know how trigger works :
https://jsfiddle.net/5sotpa63/
An Assumption
Let Us Say you are using a function, which holds this statement show Good and Average according to users Input.
var targetElem = document.getElementById("QID1_Total");
var showComment = (targetElem,value>15) ? "Good" : "Average";
document.getElementById("QR~QID3").value = showComment;
Above code is the shorter method of your own statement mentioned in your question.
Now on Change of the target QR~QID3 you need to load some content. you utilize the below code as follows.
$("#QR~QID3").on("input", function() {
//your next question loading statements goes here,
//statements to proceed when you show some comment Good or Average
}).trigger("input");
Hope! this could be helpful.

$('#QID1_Total').keydown(function () {
//ur code
});
as the mouse key is pressed in the input field the function is called

You need to add an event listener to the "QID1_Total" element.
If you want to run the check while the user changes the input, i.e. after each keypress use the oninput event.
If you want to run the check after the user has completed the input, use the onchange event. The onchange event will only fire after the input loses focus.
You can bind the event listeners by using the addEventListener() function like this:
document.getElementById("QID1_Total").addEventListener("input", function(){
//Code goes here
});
Here is a JSFiddle showing both methods.
You also have to use the parseInt() function on the textbox values before you can perform mathematical functions with them.

Determine value depending on input types

I have a select type dropdown, which upon selection redirects users to another page. I want them to be warned if they try to navigate away without saving when using this select dropdown.
However it needs to ignore this specific select type as one of the input types when determining that an input type has changed. This is my script, but it doesn't perform the desired action, (where .send1 references to the actual select type):
$(document).on('change', '.send1', function(){
if($(":input").not('.send1')){
$(":input").change(function(){
unsaved = true;
});
}
});
If unsaved == true then a users have a warning that there are unsaved changes.

.not() method returns a jQuery object, and an object is considered a truthy value in JavaScript, you should use the length property for checking the length of the collection. But here this is not the main problem, the whole logic doesn't sound promising. If you want to exclude an element from the selection you can use the :not in your selector:
var unsaved = false;
$(document).on('change', '.send1:not("select.specific")', function() {
unsaved = true;
});
$('select.specific').on('change', function() {
if (unsaved) {
// show a modal/alert something...
} else {
// redirect
}
});

I don't really understand what you're asking. It seems you're trying to determine if an input control has the class 'send1' - and if so, you ignore it? Why are you binding all of your inputs to your event handler? Can you post your HTML markup?
The closest I can come to helping is to recommend that you put a class on all of your inputs that COULD have unsaved data in them. Then, write an event handler for your select list that redirects to another page:
$("#ddlThatRedirects").change(function(e){
if (CheckFields()){
//Put whatever alerting you want here
}
else{
//Put redirect or postback logic here
}
});
function CheckFields(){
var UnsavedChanges = false;
$(".ClassNameOfInputs").each(function(){
if ($(this).val().length > 0)
UnsavedChanges = true;
});
return UnsavedChanges;
}

Javascript Window.onbeforeunload trapping control that fired event

I have an C#.NET MVC3 web app and I have a question related to the attached Stackoverflow question. I am using a window.beforeunload event to see if there have been changes made on my View. If so, I alert the user that they have unsaved changes. However, if they selected the Create (submit) button, the dialog alerting the user still pops up. I want to NOT pop up the dialog if the Create button is selected. Any ideas? Is there a way to see which control was clicked?

I can think of 2 solutions:
$('#submitBtn').click(function() {
unbindOnBeforeUnload();
});
// OR
// maybe you have multiple cases where you don't want this triggered,
// so this will be better
var shouldTriggerOnBeforeUnload = true;
$('#submitBtn').click(function() {
shouldTriggerOnBeforeUnload = false;
});
...
$(document).unload(function() {
if (shouldTriggerOnBeforeUnload) {
confirm();
}
});
I've written it in a jQuery-like syntax, but only to keep the code concise, you can adapt it to anything you want.

Preventing focus on next form element after showing alert using JQuery

I have some text inputs which I'm validating when a user tabs to the next one. I would like the focus to stay on a problematic input after showing an alert. I can't seem to nail down the correct syntax to have JQuery do this. Instead the following code shows the alert then focuses on the next text input. How can I prevent tabbing to the next element after showing an alert?
$('input.IosOverrideTextBox').bind({
blur: function(e) {
var val = $(this).val();
if (val.length == 0) return;
var pval = parseTicks(val);
if (isNaN(pval) || pval == 0.0) {
alert("Invalid override: " + val);
return false;
}
},
focus: function() {
$(this).select();
}
});

I don't like forced focus, but can't you just focus after the blur takes place?
element.focus();
If doing that in the blur event doesn't always work (I'm not sure exactly when it fires, before or after the actual blur takes place), a redundant timeout will do, as well: setTimeout(function () { element.focus() }, 0).
But please don't do this. Heck, you should never be using alert or any kind of modal dialog for a web interface, either. How about adding a invalid class to the form field, putting a message off to the side of it, and disabling submit until all fields are valid? That's a much less invasive solution that allows me to fill out the form in whatever way is best for me, rather than whatever way is simplest for you.

You can do this with the validation plugin by default.
focusInvalid default: true
Focus the last active or first invalid element on submit via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding to steal its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.
Then you'd only need to have the focus event handler do your select and let the plugin handle validation.