Develop Reference

Save all edit on a form with button click

I have a form with multiple inputs, checkboxes, textarea, etc. On button click I want to execute a save values for any element that may have changed.
Due to my user base I can't always guarantee that they will press ENTER or TAB. So the button will be labeled SAVE CHANGES.
The problem is that without leaving an input element or pressing ENTER the new value is not actually written into the input, and therefore the SAVE BUTTON does not now the input value has changed.
So. How to implement code that scrubs all elements for any value changes. Something that forces all inputs to be updated with new values.
Remember that the user will edit a value and immediately select SAVE button without an ENTER or exit from the element.

You can execute your script that saves every event that occurs in the input as follows
Jquery
$("input").change(function(){
alert("The text has been changed.");
});
Javascript
object.addEventListener("change", myScript);
You could also review the documentation for keyup events so that it is saved every time the user changes the value or when the user presses a key. It could be useful in some cases.

My solution was to load all the records data retrieved into an array. Then, before exit collect all the current values on the form in another array.
When the user selects another record do a diff on the arrays and voila we have the pairs that need saving. I left the form on change as well for when the user edits a value and presses ENTER.
This way we hope to catch any changes. The new function called is also called on the Windows.beforeunload.

Print the HTML form with User Filled Information/Data

I have HTML form and I would like to print the HTML form, with the User Filled Information/Content.
Is there exist any way in jQuery or JavaScript to get a HTML Form with user filled values and print it?
This is what I have tried
$(form).html() but it returns only empty form
$(document).find("form").html() which also returned html with empty form.
NOTE: I am not talking about serialize function here. I don't want to submit a form but want to convert form to a printable version by setting input, select background transparent.

You can use
$('form').find('input').each(function( key, value ) {
console.log(value);
});
And to get the data ready for POST or something like it use this
$('form').serialize();

I think I got your issue. What you are actually want is, to print the HTML form, but it should contain the User Input.
First and foremost, you can use the 'window.print()' method. If you want to print only the Form, then you should use some CSS tricks.
I guess, what you are looking is answered in the following SO Questions. Please check out.
Javascript print web form with user input included
How to print only a selected HTML element?
If you are still not able to get your solution done, then let me know. Let me see how I can help you. Good Luck.

jQuery change function, how to save the state like a session

I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.

What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary

Do something when input field gets updated through jquery

I have input field
<input type="text" name="vehicle_make[]" id="make1"/>
and i have help dropdown that updates this field if user choose to do so. I do it trough standard jquery code
$("#make1").val("value");
Problem is, since i use validate plugin to validate this field, if user click on validate before entering anything in that box, he will get notice that he needs to fill it, but then if he fills it trough dropdown, validate plugin will not detect it until user click on submit again.
I know i could call submit in function in which i process dropdown, but i think that it is not right solution, since i would need to check if validation is already done before doing that (since if it is not, it would start validation before i want it to start).
I also need to tie some other things to that field also, so i would like to know is there is a way in which i could write function so it always check if field is filled, even if user did not fill it directly.
Sorry if i didn't explain everything right, this is my first message here.

Try this
$("#make1").change(function(){
//do something there
});

I have found solution. First, i created js variable form_submitted, and added onclick event to submit button, to change value of variable form_submitted to yes. Then, i created function:
function update_validation(){
if(form_submitted == 'yes'){
$("#my_form").valid();
};
};
that i call when user do something that is not detected regularly with validate plugin. This function manually starts validation again, but only if it has been started before by clicking on submit.

reload a page without losing field values like in FireFox using javascript

I'm very new to JavaScript and HTML.
I have a simple html form that has some select fields. When the user selects the options from the fields, a function is called that takes the values of the fields, multiples the values against other field values and spits out the results to an input text field named "result".
This is all working great, however I would love a way that instead of outputting the results to a text field, it would output as standard text on the page.
What I did was call the calculate function the tag, within the body, I inserted a document.write(result), then I created a button that calls the calculate function in addition to location.reload().
In Firefox, it works perfectly where it KEEPS the options selected, calculates the results, reloads the page and updates the document.write(result) value on the page.
But in IE or Safari, it resets the select options values to the default settings.
I hope this makes sense and appreciate any help!

how about this:
every time the user selects an option, or makes any sort of a selection, serialize that control, and slap the serialized string to the end of the current window.location, then navigate to it.
also, you will need to add javascript to check the current url, figure out what selection was made, and pro grammatically change the control's values. this way, when the user refreshes the page, the url will contain all of his selections.
got it?

Instead of document.write you could setup an element used specifically to hold the output value much like you do currently with the input element.
In place of the current input element used to output the result..
<span id="calculationResult"></span>
Then to populate that value and avoid reloading the page at all so that your fields maintain current values..
document.getElementById("calculationResult").innerHTML = result;
if you need to append you can always just create text nodes and append to the element which would be preferred anyway.

In order to keep text boxes' content as is, set the button as type="button" and call the calculate function and document.write in onclick. No reload, no mess.