Saving user's text input and dropdown selections as items in an object with JavaScript/Jquery?-CodePudding

I built a page for a user to generate a game character, and it lets them either randomize or input their own choices for each trait. I have the randomization all set up, and it saves those selections just fine, but I'm having trouble getting it to save the selections properly if the user chooses their own input instead.

Basically, I have a series of toggle switches that check whether they want a trait randomized or not, and if not, they get to type their choice into a text box or choose an option from a select element dropdown menu (ie. each trait has either a dropdown menu OR a text input, but not both).

For choosing their character name, if they want to write it themselves, I have an input element text box:

<input placeholder="Type name" id="nameUsed" type="text" >

For choosing their other traits, I have select dropdown menus with multiple options like this one (there are three of these menus, one for each trait):

<select id="alignMenu" name="alignment" >
        <option value="chaotic-neutral">chaotic-neutral</option>
        <option value="chaotic-evil">chaotic-evil</option>
        <option value="chaotic-good">chaotic-good</option>
        <option value="lawful-neutral">lawful-neutral</option>
        <option value="lawful-evil">lawful-evil</option>
        <option value="lawful-good">lawful-good</option>
        <option value="neutral">neutral</option>
        <option value="neutral-evil">neutral-evil</option>
        <option value="neutral-good">neutral-good</option>
</select>

They click this button to save their input:

<button  type="submit" name="saving" id="lockIn">Save Choices</button>

I have the traits saved as items in an object called CharacterAttributes, and this is the content of the JavaScript function I currently have to try to save those items when the Save button is clicked:

if ($('#name-choice').is(":checked")) {
  }
  else {
    CharacterAttributes.name = JSON.stringify($('#nameUsed').val);
  };

if ($('#align-choice').is(":checked")) {
  }
  else {
    CharacterAttributes.alignment = JSON.stringify($('#alignMenu').val);
  };

Name-choice and align-choice are the ID's of the toggle switches, so it's checking if the user wants it randomized or not. If it is randomized, it won't do anything since another function takes care of that, but if the user made their own selection, I want it to save the text typed into the nameUsed input field, and to save the dropdown option currently selected in the alignMenu.

As it is right now, those values are saving as 'undefined.' Can anyone help me figure out what I'm doing wrong here?

CodePudding user response：

Try using jquery val as a function. It's not an attribute.

if ($('#name-choice').is(":checked")) {
  }
  else {
    CharacterAttributes.name = JSON.stringify($('#nameUsed').val()); // Changed this part
  };

if ($('#align-choice').is(":checked")) {
  }
  else {
    CharacterAttributes.alignment = JSON.stringify($('#alignMenu').val()); // Changed this part
  };