CODEWITHSUNDEEP
javascripthtmlmeteor
user3675868
user3675868

Reputation: 27

How to get multiple values from HTML inputs?

I'm following the Meteor Tuturial (https://www.meteor.com/tutorials/blaze/creating-an-app) and here are parts of the HTML and JavaScript codes:

HTML

 <body>
  <div class="container">`enter code here`
    <header>
      <h1>Todo List</h1>

      <form class="new-task">
        <input type="text" name="text" placeholder="Type to add new tasks" />
      </form>

    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

JavaScript

    Template.body.events({
    "submit .new-task": function (event) {
      // Prevent default browser form submit
      event.preventDefault();

      // Get value from form element
      var text = event.target.text.value;

      // Insert a task into the collection
      Tasks.insert({
        text: text,
        createdAt: new Date() // current time
      });

      // Clear form
      event.target.text.value = "";
    }
  });

I want to know how to add another input in the HTML form and access that another Input in the Java Script.

for example:

<input type="text" name="city" placeholder="Type to add city" />

Upvotes: 0

Views: 1100

Answers (1)

Aplet123
Aplet123

Reputation: 35560

If you insert your example input into your HTML the new javascript should be:

Template.body.events({
"submit .new-task": function (event) {
  // Prevent default browser form submit
  event.preventDefault();

  // Get value from form element
  var text = event.target.text.value;
  var city = event.target.city.value;

  // Insert a task into the collection
  Tasks.insert({
    text: text,
    createdAt: new Date() // current time
  });
  Tasks.insert({
    text: city,
    createdAt: new Date() // current time
  });

  // Clear form
  event.target.text.value = "";
  event.target.city.value="";
}

Upvotes: 1

Related Questions