How to use HTML forms without a server

Question

I am not a web-developer and want to understand the better way to pass variables. In the past I have used various ways to pass things to java script functions. I have never

Answer 1

The basic event you're going to look for is the form's submit event. If you're okay with just using event handlers, you can just do something like this:

var myForm = document.getElementById('myForm');
myForm.onsubmit = function () {
    // ...
};

Because you're just using JavaScript, you don't want the form to actually submit. (Side point: Because you're using JS, you should just build this form and add it to the page with JS, but that's a completely different issue.) You can cancel the form's default action like so:

myForm.onsubmit = function () {
    // ...
    return false;
};

Before we get into accessing data, make sure that you grab the elements you're going to need. It makes things a little faster, because you don't have to select the entire element from the DOM every time the form is submitted. For example:

var myForm = document.getElementById('myForm'),
    myTextField = document.getElementById('myTextField'),
    mySelectBox = document.getElementById('mySelectBox'),
    // ...

Depending on what kind of form elements you have, there are different ways to access their data. Text inputs, text areas, and select boxes are really easy:

var textValue = myTextField.value,
    selectValue = mySelectBox.value;

Radio buttons and check boxes are a little more complicated, because you have to go through every single one and see which one(s) is/are checked and which one(s) isn't/aren't, like so:

var isOneChecked = checkboxOne.checked,
    isTwoChecked = checkboxTwo.checked;

Going with your example of blue/pink background, you would probably want something similar to this:

var myForm = document.getElementById('myForm'),
    maleBox = document.getElementById('maleBox');

myForm.onsubmit = function () {
    var isMale = maleBox.checked;
    if (isMale) {
        document.body.style.backgroundColor = 'manlyBlue';
    } else {
        document.body.style.backgroundColor = 'sexistPink';
    }
};

Notes
If you do decide to go with event handlers, keep in mind that only one can be applied to your form at a time. If you want to attach a different function to the submit event as well, you'll have to go with event listeners, which is a completely different ball game and introduces problems of its own.

The final example only checks the value of the "I'm a guy" element, because (presumably) you're using radio buttons and you only have two options. If "I'm a guy" is not checked, then the other one should be. But if the form starts out with neither option checked, then that could be considered a bug.

The final example also uses inline styles to change the body's background color. It hurt me to type. A much more bearable method would be to add/remove classes as needed, but again, that's kind of beyond the scope of this question.