Develop Reference

Reload partial and retain form values

When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).

jQuery - Check if input field is untouched

I'm trying to do something with jQuery or just JavaScript (either way works). I need to check if a certain form input field is untouched AND has a value.
Essentially what's going on is that, from a previous page, a user fills out a small form... they are redirected to the full version of the form with said information pre-filled. To reduce hassle, I would like to make it so that as the user fills out the form, it skips the pre-filled input fields. I need to do this in a non-blocking away, so if a user actually clicks on a pre-filled input field to change the value, it won't just skip again.
Is this even possible?
Edit: In this context, when I say "skip", I mean as in to move onto the next form field in the form, if there is any left.

I don't know what you mean by "skip". But you can add an event listener for the change event of the inputs and then set a class/data-attribute or store the information as a js property, so you can test for this value and treat inputs differently if they have been touched.

defaultChecked; why this property even exist?

Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?

First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.

Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.

One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".

Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!

simple way of setting up a 2 step form with html/javascript

I have an html form where the user fills in parcel details and then it outputs a price based on various fields. Then what I want is if the user is happy with the price they can fill in a few more fields such as name, contact info etc and then press submit and the form will get processed via php.
I thought of 2 ways of doing this. First is to have one form and when that is submitted it will generate another form asking for more info. But I need a way of passing variables from the first form to the second so that's not very good.
The second idea was to have a trigger in the form so that when a user changes the value in a certain field it will output the price and then show the other contact info fields. But I'm not sure if this approach is good either.
What's the simplest/smartest way to approach this on client side?

I'd go with the second option.
Step 1. Make a server-side processing page, say quote.php
Step 2. Using javascript, monitor changes to your form fields. Once you have a valid entry, send the post data to quote.php, which should reply back with the quote. Populate a div with the price quote.
JQuery Example:
//You'll have to call this function whenever the user input changes
//Call quote service
$.get("/quote.php",
{
//Pass javascript variables as POST/GET variables
zip: txtzip, weight: txtweight, ship_method: txtship_method
},
// Populate price div on this page with the quote response
function(data){
$("#calc-price").html(data);
});
Step 3: If the user likes the price, they fill out the rest of the form and you process it like a regular ol' form.

If the client has all the data required to perform the price calculation then I would suggest a single form with some show/hide functionality as per your second idea. Others may disagree but I only go back to the server when reading or writing. And even less so if there are webservices available.

Text box that the user fills and then is saved?

I'm fairly ok with HTML and Javascript but any lanuage solution will do as a learning experience.
I want to have many small text boxs on a website that the user can write into and on hitting enter the text box's value becomes what was input. The text box must be saved so that it can be seen by other uses of the website and updated.
Most of all I'd like it to be simple as there are 36 boxes in total.
Thanks in advance

Here is a way derived of the autoSave we do in our web app:
the user enter a field. The onfocus event is triggered, and start a setInterval to check for changes
if a change occurs, the database is updated with the new value of the field. You need to choose the time you wait before saving. 250ms seems natural in our app.
each key stroke clearInterval the pending setInterval
In parallel another setInterval checks if the database has changed, like a doc version.If so, the fields modified by others are updated.
The polling in the step 4. could be replaced by a WebSocket if you have the chance to target only modern browsers.