HTMLフォーム送信がJavaScriptに届かない

Question

フォーム内の送信ボタンを押したときにJavaScriptコードにアクセスしようとしていて、JavaScriptコードがまったくトリガーされていません。私は入力を移入するために使用されるJavaScriptで別の機能を持っている

$('document').ready(function(){ 
$("#updateUserForm").submit(function (event) { 
    console.log("Method entered"); 
    event.preventDefault(); 
    var serialize = $("#updateUserForm").serialize(); 

    $.ajax({ 
     type: "POST", 
     data: serialize, 
     url: "/Dashboard/UpdateUser", 
     datatype: JSON, 
     succes: function (data) { 
      console.log("succes!"); 
      console.log(data); 
     }, 
     error: function (data) { 
      console.log("error"); 
      console.log(data); 
     } 
     }) 
    }) 
}) 

：

<form id="updateUserForm"> 
    <div class="form-group"> 
    <label for="firstName">First name:</label> 
    <input type="text" class="form-control" id="firstnameModalInput" /> 
    </div> 
    <div class="form-group"> 
    <label for="middleName">Middle name:</label> 
    <input type="text" class="form-control" id="middlenameModalInput" /> 
    </div> 
    <div class="form-group"> 
    <label for="lastName">Last name:</label> 
    <input type="text" class="form-control" id="lastnameModalInput" /> 
    </div> 
    <div class="form-group"> 
    <label for="mobileNumber">Mobile number:</label> 
    <input type="text" class="form-control" id="mobilenumberModalInput" /> 
    </div> 
    <div class="form-group"> 
    <label for="email">Email:</label> 
    <input type="text" class="form-control" id="emailModalInput" /> 
    </div> 
    <div class="form-group"> 
    <label for="Enabled">Enabled:</label> 
    <input type="checkbox" class="form-control" id="enabledModalInput" style="width:34px" /> 
    </div> 
    <div class="modal-footer"> 
    <input type="submit" class="btn btn-default" data-dismiss="modal" id="submit" value="Apply" /> 
    </div> 
</form> 

そして、私が持っているJavaScriptコード： は、だから私は、次のコードを使用して、私のブートストラップモーダル以内にこのフォームを得ましたフィールドとそれは正常に動作するので、私はHTMLがjavascriptファイルに達することができると思います。しかし、javascript submit関数には達しません（例えば、console.logを実行しません）。誰かが私が間違っているアイデアを持っていますか？

はEDIT：

私はもう少し周りをプレイしてきた、私がブートストラップモーダルの外側から、それに到達しようとしたとき、私はjavascriptのメソッドをアクセスもできるようです、それは内のどこかうまくいきませんモーダル。

Answer 1

関数のデフォルトの終了を防止する代わりにreturn falseを使用し、on functionを使用して送信関数を変更します。

$('document').ready(function(){ 
    $("#updateUserForm").on("submit", function() { 
     console.log("Method entered"); 
     var serialize = $("#updateUserForm").serialize(); 

     $.ajax({ 
      type: "POST", 
      data: serialize, 
      url: "/Dashboard/UpdateUser", 
      datatype: JSON, 
      succes: function (data) { 
       console.log("succes!"); 
       console.log(data); 
      }, 
      error: function (data) { 
       console.log("error"); 
       console.log(data); 
      } 
     }) 
     return false; 
    }) 
}) 

Answer 2

あなたは、コードの下に試してみてくださいすることができ、この

$("#updateUserForm").on('submit', function (e) { 
     e.preventDefault(); 
    }); 

Answer 3

を試してみてください。投稿URL「/ Dashboard/UpdateUser」が正しいか確認してください。

$("#UpdateUserForm").submit(function (e) 
{ 
    var isValid = $("#UpdateUserForm").valid(); 
    if (!isValid) 
     return; 

    //This is important as it prevents the form being submitted twice 
    e.preventDefault(); 

    $.ajax({ 
     type: "POST", 
     url: "/Dashboard/UpdateUser", 
     data: $("#UpdateUserForm").serialize(), 
     success: function (response) 
     {      
      var status = ''; 
      status = response.Status; 
      console.log("succes!"); 
      console.log(data); 
     } 
    }) 
    .error(function() { 
     console.log("error"); 
     console.log(data); 
    }); 
}); 

Answer 4

$("#updateUserForm").on('submit', function (e) { 
     e.preventDefault(); 
    }); 

またはフォームでのアクションプロパティを使用します。