Build an object from a form submit in javascript/jquery

Question

I'm working on a project where I need to read a form, then create objects from the form, which can then be used to keep track of players in the game, and their score.

This is the constructor:

function Player(x) {
  this.playerName = x;
  this.playerScore = 0;
}

Here's the form:

    <form id="PlayerName">
      <label for="playerName1"><h3>Player 1, please input your name:</h3></label>
      <input type="text" id="playerName1"></input><br>
      <button type="submit" name="playerName">Submit Name</button>
    </form>

Here's the JS/jQuery:

  $("form#PlayerName").submit(function(event){
    event.preventDefault();
    var inputName1 = $("input#playerName1").val();
    var player1 = new Player(inputName1);
  });

When I run the debugger, it finds the object and looks like it's creating it, with the name in the proper spot then when I try to run the following function against that object, it says that it's not found, and I'm totally stumped:

  $("form#HoldDice").submit(function(event) {
    event.preventDefault();
        HoldTheDice();
        if (currentPlayer !== 1) {
          $("span#PlayerOneScore").text(player1.playerScore);
          $("span#DiceRoll").text("Player One, you've chosen to hold the dice, you added " + addscore + " to your score.")
          addscore = 0; 
}...

currentPlayer is a variable used to keep track of which players turn it is, I don't think it's relevant to this question though.

Help?

The first thing I would suggest is to not use forms and submit events since you not really submitting data anywhere and you are cancelling the event in the first place and instead use regular buttons and work with the click event of those. Next, you need to give us more context for your question. Where is currentPlayer defined? And, what exact line of code causes the not found issue? — Scott Marcus
– Scott Marcus, Commented Oct 25, 2018 at 2:18
@ScottMarcus sorry, currentplayer is just a toggle to keep track of which player's turn it is, it's not relevant to this question at this point. — glitchwizard
– glitchwizard, Commented Oct 25, 2018 at 2:20
@ScottMarcus sorry, I'm kind of new to this, so does that mean if I want to create global objects from a webpage event, I should use .click instead of .submit? I'll try to look up the difference between the two — glitchwizard
– glitchwizard, Commented Oct 25, 2018 at 2:31
It doesn't always have to be click, but submit is a very specific event for gathering up all your form data and transmitting it back to the server. Since you're not doing that (and in fact, you are cancelling that event with event.preventDefault()), submit is the wrong event. Since you want it to happen when someone clicks your button, change the button to be just a regular button (not a submit) and handle the click event. Then, you'll be able to omit the event.preventDefault();. — Scott Marcus
– Scott Marcus, Commented Oct 25, 2018 at 12:57

Kira Hao · Accepted Answer · 2018-10-25 02:37:40Z

0

your player1 is a function local variable you declare within submit function. Its life time only within the function. You need either propagete it into global object so that another fuction can use, or you declare outside submit function, so that you assigned it when user submit. Reuse it when you want to.

$("form#PlayerName").submit(function(event){
  event.preventDefault();
  var inputName1 = $("input#playerName1").val();
  var player1 = new Player(inputName1); // function local variable
});

Try this

Player1 player1 = new Player();
$("form#PlayerName").submit(function(event){
  event.preventDefault();
  var inputName1 = $("input#playerName1").val();
  player1 = new Player(inputName1); // function local variable
});

$("form#HoldDice").submit(function(event) {
  event.preventDefault();
      HoldTheDice();
      if (currentPlayer !== 1) { // assuming this is assgined too, else check undefined
        $("span#PlayerOneScore").text(player1.playerScore);
        $("span#DiceRoll").text("Player One, you've chosen to hold the dice,   you added " + addscore + " to your score.")
        addscore = 0; 
 }...

class and array of class

Take a look on how to create class. https://developer.mozilla.org/my/docs/Web/JavaScript/Reference/Classes

how to create array of custom object. Create an array in javascript of custom objects

edited Oct 25, 2018 at 2:37

answered Oct 25, 2018 at 2:22

Kira Hao

1,1372 gold badges11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

glitchwizard Over a year ago

I was able to get it to work when I instantiated it outside of the function. I'm hoping to learn how to get this to work so that I can add multiple players at some point in a serialized function. new Player => player1, new Player => player2 ... and so on.

Kira Hao Over a year ago

You need use class instead of function. Class Player instead of function Player. when you have class object, you have better control for everything. Like new user to new object, then store them into array.

glitchwizard Over a year ago

pardon my ignorance, but I'm pretty new to this, how do I create an object constructor as a class instead of a function like I've already done?

Kira Hao Over a year ago

take a look on this. Basically like function, you declare function then you are propagating it, but now you change to class developer.mozilla.org/my/docs/Web/JavaScript/Reference/Classes how to create array of custom object. stackoverflow.com/questions/5115810/…

Kira Hao Over a year ago

@glitchwizard appreciate you can mark this as answer if this help you. Thank you :)

Collectives™ on Stack Overflow

Build an object from a form submit in javascript/jquery

1 Answer 1

class and array of class

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

class and array of class

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related