jqueryをフォームの送信中に使用する

Question

私は本当にこれが新しく、ddlのアラートがポップアップしているところですが、バックグラウンドでフォームがまだ値 " '選択' オプションの

DDL： タイプ

マイスクリプト：

<script type="text/javascript"> 

機能saveCallReport（）{

 var selectedFranchises = ""; 
     var selectedGroups = ""; 
     var selectedContacts = ""; 
     var selectedTopics = ""; 

     var ID = $('#<%=txtID.ClientID %>').val(); 
     if (ID == '') ID = '0'; 

     var Created = $('#<%=txtCreated.ClientID %>').val(); 
     var Confidential = document.getElementById('<%=chkConfidential.ClientID %>').checked; 
     var Description = $('#<%=txtDescription.ClientID %>').val(); 
     var Employee = $('#<%=ddlEmployee.ClientID %>').val(); 
     var Priority = $('#<%=ddlPriority.ClientID %>').val(); 
     var Type = $('#<%=ddlType.ClientID %>').val(); 

     // Get Selected Franchises 
     var LstRight = document.getElementById("<%=lstSelectedFranchises.ClientID %>"); 
     for (i = 0; i < LstRight.length; i++) { 
      selectedFranchises = selectedFranchises + LstRight.options[i].value + ','; 
     } 
     if (selectedFranchises == null) 
      selectedFranchises = ""; 

     // Get Selected Groups 
     LstRight = document.getElementById("<%=lstSelectedGroups.ClientID %>"); 
     for (i = 0; i < LstRight.length; i++) { 
      selectedGroups = selectedGroups + LstRight.options[i].value + ','; 
     } 
     if (selectedGroups == null) 
      selectedGroups = ""; 

     // Get Selected Contacts 
     LstRight = document.getElementById("<%=lstSelectedContacts.ClientID %>"); 
     for (i = 0; i < LstRight.length; i++) { 
      selectedContacts = selectedContacts + LstRight.options[i].value + ','; 
     } 
     if (selectedContacts == null) 
      selectedContacts = ""; 

     // Get Selected Topics 
     LstRight = document.getElementById("<%=lstSelectedTopics.ClientID %>"); 
     for (i = 0; i < LstRight.length; i++) { 
      selectedTopics = selectedTopics + LstRight.options[i].value + ','; 
     } 
     if (selectedTopics == null) 
      selectedTopics = ""; 

     var obj = { 
      id: ID, 
      created: Created, 
      hqemployee: Employee, 
      type: Type, 
      priority: Priority, 
      confidential: Confidential, 
      description: Description, 
      franchises: selectedFranchises, 
      groups: selectedGroups, 
      contacts: selectedContacts, 
      topics: selectedTopics, 
     }; 

     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: '<%= ResolveUrl("~/CallReportDetail.aspx/saveCallReport") %>', 
      data: JSON.stringify(obj), 
      dataType: "json", 
      success: function (result) { 

       $('#txtID').val(result.d); 
       window.location.replace("/CallReports/Details?Id=" + result.d); 

      }, 
      error: function (xhr, ajaxOptions, thrownError) { 

       alert("There was a problem saving the Call Report: " + thrownError); 

      } 
     }); 

     return false; 
    } 

    var submit = 0; 
    function CheckDouble() { 
     if (++submit > 1) { 
      alert('Saving...'); 
      return false; 
     } 
    } 

    $(function formValid() { 
     $("[id*=btnSave]").click(function() { 
      var ddlType = $("[id*=ddlType]"); 
      if (ddlType.val() == "") { 
       alert("Please select a type!"); 
       return false; 
      } 

     }); 
    }); 
</script> 

私は、ボタンを提出：私は間違って行くこともどこ

   <td style="padding-left: 720px;"> 
       <asp:LinkButton ID="btnSave" Type="submit" runat="server" Text="Save" OnClientClick="CheckDouble(); return saveCallReport();" UseSubmitBehavior="false" CssClass="btn btn-primary btn-sm"/> 
      </td> 

誰も教えてもらえますか？私はsubmitHandlerが必要だという考えを持っていましたが、このコードに書く方法を手がかりにしていません。

Answer 1

ここにいくつかの問題があります。

1. OnClientClickとJQuery .click（）イベントを同じボタンに追加しないでください。それはちょうど悪いスタイルで、ちょっと混乱します。
2. JQuery ajaxを使用してデータを送信しているので、LinkBut​​tonは必要ありません。通常のHTMLボタンを使用してください。
3. saveCallReport（）関数は、成功と失敗の結果をすべて処理します。何も返す必要はありません。
4. 検証が失敗した場合でも、CheckDouble（）メソッドはサブミット値をインクリメントします。したがって、ddlから選択した後のボタンを次にクリックすると、Saving ...メッセージが警告されます。あなたはそれが送信している間、無効な属性をボタンに追加/削除するだけです。

とにかく、ここに私が示唆しているものがあります。 HTMLボタン：

<button id="btnSave" class="btn btn-primary btn-sm">Save</button> 

ワイヤーボタンアップ：

$(document).ready(function() { 
    $('#btnSave').click(function() { 

     var ddlType = $("#ddlType"); 
     if (ddlType.val() == "") { 
      alert("Please select a type!"); 
      return false; 
     } 

     $(this).attr("disabled", "disabled"); 
     saveCallReport(); 
     $(this).removeAttr("disabled"); 
    }); 
});