Hướng dẫn html form submit button call javascript function - html biểu mẫu gửi nút gọi hàm javascript

Trong bit mã này:

getRadioButtonValue(this["whichThing"]))

Bạn không thực sự nhận được một tham chiếu đến bất cứ điều gì. Do đó, RadioButton của bạn trong chức năng GetRadiobuttonValue không xác định và ném lỗi.

Chỉnh sửa để lấy giá trị ra khỏi các nút radio, lấy thư viện jQuery và sau đó sử dụng điều này: To get the value out of the radio buttons, grab the JQuery library, and then use this:

  $('input[name=whichThing]:checked').val() 

Chỉnh sửa 2 Do mong muốn phát minh lại bánh xe, đây là mã không phải là JQuery: Due to the desire to reinvent the wheel, here's non-Jquery code:

var t = '';
for (i=0; i

Hoặc, về cơ bản, sửa đổi dòng mã gốc để đọc như vậy:

getRadioButtonValue(document.myform.whichThing))

Chỉnh sửa 3 Đây là bài tập về nhà của bạn: Here's your homework:

      function handleClick() {
        alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
        //event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
    
  

Which of the following do you like best?

Slithy toves

Borogoves

Mome raths

Lưu ý những điều sau đây, tôi đã chuyển cuộc gọi chức năng sang sự kiện "onsubmit" của biểu mẫu. Một giải pháp thay thế sẽ là thay đổi nút gửi của bạn thành một nút tiêu chuẩn và đặt nó vào sự kiện Onclick cho nút. Tôi cũng đã loại bỏ "JavaScript" không cần thiết trước tên hàm và thêm một lợi nhuận rõ ràng về giá trị phát ra từ hàm.

Trong chính chức năng, tôi đã sửa đổi cách thức truy cập biểu mẫu. Cấu trúc là: tài liệu. [Tên biểu mẫu]. [Tên điều khiển] để có được mọi thứ. Vì bạn đã đổi tên từ AYE, bạn phải thay đổi tài liệu.myform. để tài liệu.aye. Ngoài ra, tài liệu.aye ["thứ gì"] chỉ sai trong bối cảnh này, vì nó cần phải là document.aye.whichthing.document.[THE FORM NAME].[THE CONTROL NAME] to get at things. Since you renamed your from aye, you had to change the document.myform. to document.aye. Additionally, the document.aye["whichThing"] is just wrong in this context, as it needed to be document.aye.whichThing.

Bit cuối cùng, tôi đã nhận xét sự kiện.PreventDefault () ;. Dòng đó không cần thiết cho mẫu này.event.preventDefault();. that line was not needed for this sample.

Chỉnh sửa 4 chỉ để rõ ràng. Document.aye ["Whatthing"] sẽ cung cấp cho bạn quyền truy cập trực tiếp vào giá trị đã chọn, nhưng Document.aye.Whichthing giúp bạn truy cập vào bộ sưu tập các nút radio mà sau đó bạn cần kiểm tra. Vì bạn đang sử dụng hàm "GetRadiObuttonValue (đối tượng)" để lặp lại thông qua bộ sưu tập, bạn cần sử dụng document.aye.whichthing. Just to be clear. document.aye["whichThing"] will provide you direct access to the selected value, but document.aye.whichThing gets you access to the collection of radio buttons which you then need to check. Since you're using the "getRadioButtonValue(object)" function to iterate through the collection, you need to use document.aye.whichThing.

Xem sự khác biệt trong phương pháp này:

function handleClick() {
   alert("Direct Access: " + document.aye["whichThing"]);
   alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
   return false; // prevent further bubbling of event
}

Hướng dẫn html form submit button call javascript function - html biểu mẫu gửi nút gọi hàm javascript
Ảnh từ Unplash

Bạn có thể gọi và chạy chức năng JavaScript từ HTML theo nhiều cách.

  • Gọi chức năng JavaScript trên tải trang HTML
  • Gọi chức năng JavaScript từ nút HTML Nhấp vào sự kiện
  • Gọi chức năng JavaScript từ biểu mẫu HTML Gửi sự kiện
  • Sự kết luận

Hướng dẫn này sẽ giúp bạn tìm hiểu ba phương pháp được đề cập ở trên.

Gọi chức năng JavaScript trên tải trang HTML

Gọi chức năng JavaScript từ nút HTML Nhấp vào sự kiện

Gọi chức năng JavaScript từ biểu mẫu HTML Gửi sự kiện

<body>
  <h2>Call JavaScript function from HTMLh2>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
  script>
body>

Sự kết luận

Hướng dẫn này sẽ giúp bạn tìm hiểu ba phương pháp được đề cập ở trên.

window.addEventListener('load', event => {
  test();
});

Bạn có thể gọi và chạy chức năng JavaScript ngay sau khi trang HTML của bạn được tải bằng cách nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6.

window.onload = event => {
  test();
};

Đầu tiên, bạn cần tạo chức năng mà bạn muốn chạy từ trang HTML của mình. Hãy để tạo ra một hàm

  $('input[name=whichThing]:checked').val() 
7 sẽ gọi phương thức
  $('input[name=whichThing]:checked').val() 
8 như sau:

<body>
  <h2>Call JavaScript function from HTMLh2>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
    window.addEventListener('load', event => {
      test();
    });
  script>
body>

Sau đó, bạn cần thêm mã JavaScript sẽ nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6 từ đối tượng
var t = '';
for (i=0; i
0.

Khi sự kiện

  $('input[name=whichThing]:checked').val() 
6 được kích hoạt, hãy gọi hàm
  $('input[name=whichThing]:checked').val() 
7 như được hiển thị bên dưới:

Gọi chức năng JavaScript từ nút HTML Nhấp vào sự kiện

Gọi chức năng JavaScript từ biểu mẫu HTML Gửi sự kiện

Sự kết luận

Hướng dẫn này sẽ giúp bạn tìm hiểu ba phương pháp được đề cập ở trên.

  $('input[name=whichThing]:checked').val() 
0

Bạn có thể gọi và chạy chức năng JavaScript ngay sau khi trang HTML của bạn được tải bằng cách nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6.

  $('input[name=whichThing]:checked').val() 
1

Đầu tiên, bạn cần tạo chức năng mà bạn muốn chạy từ trang HTML của mình. Hãy để tạo ra một hàm

  $('input[name=whichThing]:checked').val() 
7 sẽ gọi phương thức
  $('input[name=whichThing]:checked').val() 
8 như sau:

  $('input[name=whichThing]:checked').val() 
2

Sau đó, bạn cần thêm mã JavaScript sẽ nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6 từ đối tượng
var t = '';
for (i=0; i
0.

Khi sự kiện

  $('input[name=whichThing]:checked').val() 
6 được kích hoạt, hãy gọi hàm
  $('input[name=whichThing]:checked').val() 
7 như được hiển thị bên dưới:

Ngoài ra, bạn có thể sử dụng trình xử lý sự kiện

var t = '';
for (i=0; i
3 như sau:

Thêm mã ở trên ngay bên dưới định nghĩa chức năng

  $('input[name=whichThing]:checked').val() 
7 và bạn có thể tốt để đi:

Gọi chức năng JavaScript từ biểu mẫu HTML Gửi sự kiện

Sự kết luận

Hướng dẫn này sẽ giúp bạn tìm hiểu ba phương pháp được đề cập ở trên.

  $('input[name=whichThing]:checked').val() 
4

Bạn có thể gọi và chạy chức năng JavaScript ngay sau khi trang HTML của bạn được tải bằng cách nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6.

Sự kết luận

Hướng dẫn này sẽ giúp bạn tìm hiểu ba phương pháp được đề cập ở trên.

Bạn có thể gọi và chạy chức năng JavaScript ngay sau khi trang HTML của bạn được tải bằng cách nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6.

Đầu tiên, bạn cần tạo chức năng mà bạn muốn chạy từ trang HTML của mình. Hãy để tạo ra một hàm

  $('input[name=whichThing]:checked').val() 
7 sẽ gọi phương thức
  $('input[name=whichThing]:checked').val() 
8 như sau:

  $('input[name=whichThing]:checked').val() 
5

Sau đó, bạn cần thêm mã JavaScript sẽ nghe sự kiện

  $('input[name=whichThing]:checked').val() 
6 từ đối tượng
var t = '';
for (i=0; i
0.

Làm thế nào để bạn gọi chức năng JS trên nút gửi?

Để gọi và chạy chức năng JavaScript từ sự kiện gửi biểu mẫu HTML, bạn cần gán chức năng mà bạn muốn chạy đến thuộc tính sự kiện OnSubmit. Bằng cách gán hàm test () cho thuộc tính onsubmit, hàm test () sẽ được gọi mỗi khi biểu mẫu được gửi.assign the function that you want to run to the onsubmit event attribute. By assigning the test() function to the onsubmit attribute, the test() function will be called every time the form is submitted.

Làm thế nào để bạn gọi một hàm ở dạng html?

Trong phương thức này, chúng tôi sẽ tạo và xác định một hàm trong phần đầu của tài liệu HTML.Để gọi chức năng này trong tài liệu HTML, chúng tôi phải tạo một nút đơn giản và sử dụng thuộc tính sự kiện Onclick (là trình xử lý sự kiện) cùng với nó, chúng tôi có thể gọi chức năng bằng cách nhấp vào nút.create a simple button and using the onclick event attribute (which is an event handler) along with it, we can call the function by clicking on the button.

Làm thế nào để bạn gọi một hàm bên trong một biểu mẫu?

Vì vậy, chúng ta có thể gọi chức năng của JavaScript theo tên của nó trong thẻ đầu vào của thẻ biểu mẫu ...
.
.
.

Tôi có thể sử dụng JavaScript để gửi biểu mẫu không?

Việc gửi biểu mẫu JavaScript có thể được sử dụng để tạo đối tượng và các thuộc tính khác nhau cũng có thể được sử dụng.Các thuộc tính có thể là lớp, id, thẻ, v.v. Gọi bởi các thuộc tính khá đơn giản, chúng ta chỉ cần đặt các ký hiệu đúng cách.. The attributes can be class, id, tag, etc. Calling by attributes is quite simple, we just need to place the symbols properly.