ajax不能與一個特定的輸入類型工作

Question

我有一個表格插入數據到database.i使用ajax。與特定的按鈕AJAX不工作 我的代碼 下面代碼工作代碼 的index.php

$(document).on('click', '#formsubmit', function(e) { 
 

 
    var data = $("#formjs").serialize(); 
 
    $.ajax({ 
 

 
    data: data, 
 
    dataType: "JSON", 
 
    type: "post", 
 
    url: "datainsert.php", 
 
    success: function(data) { 
 
     if (data.success == "correct") { 
 
     $('#error-msg').hide(); 
 
     $('#success-msg').show(); 
 
     } else { 
 
     $('#success-msg').hide(); 
 
     $('#error-msg').show(); 
 
     } 
 

 
    }, 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" action="#" method="post" id="formjs"> 
 
    <div class="contct_InputRow form-group"> 
 
    <div class="col-sm-5"> 
 
     <label>Your Name</label> 
 
    </div> 
 
    <div class="col-sm-7"> 
 
     <input type="text" name="name" class="form-control spl_frm_font" required/> 
 
    </div> 
 
    </div> 
 
    <div class="contct_InputRow1 form-group"> 
 
    <div class="paty_logo"> 
 
     <a href="#url"><img src="images/logo1.png" alt="" /></a> 
 
    </div> 
 
    <div class="avabl_btn"> 
 
     <input style="background-color: #4CAF50; border: none; color: white; padding: 16px 32px; text-decoration: none; margin: 4px 2px; cursor: pointer;" type="button" name="submit" id="formsubmit" class="button submit" value="Send" /> 
 
     <br> 
 

 
    </div> 
 
    <label for="submit">Send<br>Message</label> 
 
    </div> 
 

 

 
    <div class="contct_InputRow1 form-group"> 
 
    <div class="paty_logo"> 
 
     <a href="#url"><img src="images/logo1.png" alt="" /></a> 
 
    </div> 
 
    <div class="avabl_btn"> 
 
     <input type='submit' name="submit" id='formsubmit' class="button submit" value='Send' /> 
 
     <label for="submit">Send<br>Message</label> 
 
    </div> 
 
    </div>

是有這個按鈕code.am任何問題仍然困惑，爲什麼它不工作

Answer 1

如果您使用真實的提交輸入（type="submit"），則需要在事件中使用preventDefault()，以便不提交表單，而是在事件中執行代碼。

如果您的表單不可提交，您可能需要使用type="button"。

https://api.jquery.com/event.preventdefault/

Answer 2

變化Javascritp喜歡這個

function test(){ 
    var data = $("#formjs").serialize(); $.ajax({ data: data, dataType: "JSON", type: "post", url: "datainsert.php", success: function(data){ if(data.success == "correct"){ $('#error-msg').hide(); $('#success-msg').show(); } else { $('#success-msg').hide(); $('#error-msg').show(); } }, }); } 

** 2.change HTML這樣的**

<div class="contct_InputRow1 form-group"> <div class="paty_logo"><a href="#url"><img src="images/logo1.png" alt=""/></a></div> <div class="avabl_btn"> <button onClick = 'test()'>send msg </button></div> </div>