Kiểm tra kết quả Ajax trả về khi click button, để submit form đó

#1

Em chào anh chị,
Em có 1 câu hỏi là thế này:
Em có 1 form và 1 button để submit form đó.
Khi em nhấn vào button này thì em sẽ gửi 1 ajax về server để lấy về 1 kết quả.(giả thiết kết quả từ server trả về sẽ là true hoặc false.
=>Với kết quả trả về này: nếu là true em sẽ submit form trên 1 cách bình thường. Nhưng nếu kết quả là false thì em sẽ hiển thị ra 1 message lỗi, và ko submit form đó nữa.
Code minh họa:

$("#btnSubmit").click(function (e) {
e.preventDefault(); // ngăn không submit form luôn.
callAjax(); // gọi ajax lấy kết quả trả về. từ đó là đưa ra quyết có submit form đó hay hiển thị lỗi.
}

function callAjax(){
        $.ajax({
                type : "GET",
                contentType : "application/json",
                url : "",
                data : {
                },
                dataType : 'json',
                timeout : 100000,
                success : function(result) {
                    if(result.condition == "true"){
                     // submit form bình thường.
                    }
                    else{
                    // đơn giản là không submit form nữa. 
                     }
                }
}

Vấn đề của em đang là bằng cách nào mình có thể submit form trên dựa trên kết quả của Ajax ạ?
Em đang thấy việc submit form của em khi click vào button submit, nó đang không phụ thuộc vào kết quả của giữ liệu Ajax mà mình trả về. ( cái này có thể liên quan đến dữ liệu bất đồng bộ của Ajax nhưng em chưa biết giải quyết bằng cách nào???)
Em xin cảm ơn

#2

Anh đang quẩy trận liên minh nên viết tạm cái này, nếu em chưa hiểu anh quay lại nói sau nhé.
Cấu trúc của ajax

 $.ajax
        (
            {
                url:
                data:
                type:
                cache:
                success:function(data){
                      if(data.status == true){  //status là data trả về từ server
                          /// submit form ....
                      }else // message
                }, 
                error:function(){}
            }
        );
#3

bạn có thể tham khảo

`var condition = true; //check whatever you like
if(condition)
    $('input[type=submit]', this).attr('disabled', 'disabled');
    $('form').bind('submit',function(e){e.preventDefault();});
}else{
    $('input[type=submit]', this).removeAttr('disabled', 'disabled');
    $('form').unbind('submit');
}`
#4

Em hiểu cái này. Nhưng em đang ko biết là mình dùng cách nào để submit cái form trên ạ?
khi trước đó em đã: e.preventDefault(); để ngăn không cho form submit luôn rồi ạ.
Em thử:

$("#btnSubmit).trigger('submit');

mà không được ạ. :frowning:

#5

Cái này mình thử mà cũng ko được bạn à. Mình đã thử nhiều cách mà đang thấy là việc submit form hiện tại của mình khi click vào button submit, nó đang không hề phụ thuộc vào hành động ở trong hàm ajax.

#6

mặc định bạn cho cái button submit là disabled sau đó khi hàm ajax trả về kết quả, bạn kiểm tra nếu là true thì xóa cái attr disabled của button submit đi, thì lúc này sẽ submit bình thường, ngược lại bạn hiển thị ra thông báo lỗi trên form, không biết ý bạn phải như thế này không nhỉ?

#7

Nếu với ý này thì đơn giản thì disable và enable button submit là được.
Nhưng mong muốn của mình là chỉ khi click vào button thì mới gọi ajax check điều kiện rồi từ đó mới quyết định là có submit form đó hay là không (cái này hình như vướng vấn đề bất đồng bộ trong ajax- nhưng mình chưa biết xử lý thế nào??)

#8

Bạn có thể lồng thêm 1 cái ajax vào trong 1 ajax mà. Cụ thể là cho vào phần success của ajax đầu tiên.

function callAjax(){
        $.ajax({
                type : "GET",
                contentType : "application/json",
                url : "",
                data : {
                },
                dataType : 'json',
                timeout : 100000,
                success : function(result) {
                    if(result.condition == "true"){
                     // submit form bình thường.
                    // Gọi ajax để submit form
                    }
                    else{
                    // đơn giản là không submit form nữa. 
                     }
                }
}

Về tổng thể thì thời gian submit form sẽ lâu hơn chút do phải chạy 2 cái ajax

#9

Cái này cũng đơn giản mà, mình có một cách xử lý như sau, bạn cho cái input có type là button, bắt sự kiện click vào nút đó thì gọi hàm ajax, khi sever trả về thì so sánh, nếu true thì cho form.submit() ngược lại thì view lỗi

#10

Vấn đề của em có thể được xử lý bằng cách 4 (self.submit()). Nhưng trước đó anh gợi ý 1 vài cách giải quyết khác.
Có thể thử 1 vài cách sau.
Cách 1. Chia việc validata và submit form thành 2 ajax. 1 cái submit, 1 cái validate. Nút submit ban đầu để validate data. Nếu data chuẩn. Hiện 1 cái dialog có button OK hay gì đó để người dùng chọn có submit hay không.

   function validateOnClick(){
          ajax...
               success(data){
                    if(data.status == true){
                     // hiển thị dialog có ok và cancel để submit 
                   }
              }   
   }

   function okSubmitOnClick(){
        //submit
   }

Cách 2. Validate data bằng js rồi mới submit
Cách 3. Em vẫn submit bình thường, với data đúng thì làm tiếp, còn không gửi message về báo
Không biết em dùng framework gì nhưng kiểu như thế này

   @POST
   @Path(value="add")
   public Response addUsser(... data){
         validateDate(data);
         //thực hiện tiếp nếu data đúng
   }
  
   private JSONObject validateData(data){
        if(data...){
            /// return message ...
        }else if(data  ...){
           /// return message ...
        }
        return null;
   }

Cách 4: Cuối cùng nếu các cách trên không thích hợp em thử cái này xem.

$("form").submit(function(e) {
    e.preventDefault();

    var self = this,
    $.ajax({
        type: ,
        url: "abcdeghg",
        data: ,
        cache: 
    }).done(function(result) {
        if (result == true) self.submit();
    }).fail(function() {
        alert('error');
    });
});
1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?