ดาวตก - ฟอร์ม

ในบทนี้เราจะเรียนรู้วิธีการทำงานกับแบบฟอร์ม Meteor

การป้อนข้อความ

ขั้นแรกเราจะสร้างไฟล์ form องค์ประกอบที่มีช่องป้อนข้อความและปุ่มส่ง

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "text" name = "myForm">
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

ในไฟล์ JavaScript เราจะสร้างไฟล์ submitเหตุการณ์. เราจำเป็นต้องป้องกันพฤติกรรมเหตุการณ์เริ่มต้นเพื่อหยุดการรีเฟรชเบราว์เซอร์ ต่อไปเราจะนำเนื้อหาของช่องป้อนข้อมูลและกำหนดให้textValue ตัวแปร.

ในตัวอย่างต่อไปนี้เราจะบันทึกเนื้อหานั้นลงในคอนโซลนักพัฒนาเท่านั้น และสิ่งสุดท้ายที่เราต้องการคือการล้างช่องป้อนข้อมูล

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var textValue = event.target.myForm.value;
         console.log(textValue);
         event.target.myForm.value = "";
      }
   });
}

เมื่อเราพิมพ์ "ข้อความบางส่วน ... " ในช่องป้อนข้อมูลและส่งไปคอนโซลจะบันทึกข้อความที่เราป้อน

ปุ่มวิทยุ

สามารถใช้แนวคิดที่คล้ายกันสำหรับปุ่มตัวเลือก

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "radio" name = "myForm" value = "form-1">FORM 1
      <input type = "radio" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var radioValue = event.target.myForm.value;
         console.log(radioValue);
      }
   });
}

เมื่อเราส่งปุ่มแรกคอนโซลจะแสดงผลลัพธ์ต่อไปนี้

ช่องทำเครื่องหมาย

ตัวอย่างต่อไปนี้แสดงวิธีใช้ช่องทำเครื่องหมาย คุณจะเห็นได้ว่าเรากำลังทำกระบวนการเดิมซ้ำ

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <form>
      <input type = "checkbox" name = "myForm" value = "form-1">FORM 1
      <input type = "checkbox" name = "myForm" value = "form-2">FORM 2
      <input type = "submit" value = "SUBMIT">
   </form>
</template>

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({
   
      'submit form': function(event) {
         event.preventDefault();
         var checkboxValue1 = event.target.myForm[0].checked;
         var checkboxValue2 = event.target.myForm[1].checked;
         console.log(checkboxValue1);
         console.log(checkboxValue2);
      }
   });
}

เมื่อส่งแบบฟอร์มข้อมูลที่เลือกจะถูกบันทึกเป็น trueในขณะที่รายการที่ไม่ได้เลือกจะถูกบันทึกเป็น false.

เลือกดรอปดาวน์

ในตัวอย่างต่อไปนี้เราจะเรียนรู้วิธีใช้ไฟล์ selectธาตุ. เราจะใช้ไฟล์change เหตุการณ์ในการอัปเดตข้อมูลทุกครั้งที่มีการเปลี่ยนแปลงตัวเลือก

eorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <select>
      <option name = "myOption" value = "option-1">OPTION 1</option>
      <option name = "myOption" value = "option-2">OPTION 2</option>
      <option name = "myOption" value = "option-3">OPTION 3</option>
      <option name = "myOption" value = "option-4">OPTION 4</option>
   </select>
</template>

eorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'change select': function(event) {
         event.preventDefault();
         var selectValue = event.target.value;
         console.log(selectValue);
      }
   });
}

หากเราเลือกตัวเลือกที่สามคอนโซลจะบันทึกค่าตัวเลือก