2016-02-19 64 views
0

我正在关注的流星Tuturial(https://www.meteor.com/tutorials/blaze/creating-an-app)这里是HTML的部分和JavaScript代码:如何从HTML输入中获取多个值?

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 = ""; 
    } 
    }); 

我想知道如何添加HTML表单中的另一个输入并访问Java脚本中的另一个输入。

例如:

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

回答

1

如果您插入例如输入到你的HTML新的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; 
    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=""; 
} 
+0

我这样做,但现在当我在浏览器中测试它,输入不起作用。 @ Aplet123 – user3675868