Làm cách nào để tôi chọn biểu mẫu gốc dựa trên nút gửi nào được nhấp?


124

Tôi có một trang web với 3 hình thức trên đó. Không được lồng nhau, chỉ một cái khác (chúng gần như giống hệt nhau, chỉ là một biến ẩn khác nhau). Một người dùng sẽ chỉ điền vào một biểu mẫu và tôi muốn xác thực / vv tất cả các biểu mẫu chỉ với một tập lệnh JS.

Vậy làm thế nào, khi người dùng nhấp vào nút gửi của mẫu số 1, tôi có làm cho tập lệnh js của mình chỉ xử lý các trường trong mẫu 1 không? Tôi tập hợp nó có liên quan đến $ (this) .parents, nhưng tôi không chắc phải làm gì với nó.

Tập lệnh xác thực của tôi (mà tôi đã sử dụng ở nơi khác, chỉ với một hình thức duy nhất) trông giống như vậy:


$(document).ready(function(){
    $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;

        var nameVal = $("#name").val();
        if(nameVal == '') {
            $("#name").after('Please enter your name.');
            hasError = true;
        }


        if(hasError == false) {blah blah do all the processing stuff}

Vì vậy, tôi có cần thay thế những thứ như $ ("# name"). Val () bằng $ (this) .parents ('form'). Name.val () không? Hoặc có một cách tốt hơn để đi về điều này?

Cảm ơn!

Câu trả lời:


190

Bạn có thể chọn hình thức như thế này:

$("#submit").click(function(){
    var form = $(this).parents('form:first');
    ...
});

Tuy nhiên, nói chung, tốt hơn là đính kèm sự kiện vào chính sự kiện gửi biểu mẫu, vì nó sẽ kích hoạt ngay cả khi gửi bằng cách nhấn phím enter từ một trong các trường:

$('form#myform1').submit(function(e){
     e.preventDefault(); //Prevent the normal submission action
     var form = this;
     // ... Handle form submission
});

Để chọn các trường bên trong biểu mẫu, sử dụng bối cảnh biểu mẫu. Ví dụ:

$("input[name='somename']",form).val();

Bạn cũng có thể sử dụng để chọn tất cả các con đầu vào: $ (this) .children (). Filter ("input")
Pim Jager

hoặc $ ("đầu vào, textarea, chọn", biểu mẫu)
Eran Galperin

1
Tại sao bạn không thể sử dụng var form = $(this).formnhư trong Javascript thông thường: function onClick(button) { var form = button.form; } ???
Chloe

65

Tôi tìm thấy câu trả lời này khi tìm kiếm làm thế nào để tìm thấy hình thức của một yếu tố đầu vào. Tôi muốn thêm một ghi chú vì bây giờ có một cách tốt hơn so với sử dụng:

var form = $(this).parents('form:first');

Tôi không chắc chắn khi nó được thêm vào jQuery nhưng phương thức () gần nhất thực hiện chính xác những gì cần thiết hơn là sử dụng cha mẹ (). Với mã gần nhất có thể được thay đổi thành này:

var form = $(this).closest('form');

Nó đi qua và tìm thấy phần tử đầu tiên phù hợp với những gì bạn đang tìm kiếm và dừng lại ở đó, vì vậy không cần phải chỉ định: đầu tiên.


47

Để có được hình thức gửi bên trong tại sao không chỉ

this.form

Con đường dễ nhất và nhanh nhất đến kết quả.


3
Tại sao cần cho trình bao bọc jquery!
redsapes

3
Bởi vì điều này đã được hỏi như một câu hỏi jQuery quá. Và vì câu trả lời được chấp nhận cũng trả về một đối tượng jQuery, mặc dù nó sẽ rất hay. Bỏ tất cả "tại sao làm điều đó với jQuery khi bạn có thể làm điều đó mà không theo cùng một cách".
cúm

4

tôi đã sử dụng phương pháp sau đây và nó hoạt động tốt với tôi

$('#mybutton').click(function(){
        clearForm($('#mybutton').closest("form"));
    });

$('#mybutton').closest("form") đã lừa tôi


3

Eileen: Không, không phải vậy var nameVal = form.inputname.val();. Nó nên là ...

trong jQuery:

// you can use IDs (easier)

var nameVal =  $(form).find('#id').val();

// or use the [name=Fieldname] to search for the field

var nameVal =  $(form).find('[name=Fieldname]').val();

Hoặc trong JavaScript:

var nameVal = this.form.FieldName.value;

Hoặc kết hợp:

var nameVal = $(this.form.FieldName).val();

Với jQuery, bạn thậm chí có thể lặp qua tất cả các đầu vào trong biểu mẫu:

$(form).find('input, select, textarea').each(function(){

  var name = this.name;
  // OR
  var name = $(this).attr('name');

  var value = this.value;
  // OR
  var value = $(this).val();
  ....
  });
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.