Kā notīrīt formu tīmekļa lietojumprogrammā?

Formu lauku tīrīšana var tikt realizēta vairākos veidos atkarībā no konteksta:

1. Forma ar reset tipa pogu atjaunošana: HTML formā izmantojot pogu ar type="reset" automātiski tiek atjaunoti visi formu elementi uz sākotnējām vērtībām.

   <form id="myForm">
     <input type="text" name="username" value="Initial value">
     <input type="email" name="email">
     <button type="reset">Tīrīt</button>
   </form>
   

2. Programmatiska formu atjaunošana ar JavaScript: Var izsaukt reset() metodi uz DOM elementa.

   const form = document.getElementById('myForm');
   form.reset(); // Atjauno formu uz sākotnējām vērtībām
   

3. Katra lauka manuāla tīrīšana ar JavaScript: Pārlūkojot formu laukus un iestatot to vērtības uz tukšu virkni vai citu sākotnējo vērtību.

   const form = document.getElementById('myForm');
   const inputs = form.querySelectorAll('input, textarea, select');
   
   inputs.forEach(input => {
     const type = input.type;
     const tagName = input.tagName.toLowerCase();
   
     if (type === 'text' || type === 'email' || type === 'password' || type === 'tel' || tagName === 'textarea') {
       input.value = '';
     } else if (type === 'checkbox' || type === 'radio') {
       input.checked = false;
     } else if (tagName === 'select') {
       input.selectedIndex = -1; // vai iestatīt uz noklusējuma opciju
     }
   });
   

4. Formu lauku tīrīšana ar frameworkiem (piemēram, React, Vue): Kad formu stāvokli pārvalda komponenti, tīrīšana tiek veikta, atjauninot stāvokli.

   • React (ar stāvokļa izmantošanu):

     import React, { useState } from 'react';
     
     function MyForm() {
       const [formData, setFormData] = useState({
         username: '',
         email: ''
       });
     
       const handleChange = (e) => {
         const { name, value } = e.target;
         setFormData({ ...formData, [name]: value });
       };
     
       const handleSubmit = (e) => {
         e.preventDefault();
         // Datu nosūtīšana
         console.log(formData);
         // Formas tīrīšana
         setFormData({
           username: '',
           email: ''
         });
       };
     
       return (
         <form onSubmit={handleSubmit}>
           <input
             type="text"
             name="username"
             value={formData.username}
             onChange={handleChange}
           />
           <input
             type="email"
             name="email"
             value={formData.email}
             onChange={handleChange}
           />
           <button type="submit">Sūtīt</button>
           <button type="button" onClick={() => setFormData({ username: '', email: '' })}>Tīrīt</button>
         </form>
       );
     }
     

   • Vue (ar v-model):

     <template>
       <form @submit.prevent="handleSubmit">
         <input type="text" v-model="formData.username">
         <input type="email" v-model="formData.email">
         <button type="submit">Sūtīt</button>
         <button type="button" @click="clearForm">Tīrīt</button>
       </form>
     </template>
     
     <script>
     export default {
       data() {
         return {
           formData: {
             username: '',
             email: ''
           }
         };
       },
       methods: {
         handleSubmit() {
           // Datu nosūtīšana
           console.log(this.formData);
           this.clearForm(); // Pēc sūtīšanas tīrīt
         },
         clearForm() {
           this.formData.username = '';
           this.formData.email = '';
         }
       }
     };
     </script>
     

Izvēlētais metode ir atkarīgs no lietojuma struktūras, izmantotajām tehnoloģijām un funkcionalitātes prasībām. Visvienkāršākie ir HTML reset un JavaScript form.reset(). Sarežģītākās lietojumprogrammās ar stāvokļa pārvaldību caur frameworkiem, tīrīšana tiek veikta, atjauninot stāvokli.