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.

Function doesn't output data taken from user input

I'm writing a small program that takes user input from form text fields and when the generate button is clicked, it displays the collected data unto another div.
Problem is once it collects the input (I know this because I used an alert test to know where the function breaks), it doesn't display. It stops exactly where the display commands start.
Any advice?

I'm not sure why you needed to put the output functions into the nested function, they should have worked directly.
But with the nested function, you need to call it. Put:
outputstuff();
after alert("working 8");

The generate button appears to submit the form on return from calling generate - the default type of a button is "submit" and it has the id "submitbutton".
If the page is reloaded from the server, the browser may fill in previously filled in input values but won't copy them into the SPAN elements.

Check input fields depending on radio button selection

View image of form here before reading the question.
Using jQuery when the Complete Safety Walk button is pressed I want to make sure that if any radio buttons are set to Fail that the Action Required, Assigned To and ECD fields for that row are not empty and the Complete Safety Walk button gets disabled.
The table has an id safety_walk_items and each row has a unique id item_1, item_2, etc.
Note: There are NO form open/close elements as each row is saved using AJAX (when the icon at the end of the row is clicked).
I'm not using any fancy input highlighting, just showing a hidden div with an error message.
<div class="validation_errors hidden"></div>

Simple way to save list of items and display them using javascript/jquery

Say I want to load an html page with a text box, "add" and "remove" buttons, and an empty text field below.
If I type "Sally" and click the add button, "Sally" appears in the text field below.
Then I type "Greg" and click the add button, "Greg" appears under Sally.
Then I type "Sally" and click the remove button, and only "Greg" remains in the text box.
I want "Greg" to still be the only item displayed in the text box when I close and re-open the page later.
Is the most efficient way to do this to serialize() the items that are typed in the text box, and then deserialize them in order to display them? Or is there a better/more efficient way to do this.
Edit: This method needs to be offline, using an SQL database/etc. is not an option.

One option is to store this information in localstorage.
After every time a user presses the add or remove button you:
Update your JS array (either add the item, remove the
item if it exists, etc)
Visually update your text field where you display the array items.
Serialize the array and save it to local storage (which if you click on the link above, you can see how to do)
On page load, reload the serialized array from localstorage, unserialize it, save it to a variable on the page, and visually update your text field where you display the array items.

Saving form values dependant upon onclick/onchange functions

I have a form that saves user entered values on submit with php.
Some of the fields are in div's that are display:hidden until an onclick or onchange function changes that div to show.
How can I show only the divs containing fields with saved values after the form has been submitted? I have saved the values in the always visible fields but cannot trigger their functions.
I am using very little jquery because I am new to the syntax and would prefer to implement solutions I can understand and adapt. Simple jquery is acceptable if it is a better/quicker/easier solution.
Thanks
Code Example:
<input type="radio" id="customer" name="jobtype" value="customer" onclick="getJobType()" autofocus>Customer
<input type="radio" id="store" name="jobtype" value="store" onclick="getJobType()">Store
<span id="customerjobs" style="display:none">
<select id="customer" name="customer" onchange="createJobsList(this.value)">
*various options*
</select>
<span id="jobslist"><br></span>
</span>
The first span (id=customerjobs) is initially hidden. Upon selection from the radio's, all but the corresponding span is set to display:none and the selected is set to display:block. On submit, the selected radio is saved, but the onclick isn't called to show the span.
The second span (id=jobslist) content is populated by innerHTML using the results of an ajax call to PHP when a selection is made. On submit, the selected option is saved, but the onchange isn't called to fill the span.
So I need to trigger the onclick of a saved radio value to show my content and trigger the onchange of a saved select to populate additional content.
Note: I used onblur with javascript to set the focus initially so any action would trigger the content but it caused an unnecessary pause in filling the form that I didn't want.
Page loads with only a radio selection.
User clicks radio button.
Onclick function changes style of span id=customerjobs to display:block.
The select input inside the span is now visible. The user selects an option.
Onchange function makes an ajax call to request information from the server which is placed in span id=jobslist.
User submits form to same page.
Form saves entered values so they are still selected when page reloads.
Onclick and onchange functions are not triggered by PHP saved values so steps 3 and 5 never occur. Page is left with only the radio buttons unless it is clicked again.
Well, I have a jsfiddle to illustrate my problem using default selections because I cannot use PHP to save entered values.
Imagine the form has just been submitted and the values saved are the checked radio button(customer) and the selection from the drop down(1) which adds the word "customer".
Ideally, the entire form would still be visible (The selected radio, the selected option and the content added to the last span "customer").
Instead, only the selected radio is visible unless it is clicked again to unhide the select drop down. The drop down retains its' value as well, but the content in the last span will only appear onchange.
http://jsfiddle.net/L5H2u/31/
Try it out and advance thanks for any suggestions.

Can you hook a function to onload that checks the radio buttons and simulates the click by calling getJobtype()? That will get the initial case where the radio button is already the way the user wants it. Further clicks will work as you planned.
Edited to add: If I understand you right, all is well the first time the page is loaded because the user has to click something and that runs your getJobType() function. However, when the page is reloaded, the correct radio button is already checked, the user doesn't change anything, and your function doesn't run. If that's correct, running getJobType() from onload should fix it.
You may need something like <input type="hidden" id="firstrun" value="true"> The PHP would set that to false on subsequent loads of the page, and the onload function would only make things happen if "firstrun" was false. Edit: You don't need this because getJobType() has no default action; keep reading.
Edited still more: You have checked="checked' on the Customer radio button, so if the user is a customer, even the initial run doesn't reveal the hidden material.
Remove checked="checked" when the page is initially loaded so that on the initial presentation, neither button is checked.* Then add window.onload=getJobType; to the end of your JavaScript.
On the initial load, getJobType() will do nothing since it checks both buttons and has no default action. When a button is clicked, getJobType() will run and act based on the button that was clicked.
When the page is loaded a subsequent time, one of the buttons will be checked and when onload runs getJobType() it will perform the corresponding action.
The radio buttons, SELECT values, and any other form elements that are preserved and "reflected" by the server-side PHP will be correct when the form is loaded the second (and subsequent) times. Where you need an onload JavaScript function is when one of those values also changes something else, such as making a hidden DIV visible. If there are functions other than getJobType() that manipulate the DOM, it will likely be cleaner to write an init function that sets up the DOM based on the values of the form elements as preserved by the PHP process.
* I normally advocate having some button checked by default so that the user can always get back to the initial state. This case seems to be an exception.