Bạn đang xem : hành động biểu mẫu html javascript
Trong biểu mẫu HTML, thuộc tính action được sử dụng để chỉ ra nơi dữ liệu của biểu mẫu được gửi đến khi nó được gửi. Giá trị của giá trị này có thể được đặt khi biểu mẫu được tạo, nhưng đôi khi bạn có thể muốn đặt nó động. Trong hướng dẫn này, chúng ta sẽ xem xét các cách mà thuộc tính action của biểu mẫu có thể được đặt động bằng JavaScript.
Để bắt đầu, hãy tạo một tệp HTML và dán biểu mẫu sau vào nội dung của nó.
& lt; biểu mẫu
gửi lại
=
"return setAction (this)" < / p> & gt;
& lt;
div
& gt;
& lt; nhãn
& gt; Tên: & lt; / nhãn
& gt;
& lt; đầu vào
id
=
"tên"
tên
=
"tên"
loại
=
"văn bản"
& gt;
& lt; / div
& gt;
& lt; div
& gt;
& lt; nhãn
& gt; Email: & lt; / nhãn
& gt;
& lt; đầu vào
id
=
"email"
tên
=
"email"
nhập
=
"email"
& gt;
& lt; / div
& gt;
& lt; div
& gt;
& lt; đầu vào
id
=
"gửi"
loại
=
"gửi"
& gt;
& lt; / div
& gt;
& lt; / biểu mẫu
& gt;
Đánh dấu trên dành cho một biểu mẫu đơn giản với hai trường và một nút gửi. Chúng tôi đã đặt một trình nghe onsubmit sẽ được gọi khi biểu mẫu được gửi. Đến lượt nó, điều này sẽ thực hiện một cuộc gọi đến hàm setAction () mà chúng ta sẽ sớm xác định. Trong lệnh gọi hàm, biểu mẫu chuyển một tham chiếu đến chính nó ( this ).
Thêm kiểu CSS sau:
biểu mẫu
nhãn
{
hiển thị
: nội tuyến
-
khối
;
chiều rộng
: 100
px
;
}
biểu mẫu
div
{
margin-bottom
: 10
px
;
}
Thêm JavaScript sau vào tệp.
hàm
setAction (biểu mẫu) {
form.action =
"register.html"
;
cảnh báo (form.action);
trả về
sai
;
}
Ở trên, chúng tôi gán tham chiếu biểu mẫu đã chuyển vào biến form . Sau đó, chúng tôi đặt thuộc tính action của nó với form.action = "register.html" . Điều này sẽ dẫn đến hành động của biểu mẫu được đặt thành BASE_URL / register.html . BASE_URL sẽ là URL mà tệp HTML đang chạy. Để kiểm tra xem hành động đã được thiết lập hay chưa, chúng tôi hiển thị giá trị của nó trong một hộp cảnh báo. Sau đó, hàm trả về false để ngăn không cho biểu mẫu được gửi. Điều này được bao gồm trong mã demo vì trang /register.html không tồn tại, nhưng trong một ứng dụng thực, bạn sẽ muốn gửi biểu mẫu.
Tiếp theo, chúng ta sẽ xem xét một ví dụ khác trong đó hành động biểu mẫu sẽ được đặt tùy thuộc vào nút được sử dụng để gửi biểu mẫu.
Bạn có thể thêm phần sau vào tệp HTML.
& lt; biểu mẫu
tên
=
"user_form"
& gt ;
& lt; div
& gt;
& lt; nhãn
& gt; Email: & lt; / nhãn
& gt;
& lt; đầu vào
id
=
"user_email"
tên
=
"user_email"
loại
=
"email"
& gt;
& lt; / div
& gt;
& lt; div
& gt;
& lt; nhãn
& gt; Mật khẩu: & lt; / nhãn
& gt;
& lt; đầu vào
id
=
"user_password"
tên
=
"user_password"
type
=
"password"
& gt;
& lt; / div
& gt;
& lt; div
& gt;
& lt; đầu vào
id
=
"đăng nhập"
nhập
=
"submit"
giá trị
=
"Đăng nhập"
onclick
=
"return loginUser ()"
& gt;
& lt; / div
& gt;
& lt; div
& gt;
& lt; đầu vào
id
=
"đăng ký"
nhập
=
"submit"
giá trị
=
"Đăng ký"
onclick
=
"return registerUser ()"
& gt;
& lt; / div
& gt;
& lt; / biểu mẫu
& gt;
Biểu mẫu trên có hai nút đã được thiết lập với trình nghe onclick . Mỗi người nghe gọi một nút khác nhau khi được nhấp vào.
Thêm JavaScript sau vào tệp.
hàm
loginUser () {
tài liệu
.user_form.action =
"login.html"
;
alert ( tài liệu
.user_form.action);
trả về
sai
;
}
function
registerUser () {
tài liệu
.user_form.action =
"register.html"
;
alert ( tài liệu
.user_form.action);
trả về
sai
;
}
loginUser () được gọi khi nhấp vào nút Đăng nhập. Hàm đặt /login.html dưới dạng giá trị của thuộc tính action của biểu mẫu. Trong ví dụ này, chúng tôi nhận được một tham chiếu đến biểu mẫu với document.user_form . Để điều này hoạt động, thuộc tính name của biểu mẫu phải được đặt thành user_form . Sau khi đặt thuộc tính action, chúng tôi sẽ cảnh báo giá trị và trả về false , do đó ngăn việc gửi biểu mẫu.
registerUser được gọi khi nút Đăng ký được nhấp và nó đặt ./register.html làm hành động của biểu mẫu.
Xem đoạn mã hoạt động bên dưới:
Xem thêm
Xem thêm những thông tin liên quan đến chủ đề biểu mẫu hành động html javascript
How to Link Submit Button to Another Page in HTML
- Tác giả: Jay Bamroliya
- Ngày đăng: 2022-02-23
- Đánh giá: 4 ⭐ ( 6983 lượt đánh giá )
- Khớp với kết quả tìm kiếm: How to Link Submit Button to Another Page in HTML
If you are querying about, How to Link Submit Button to Another Page in HTML. Then you have got the Right Tutorial.
Because In this Tutorial, we are performing some methods to Link Submit button with another page.
How to Link Submit Button to Another Page using Forms in HTML
Link Submit button to Another page using forms Tags in HTML In HTML’s Form tag we can Link submit Button to a different page using HTML Form’s Action Attribute.
Where we have to Declare/Write the Submit button Between HTML Form Tags and we have to assign our File Path inside HTML form’s action attribute.
Later when the user clicks the Form Button, It will redirect that user to another page.How to Link Submit Button to Another Page in HTML
Link Submit button using Anchor Tags in HTML
Linking Submit buttons using Anchor Tag is Easy and Reliable method in HTML. We need to Write/Declare Submit button between Anchor tag’s Starting and Closing tags.
By using Anchor tag’s href attribute we can give a Path where we want to Link our Submit Button.Link Submit button to Another page using JavaScript **
If you don’t need to use Form tag or Anchor tags to Link Submit button to a different page in HTML then we can use JavaScript for such cases. In JavaScript, we design a Function which will manage all the Data like Page Path where we want to connect our Submit Button. The function name, By using that Function name we can call that function within HTML onClick attribute. Which we call the assigned function, and we can redirect our users from one page to another by clicking on the Submit Button.FAQs about: How to Link Submit Button in HTML
how to link submit button to another page in php
The Process of linking Submit button to another page in PHP is very Similar to HTML.
Because we can use HTML Elements inside PHP Document and Submit buttons are usually created using HTML Tags.
So using HTML Anchor tags or HTML Form Tags we can link submit button to another page in PHP.submit button redirect to another page HTML
To redirect users to another page using Submit button we can use HTML’s Ancher tag or Form tags for that.
In Anchor tags and Form Tags, we need to Write/Declare our Submit button between Anchor tags or Form Tags.
Which will make our Submit button Clickable. And by using Anchor and Form tag’s href attribute we can Specify the Path where we want our users to redirect after clicking the Submit Button.
Redirect using HTML Form TagsRedirect using HTML Anchor Tags
how to make a button or a page link to another page in HTML using the button
Just write/Declare your HTML Button inside HTML Anchor tags. Anchor tags will make our HTML Buttons Clickable and after that, you can use Anchor tag’s href attribute to give the Path to your Button.how to handle multiple submit buttons in HTML forms
In HTML Forms all the Buttons inside Form Tags will work like a Submit button. Which will redirect users to the same page (Which we have declared inside HTML form’s action attribute) If you want to Handle multiple Submit buttons then you can use Multiple Form tags with multiple Page Path. or you can use Anchor tags instead of Form tags to redirect Users using multiple submit buttons in HTML link submit button to another page using JavaScriptJavaScript windows.location allows us to redirect our users to another page on a single click. We just need to add a Click event inside our JavaScript. Which will run when user Invoke the Click Event by clicking the Submit button.
submit button with link in html
To add an submit button with link in HTML, we need to use HTML’s Anchor tags. Which allow us to Add links or making HTML Elements Clickable / Linked with another Page.
To add links to am HTML Submit Button, Write that Submit button between Anchor tag’s Starting and Closing tags.
and using Anchot Tag’s href Attribute, we can write our HTML File’s Path (Where we want to link our HTML Submit Button).or you can use JQuery Ajax which can redirct you to another page after Form Data Submission. Click Here to Download JQuery Library. Visit Programminghead.com for more.
linksubmitbuttontoanotherpage html submitbutton button india onepagelinktoanotherpagebutton
Làm cách nào để đặt hành động biểu mẫu thông qua JavaScript?
- Tác giả: vi.panaindustrial.com
- Đánh giá: 4 ⭐ ( 9896 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Tôi có một biểu mẫu HTML có hành động sẽ được đặt động thông qua JavaScript. Tôi phải làm nó như thế nào? Đây là những gì tôi đang cố gắng đạt được: