Vô hiệu hóa một nút gửi sau một cú nhấp chuột

Question

Dưới đây là mã của tôi:

<form name='frm' id='frm' action='load.asp' method='post' onSubmit='return OnSubmit(this)' style='margin-top:15px'> 
    <input type='submit' name='send' id='send' onclick="this.disabled=true;return true;" value='Send' title='test'> 
</form> 

Tôi muốn chức năng onsubmit của tôi được thực hiện và tôi muốn trang để được đệ trình. Trong trang web của tôi, không nộp và không có chức năng

Tôi đã cố gắng để lặp lại nó ở đây, nhưng dưới hình thức dường như được đăng tải và chức năng của tôi không bao giờ được thực hiện ... http://jsfiddle.net/V7B3T/1/

Và tôi không biết khi nào tôi nên kích hoạt lại nút.

Tôi có nên làm điều đó trong tài liệu.đã có hoặc trong hàm onSubmit?

Vì vậy, nếu ai đó có thể sửa fiddle :) và sau đó tôi sẽ so sánh nó với mã của tôi. Tôi nghĩ: S Tôi mất

Cảm ơn tất cả

Answer 1

Nếu bạn muốn xác nhận các hình thức hoặc thực hiện bất kỳ thay đổi trước khi nộp và chỉ đăng ký nếu các hình thức có giá trị bạn có thể làm một cái gì đó như thế này:

<form id="frm" action="load.asp" method="post" enctype="multipart/form-data"> 
    <input type="submit" name="send" id="send" value="Send" title="test"> 
</form> 

và mã JavaScript:

$('#frm').bind('submit', function (e) { 
    var button = $('#send'); 

    // Disable the submit button while evaluating if the form should be submitted 
    button.prop('disabled', true); 

    var valid = true;  

    // Do stuff (validations, etc) here and set 
    // "valid" to false if the validation fails 

    if (!valid) { 
     // Prevent form from submitting if validation failed 
     e.preventDefault(); 

     // Reactivate the button if the form was not submitted 
     button.prop('disabled', false); 
    } 
}); 

Đây là số đang hoạt động fiddle.

Answer 2

Nếu bạn không muốn gửi trang này nên làm như lừa:

onclick="this.disabled=true;return false;" 

Answer 3

Tôi chắc chắn sẽ di chuyển mã đó để bên ngoài Các tệp JS (và CSS) mà nó thuộc về, nhưng điều này sẽ hoạt động:

onclick="this.disabled=true;this.parentNode.submit();" 

Vì bạn vô hiệu hóa nút gửi onclick, nó sẽ bị vô hiệu hóa khi hình thức thực tế submissi trên nhấp chuột diễn ra (onclick xảy ra trước đó). Gửi mẫu với JS nên làm các trick mặc dù.

http://jsfiddle.net/V7B3T/4/

Edit: Về lại tạo điều kiện cho các nút, mà sẽ phải xảy ra sau khi chức năng OnSubmit() của bạn đã chạy tôi đoán.

Answer 4

Nếu biểu mẫu của bạn thực sự đăng lại, bạn đang thay đổi trang một cách hiệu quả và do đó sẽ không phải lo lắng về việc bật lại nút của bạn (điều đó sẽ xảy ra khi trang đã tải). Ngoài ra, vì bạn đang sử dụng jQuery, bạn cũng có thể sử dụng nó đúng cách và tách biệt đánh dấu HTML và Javascript bằng cách gắn trình xử lý sự kiện bằng cách sử dụng các hàm jQuery, chứ không phải thuộc tính onclick, onsubmit, v.v.

HTML Cập nhật:

<form name='frm' id='frm' action='http://jsfiddle.net/' enctype='multipart/form-data' method='post' style='margin-top:15px'> 
    <input type='submit' name='send' id='send' value='Send' title='test'> 
</form> 

Cập nhật Javascript:

function submitForm(form) { 
    alert("submitted"); 
} 

$('#send').click(function(e) { 
    this.disabled = true; 
}); 

$('#frm').submit(function(e) { 
    submitForm(this);  
}); 

Working jsFiddle

Bạn sẽ cần phải quấn rằng trong một cuộc gọi $(document).ready(function() {...}); để sử dụng trên một trang thực tế - Tôi rời nó vì jsFiddle thực hiện bất kỳ Javascript onLoad nào được cung cấp.