How can I stop the page from refreshing and where am I going wrong in trying to get the values inside of the text fields?

Question

I would like to get the value in each text field in the form so I can use it to be placed as an argument in another function that needs the arguments to be objects that have certain attributes. Every time I press submit, I am not getting the values in the fields and then the page refreshes, leaving me no time to read the error message. I have looked on a few other posts but none of the provided solutions worked. How can I stop the page from refreshing and also, where am I going wrong in trying to get the values inside of the text fields? (The dictionary object references other objects that contain the info I am looking for.)

<form id="add-key"> 
    <h4>Key Signature</h4>
    <li><input id="key_name" type="text" name="key-name" value="name" class="small-input"></li>
    <li><input id="key_accidental" type="text" name="key-accidental" value="acc." class="small-input"></li>
    <li><input id="key_type" type="text" name="key-type" value="type" class="small-input"></li>
    <li><input name="Submit" type="submit" value="Add" onClick="keySelect()"></li>
</form>

var dictionary = {notes: notes, accidentals: accidentals, durations: durations, clefs: clefs, keySignatures: keySignatures, octaves: octaves, qualities: qualities, values: values, websitePages: websitePages};

function keySelect() {
    var theKeyName = $('#key_name').val();
    var theAccidentalName = $('#key_accidental').val();
    var theKeyType = $('#key_type').val();
    var newKey = {};
    var keyAccidentals = {"sharp":"#", "#":"#", "flat":"b", "b":"b"};

    if (dictionary.notes[theKeyName]) {
        newKey.note = theKeyName.toLowerCase(); 
    } else {
        alert("Need a valid key name.");
        console.log(theKeyName);
    }

    if (keyAccidentals[theAccidentalName]) {
        newKey.accidental = theAccidentalName.toLowerCase();
    } else {
        alert("Not a valid accidental.");
        console.log(theAccidentalName);
    }

    if (theKeyType == "major" || theKeyType == "minor") {
        newKey.quality = theKeyType.toLowerCase();
        console.log("yes " + theKeyType);
    } else {
        alert("The key must be major or minor.");
        console.log(theKeyType);
    }

    if (keyAccidentals[theAccidentalName]) {
        var theKeySignature = newKey.note + newKey.accidental + " " + newKey.quality;
    } else {
        var theKeySignature = newKey.note + " " + newKey.quality;
    }

    var reference = keySignatures[theKeySignature];
    console.log(reference);
    allKeySig(reference);
}

Answer 1

You need to prevent default behavior on clicking submit:

function keySelect(e) {
    e.preventDefault();
    var theKeyName = $('#key_name').val();
    var theAccidentalName = $('#key_accidental').val();
    var theKeyType = $('#key_type').val();
    var newKey = {};
    var keyAccidentals = {"sharp":"#", "#":"#", "flat":"b", "b":"b"};

    if (dictionary.notes[theKeyName]) {
        newKey.note = theKeyName.toLowerCase(); 
    } else {
        alert("Need a valid key name.");
        console.log(theKeyName);
    }

    if (keyAccidentals[theAccidentalName]) {
        newKey.accidental = theAccidentalName.toLowerCase();
    } else {
        alert("Not a valid accidental.");
        console.log(theAccidentalName);
    }

    if (theKeyType == "major" || theKeyType == "minor") {
        newKey.quality = theKeyType.toLowerCase();
        console.log("yes " + theKeyType);
    } else {
        alert("The key must be major or minor.");
        console.log(theKeyType);
    }

    if (keyAccidentals[theAccidentalName]) {
        var theKeySignature = newKey.note + newKey.accidental + " " + newKey.quality;
    } else {
        var theKeySignature = newKey.note + " " + newKey.quality;
    }

    var reference = keySignatures[theKeySignature];
    console.log(reference);
    allKeySig(reference);
}