Cara menampilkan data form di halaman html lain menggunakan javascript

Question

Ringkasan. dalam tutorial ini, Anda akan belajar tentang JavaScript form API. mengakses formulir, mendapatkan nilai elemen, memvalidasi data formulir, dan mengirimkan formulir

Table of Contents Show

Bentuk dasar
Formulir referensi
Mengirimkan formulir
Mengakses bidang formulir
Gabungkan semuanya. formulir pendaftaran
Fungsi showMessage()
Fungsi showError() dan showSuccess()
Fungsi hasValue()
Fungsi ValidasiEmail()
Bagaimana cara mengirim data formulir ke halaman lain di JavaScript?
Bagaimana cara mendapatkan data dari satu halaman HTML ke halaman lainnya menggunakan JavaScript?
Bagaimana cara menampilkan data formulir di halaman lain?
Bagaimana cara menampilkan konten dari satu halaman HTML di halaman lain?

Bentuk dasar

Untuk membuat formulir dalam HTML, Anda menggunakan elemen

document.forms
Code language: JavaScript (javascript)

9

<form action="/signup" method="post" id="signup"> 
</form>
Code language: HTML, XML (xml)

_

Elemen ________0______9 memiliki dua atribut penting.

document.forms[0]
Code language: CSS (css)

1 dan

document.forms[0]
Code language: CSS (css)

2

Atribut
```
document.forms[0]
Code language: CSS (css)
```
_1 menentukan URL yang akan memproses pengiriman formulir. Dalam contoh ini, tindakannya adalah
```
document.forms[0]
Code language: CSS (css)
```
4 URL

Atribut

document.forms[0]
Code language: CSS (css)

_2 menentukan metode HTTP untuk mengirimkan formulir. Biasanya, metodenya adalah

document.forms[0]
Code language: CSS (css)

_6 atau

document.forms[0]
Code language: CSS (css)

7

Umumnya, Anda menggunakan metode

document.forms[0]
Code language: CSS (css)

_7 saat ingin mengambil data dari server dan metode

document.forms[0]
Code language: CSS (css)

6 saat ingin mengubah data di server

JavaScript menggunakan objek

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

_0 untuk mewakili formulir.

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

_0 memiliki properti berikut yang sesuai dengan atribut HTML

document.forms[0]
Code language: CSS (css)

1 – adalah URL yang memproses data formulir. Ini setara dengan atribut

document.forms[0]
Code language: CSS (css)

_1 dari elemen

document.forms
Code language: JavaScript (javascript)

9

document.forms[0]
Code language: CSS (css)

2 – adalah metode HTTP yang setara dengan atribut

document.forms[0]
Code language: CSS (css)

2 dari elemen

document.forms
Code language: JavaScript (javascript)

9

Elemen

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

_0 juga menyediakan metode berguna berikut ini

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

9 – mengirimkan formulir

<button type="submit">Subscribe</button>



Code language: HTML, XML (xml)

_0 – setel ulang formulir

Formulir referensi

Untuk mereferensikan elemen

document.forms
Code language: JavaScript (javascript)

_9, Anda dapat menggunakan metode pemilihan DOM seperti

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

2

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

Sebuah dokumen HTML dapat memiliki beberapa bentuk. Properti

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

_3 mengembalikan kumpulan formulir (

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

4) pada dokumen

document.forms
Code language: JavaScript (javascript)

Untuk referensi formulir, Anda menggunakan index. Misalnya, pernyataan berikut mengembalikan bentuk pertama dari dokumen HTML

document.forms[0]
Code language: CSS (css)

Mengirimkan formulir

Biasanya, formulir memiliki tombol kirim. Saat Anda mengkliknya, browser mengirimkan data formulir ke server. Untuk membuat tombol kirim, Anda menggunakan elemen

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

_5 atau

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

6 dengan tipe

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

7

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

Atau

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

Jika tombol kirim memiliki fokus dan Anda menekan tombol

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

8, browser juga mengirimkan data formulir

Saat Anda mengirimkan formulir, peristiwa

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

7 dipicu sebelum permintaan dikirim ke server. Ini memberi Anda kesempatan untuk memvalidasi data formulir. Jika data formulir tidak valid, Anda dapat berhenti mengirimkan formulir

Untuk melampirkan pendengar acara ke acara

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

7, Anda menggunakan metode

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

1 dari elemen formulir sebagai berikut

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

Untuk menghentikan pengiriman formulir, Anda memanggil metode

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

2 dari objek

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

3 di dalam event handler

<button type="submit">Subscribe</button>



Code language: HTML, XML (xml)

7 seperti ini

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

Biasanya, Anda memanggil metode

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

_5 jika data formulir tidak valid. Untuk mengirimkan formulir dalam JavaScript, Anda memanggil metode

<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)

9 dari objek formulir

form.submit();
Code language: CSS (css)

Perhatikan bahwa

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

_7 tidak memicu peristiwa

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

7. Oleh karena itu, Anda harus selalu memvalidasi formulir sebelum memanggil metode ini

Mengakses bidang formulir

Untuk mengakses bidang formulir, Anda dapat menggunakan metode DOM seperti

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});
Code language: JavaScript (javascript)

9,

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

2,

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

1, dll

Selain itu, Anda dapat menggunakan properti

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

_2 dari objek

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

3. Properti

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

_4 menyimpan kumpulan elemen form

JavaScript memungkinkan Anda mengakses elemen berdasarkan indeks, id, atau nama. Misalkan Anda memiliki formulir pendaftaran berikut dengan dua

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

5 elemen

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

Untuk mengakses elemen formulir, Anda mendapatkan elemen formulir terlebih dahulu

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_0

Dan gunakan indeks, id, atau nama untuk mengakses elemen. Berikut ini mengakses elemen bentuk pertama

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_1

Berikut ini mengakses elemen input kedua

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_2

Setelah mengakses bidang formulir, Anda dapat menggunakan properti

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

6 untuk mengakses nilainya, misalnya

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_3

Gabungkan semuanya. formulir pendaftaran

Berikut ilustrasi dokumen HTML yang memiliki formulir pendaftaran. Lihat demo langsungnya di sini

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_4

Dokumen HTML mereferensikan file

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

_7 dan

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

8. Ini menggunakan elemen

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

_9 untuk menampilkan pesan kesalahan jika elemen

<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)

5 memiliki data yang tidak valid

Mengirimkan formulir tanpa memberikan informasi apapun akan mengakibatkan kesalahan berikut

Mengirimkan formulir dengan nama tetapi format alamat email tidak valid akan mengakibatkan kesalahan berikut

Berikut ini menunjukkan file

form.submit();
Code language: CSS (css)

_1 lengkap

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_5

Bagaimana itu bekerja

Fungsi showMessage()

Fungsi

form.submit();
Code language: CSS (css)

_2 menerima elemen input, pesan, dan tipe

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_6

Berikut tampilan field input nama pada form

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_7

Jika nilai nama kosong, Anda harus mendapatkan induknya terlebih dahulu yaitu

form.submit();
Code language: CSS (css)

3 dengan "bidang" kelas

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

_8

Selanjutnya, Anda harus memilih elemen

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});
Code language: PHP (php)

_9

const form = document.getElementById('subscribe');



Code language: JavaScript (javascript)

_9

Kemudian, perbarui pesan tersebut

document.forms
Code language: JavaScript (javascript)

0

Setelah itu, kami mengubah kelas CSS dari bidang input berdasarkan nilai parameter tipe. Jika tipenya benar, kami mengubah kelas input menjadi sukses. Jika tidak, kami mengubah kelas menjadi kesalahan

document.forms
Code language: JavaScript (javascript)

_1

Terakhir, kembalikan nilai tipe

document.forms
Code language: JavaScript (javascript)

_2

Fungsi showError() dan showSuccess()

Fungsi

form.submit();
Code language: CSS (css)

5 dan

form.submit();
Code language: CSS (css)

6 memanggil fungsi

form.submit();
Code language: CSS (css)

2. Fungsi

form.submit();
Code language: CSS (css)

_5 selalu mengembalikan

form.submit();
Code language: CSS (css)

9 sedangkan fungsi

form.submit();
Code language: CSS (css)

6 selalu mengembalikan

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

1. Selain itu, fungsi

form.submit();
Code language: CSS (css)

_6 menyetel pesan kesalahan ke string kosong

document.forms
Code language: JavaScript (javascript)

_3

Fungsi hasValue()

Fungsi

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

_3 memeriksa apakah elemen input memiliki nilai atau tidak dan menampilkan pesan kesalahan menggunakan fungsi

form.submit();
Code language: CSS (css)

5 atau

form.submit();
Code language: CSS (css)

6 yang sesuai

document.forms
Code language: JavaScript (javascript)

_4

Fungsi ValidasiEmail()

Fungsi

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

6 memvalidasi jika bidang email berisi alamat email yang valid

document.forms
Code language: JavaScript (javascript)

5

Fungsi

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

_6 memanggil fungsi

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

3 untuk memeriksa apakah nilai bidang kosong. Jika kolom input kosong, ini menunjukkan

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

9

Untuk memvalidasi email, itu menggunakan ekspresi reguler. Jika email tidak valid, fungsi ________56______6 menunjukkan

const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)

01

Bagaimana cara mengirim data formulir ke halaman lain di JavaScript?

Untuk mengirim data ke dua server, buat satu tombol sebagai kirim dan yang lainnya sebagai tombol. Pada tombol pertama kirim tindakan di tag formulir Anda seperti biasa, tetapi di tombol lain panggil fungsi JavaScript di sini Anda harus mengirimkan formulir dengan bidang yang sama tetapi ke server yang berbeda lalu tulis tag formulir lain setelah penutupan pertama

Bagaimana cara mendapatkan data dari satu halaman HTML ke halaman lainnya menggunakan JavaScript?

lokasi. href = url; . lokasi. href, params = url. .

Cookie Sesi

Penyimpanan Lokal HTML5

POST variabel di url dan ambil di berikutnya. html melalui objek jendela

Bagaimana cara menampilkan data formulir di halaman lain?

Untuk membuat data formulir HTML dikirim ke halaman lain, kita harus menggunakan tag Formulir HTML . Tag Formulir HTML memungkinkan kami untuk Menampilkan data Formulir dan juga memungkinkan kami mengirimkan data Formulir itu ke halaman lain menggunakan Atribut Tindakan tag Formulir HTML. Kami menggunakan file PHP untuk POST dan Menampilkan Data Formulir HTML kami.