Jangan setel ulang formulir setelah mengirimkan javascript

Question

Metode HTMLFormElement.reset()_ mengembalikan nilai default elemen form. Metode ini melakukan hal yang sama seperti mengklik kontrol <input type="reset"> formulir

Table of Contents Show

Tujuan pembelajaran
Mengirimkan
Menyetel ulang
JavaScript tingkat lanjut
Bagaimana Anda menghentikan formulir agar tidak mengatur ulang saat mengirim?
Bagaimana cara menghapus formulir setelah mengirimkan dalam JavaScript tanpa menggunakan reset?
Bagaimana cara menyimpan data formulir saya setelah mengirimkan?
Bagaimana cara mengatur ulang formulir setelah mengirimkan dalam JavaScript?

Jika kontrol formulir (seperti tombol setel ulang) memiliki nama atau id setel ulang, itu akan menutupi metode setel ulang formulir. Itu tidak mengatur ulang atribut lain di input, seperti disabled

Perhatikan bahwa jika setAttribute() dipanggil untuk menyetel nilai atribut tertentu, panggilan selanjutnya ke reset() tidak akan menyetel ulang atribut ke nilai defaultnya, melainkan akan mempertahankan atribut pada nilai berapa pun yang ditetapkan oleh panggilan setAttribute()

Easy way to do this would be if I can add onsubmit=”return false” to

How would I do this with HF Forms?

Topik ini telah diubah 11 bulan, 3 minggu yang lalu oleh jrep305 .
Topik ini telah diubah 11 bulan, 3 minggu yang lalu oleh jrep305 .

Melihat 4 balasan - 1 sampai 4 (dari total 4)

Kontributor Plugin Lap

(@lapzor)

Karena pengiriman ditangani oleh Ajax, hanya menambahkan onsubmit=”return false” ke elemen formulir tidak akan mencegah bidang dibersihkan setelah pengiriman

Anda tentu saja dapat menghapus sedikit kode ini dari javascript Formulir HTML, tetapi itu akan ditimpa lagi setiap pembaruan

       // clear form
        if (!response.error) {
          formEl.reset()
        }

Saat ini tidak ada cara yang baik untuk mencegah Formulir HTML menghapus formulir setelah berhasil dikirim

Pemula Utas jrep305

(@jrep305)

Terima kasih Anda yang luar biasa, waktu respons yang luar biasa. Saya tidak punya masalah mempertahankan ini pada setiap pembaruan. Plugin formulir Anda adalah tambahan yang sangat ringan dan sempurna untuk membangun aplikasi

Pemula Utas jrep305

(@jrep305)

Bisakah Anda mengarahkan saya ke lokasi file yang benar di mana saya dapat menemukan dan menghapus kode ini. terima kasih banyak

Sudahlah saya menemukannya

aset/src/js/publik. js

Balasan ini telah diubah 11 bulan, 3 minggu yang lalu oleh jrep305 .
Balasan ini telah diubah 11 bulan, 3 minggu yang lalu oleh jrep305 .

Pemula Utas jrep305

(@jrep305)

Baru saja melihat bahwa Anda menulis ini

“Saat ini tidak ada cara yang baik untuk mencegah Formulir HTML menghapus formulir setelah berhasil dikirim. ”

Dan Menghapus

// hapus formulir
jika (. tanggapan. kesalahan) {
formEl. mengatur ulang()
}

Tidak berpengaruh…Saya benar-benar membutuhkan data formulir untuk tetap utuh setelah pengiriman jika Anda memikirkan cara untuk menanganinya, itu akan sangat bagus. Saya dapat menyegarkan halaman setelah pengiriman tetapi itu tidak bagus untuk UI

Dalam video ini saya menggunakan editor online bernama Plunker untuk menulis dan menjalankan kode Angular. Buku dan kode telah diperbarui untuk menggunakan StackBlitz sebagai gantinya. Untuk lebih memahami tentang mengapa dan perbedaan antara

Lihat Kode

Jalankan Kode

Validasi Formulir Berbasis Model
Formulir Model Reaktif

Tujuan pembelajaran

Cara memanggil fungsi di komponen kami saat pengguna mengklik kirim
Cara mereset formulir kembali ke status aslinya

Mengirimkan

Untuk mengirimkan formulir di Angular, kami memerlukan tombol dengan type dari submit di markup formulir kami di antara tag <form> … </form>, seperti itu

<form>
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

_

Saat kami menekan tombol kirim ini, ini akan memicu mekanisme pengiriman formulir HTML5 normal, sehingga mencoba untuk mengeposkan formulir ke URL saat ini

Namun, alih-alih mengeluarkan POST standar, kami ingin memanggil fungsi pada komponen kami, untuk melakukannya, kami menggunakan direktif ngSubmit dan menambahkannya ke elemen formulir, seperti itu

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

Tindakan ini membajak mekanisme pengiriman formulir normal dan sebagai gantinya memanggil fungsi

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

0 di komponen kami. Mari terapkan

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

0 dengan konsol sederhana. garis log seperti itu

Daftar 1. naskah. ts

onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
  }
}

Sekarang saat kita menekan tombol Kirim

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

2 akan dicetak ke konsol

Tip

Kita dapat melakukan apa pun yang kita inginkan dalam fungsi ini

Untuk mendapatkan nilai model formulir saat ini, kita dapat memanggil

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

3

Di bagian selanjutnya, kita membahas cara membuat permintaan HTTP, setelah mengetahui bahwa kita akan dapat membuat permintaan API yang meneruskan nilai dari model formulir kita

Menyetel ulang

Dalam formulir berdasarkan model untuk menyetel ulang formulir, kita hanya perlu memanggil fungsi

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

4 pada model

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

5 kita

Untuk contoh formulir kita, mari setel ulang formulir di fungsi

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

0, seperti itu

Daftar 2. naskah. ts

onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    this.myform.reset();
  }
}

Formulir sekarang disetel ulang, semua kolom input kembali ke status awalnya dan properti

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

7,

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

8, atau

<form (ngSubmit)="onSubmit()">
  .
  .
  .
  <button type="submit" class="btn btn-primary" >Submit</button>
</form>

9 juga disetel ulang ke nilai awalnya

Ringkasan

Kita dapat mengikat ke peristiwa output arahan ngSubmit untuk memanggil fungsi pada komponen kita saat pengguna mengirimkan formulir

Memanggil fungsi

onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
  }
}

0 pada model formulir akan menyetel ulang formulir kembali ke status aslinya

Kita dapat memanggil fungsi pada komponen kita untuk memproses formulir. Namun Angular memberi kita cara lain untuk memproses nilai formulir, dengan menggunakan pemrograman reaktif dan RxJS, kita akan membahasnya di kuliah berikutnya

Daftar

Daftar 3. utama. ts

import {
    NgModule,
    Component,
    Pipe,
    OnInit
} from '@angular/core';
import {
    ReactiveFormsModule,
    FormsModule,
    FormGroup,
    FormControl,
    Validators,
    FormBuilder
} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';


@Component({
  selector: 'model-form',
  template: `
  <div class="container">
  <form novalidate
      [formGroup]="myform"
      (ngSubmit)="onSubmit()">

  <fieldset formGroupName="name">
    <div class="form-group"
         [ngClass]="{
        'has-danger': firstName.invalid && (firstName.dirty || firstName.touched),
        'has-success': firstName.valid && (firstName.dirty || firstName.touched)
      }">
      <label>First Name</label>
      <input type="text"
             class="form-control"
             formControlName="firstName"
             required>
      <div class="form-control-feedback"
           *ngIf="firstName.errors && (firstName.dirty || firstName.touched)">
        <p *ngIf="firstName.errors.required">Last Name is required</p>
      </div>

      <!--
        <pre>Valid? {{ myform.controls.name.controls.firstName.valid }}</pre>
        <pre>Dirty? {{ myform.controls.name.controls.firstName.dirty }}</pre>
      -->
    </div>

    <div class="form-group"
         [ngClass]="{
        'has-danger': lastName.invalid && (lastName.dirty || lastName.touched),
        'has-success': lastName.valid && (lastName.dirty || lastName.touched)
      }">
      <label>Last Name</label>
      <input type="text"
             class="form-control"
             formControlName="lastName"
             required>
      <div class="form-control-feedback"
           *ngIf="lastName.errors && (lastName.dirty || lastName.touched)">
        <p *ngIf="lastName.errors.required">Last Name is required</p>
      </div>
    </div>
  </fieldset>


  <div class="form-group"
       [ngClass]="{
        'has-danger': email.invalid && (email.dirty || email.touched),
        'has-success': email.valid && (email.dirty || email.touched)
   }">
    <label>Email</label>
    <input type="email"
           class="form-control"
           formControlName="email"
           required>
    <div class="form-control-feedback"
         *ngIf="email.errors && (email.dirty || email.touched)">
      <p *ngIf="email.errors.required">Email is required</p>
      <p *ngIf="email.errors.pattern">The email address must contain at least the @ character</p>
    </div>

    <!--
      <pre>Valid? {{ myform.controls.email.valid }}</pre>
      <pre>Dirty? {{ myform.controls.email.dirty }}</pre>
    -->

  </div>

  <div class="form-group"
       [ngClass]="{
        'has-danger': password.invalid && (password.dirty || password.touched),
        'has-success': password.valid && (password.dirty || password.touched)
   }">
    <label>Password</label>
    <input type="password"
           class="form-control"
           formControlName="password"
           required>
    <div class="form-control-feedback"
         *ngIf="password.errors && (password.dirty || password.touched)">
      <p *ngIf="password.errors.required">Password is required</p>
      <p *ngIf="password.errors.minlength">Password must be 8 characters long, we need another {{password.errors.minlength.requiredLength - password.errors.minlength.actualLength}} characters </p>
    </div>
  </div>

  <!--
    <pre>{{ language.errors | json }}</pre>
  -->

  <div class="form-group"
       [ngClass]="{
        'has-danger': language.invalid && (language.dirty || language.touched),
        'has-success': language.valid && (language.dirty || language.touched)
      }">
    <label>Language</label>
    <select class="form-control"
            formControlName="language">
      <option value="">Please select a language</option>
      <option *ngFor="let lang of langs"
              [value]="lang">{{lang}}
      </option>
    </select>
  </div>

  <button type="submit"
          class="btn btn-primary">Submit
  </button>

  <pre>{{myform.value | json}}</pre>
</form>
</div>`
})
class ModelFormComponent implements OnInit {
  langs: string[] = [
    'English',
    'French',
    'German',
  ];
  myform: FormGroup;
  firstName: FormControl;
  lastName: FormControl;
  email: FormControl;
  password: FormControl;
  language: FormControl;


  ngOnInit() {
    this.createFormControls();
    this.createForm();
  }

  createFormControls() {
    this.firstName = new FormControl('', Validators.required);
    this.lastName = new FormControl('', Validators.required);
    this.email = new FormControl('', [
      Validators.required,
      Validators.pattern("[^ @]*@[^ @]*")
    ]);
    this.password = new FormControl('', [
      Validators.required,
      Validators.minLength(8)
    ]);
    this.language = new FormControl('');
  }

  createForm() {
    this.myform = new FormGroup({
      name: new FormGroup({
        firstName: this.firstName,
        lastName: this.lastName,
      }),
      email: this.email,
      password: this.password,
      language: this.language
    });
  }

  onSubmit() {
    if (this.myform.valid) {
      console.log("Form Submitted!");
      this.myform.reset();
    }
  }
}


@Component({
  selector: 'app',
  template: `<model-form></model-form>`
})
class AppComponent {
}


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule],
  declarations: [
    AppComponent,
    ModelFormComponent
  ],
  bootstrap: [
    AppComponent
  ],
})
class AppModule {
}

platformBrowserDynamic().bootstrapModule(AppModule);

Menemukan kesalahan atau ingin berkontribusi pada buku?

Validasi Formulir Berbasis Model
Formulir Model Reaktif

JavaScript tingkat lanjut

Kursus unik ini mengajarkan Anda pengetahuan JavaScript tingkat lanjut melalui serangkaian pertanyaan wawancara. Bawa JavaScript Anda ke tahun 2021 hari ini

Tingkatkan JavaScript Anda sekarang

[🌲,🌳,🌴].push(🌲)

Jika kursus saya bermanfaat, mohon pertimbangkan untuk menanam pohon atas nama saya untuk memerangi perubahan iklim. Hanya $4. 50 akan membayar 25 pohon untuk ditanam atas nama saya. Menanam sebuah pohon

Bagaimana Anda menghentikan formulir agar tidak mengatur ulang saat mengirim?

Menggunakan nilai "return false". . Memberikan nilai ini ke acara membuat formulir tidak menghasilkan apa-apa dan mencegahnya dari pengiriman serta menyegarkan browser. giving the "return false;" value to the onsubmit event. Giving this value to the event makes the form return nothing and prevent it from submission as well as refreshing the browser.

Bagaimana cara menghapus formulir setelah mengirimkan dalam JavaScript tanpa menggunakan reset?

Dalam kode ini, kita menggunakan tipe kirim di mana formulir kita akan dikirimkan tetapi untuk membuatnya bebas dari tanggal pengisian kita memanggil fungsi dengan nama fun() . Dengan menggunakan fungsi ini, kami akan menetapkan nilai semua bidang sama dengan tidak ada. Fungsi ini akan ditulis dalam javascript dan di tag skrip. . Using this function we will set the value of all fields equal to nothing. This function will be written in javascript and in the script tag.

Bagaimana cara menyimpan data formulir saya setelah mengirimkan?

Cara Menyimpan Data Formulir Setelah Mengirim dan Menyegarkan Menggunakan PHP .

Simpan Formulir Data di Refresh Menggunakan PHP Ternary Operator. Operator ternary adalah versi yang lebih pendek dan praktis dari pernyataan if/else standar. .

Simpan Data Formulir di Refresh dengan PHP Null Coalescing Operator

Bagaimana cara mengatur ulang formulir setelah mengirimkan dalam JavaScript?

Fungsi reset() didefinisikan dalam JavaScript dan hanya dengan mengkliknya, formulir yang akan ditautkan ke metode onclick() akan mengatur ulang setiap bagian masukan dari formulir yang disediakan . .

kode javascript