JQueryがフォームにアラートメッセージを表示する

Question

jqueryのアラートメッセージをクライアント側から表示しようとしています。送信ボタンがクリックされるとjqueryが呼び出されます。フォームはサーバー側phpを呼び出します。ここに私のコードです：

FORM

<form action="branch_add_verifier.php" method="POST" id="formAdd"> 
<input type="text" name="id" id="id"> 
<input type="submit" value="submit"> 
</form> 

jQueryの

$(document).ready(function(){ 
     var $form = $('#formAdd'); 
     $form.submit(function(){ 
      var id= $("#id").val(); 
      if (id.length < 12) { 
       alert("INPUT ERROR"); 
       return false; 
      } 

      $.post($form.attr('action'), $(this).serialize(), function(response){ 
       alert("DATA SUCCESSFULLY ADDED"); 
      },'json'); 
      return false; 
     }); 
    }); 

しかし、警告メッセージが$.post方法 内でポップアップ表示されませんそして、私も知りたいどのようにIサーバー側から警告メッセージをポップアップ表示できます。ここに私のサンプルコードです：

サーバ側要約

<?php $query = mysqli_query($conn, "SELECT * FROM table1 
     INNER JOIN table2 
     ON table1.col1= table2.col1 

     WHERE table2.col3= '".$_REQUEST['id']."'"); 

if (mysqli_num_rows($query) != 0) { 
    echo "<script>alert('ERROR')</script>"; 
    return false; 
} ?> 

、作品上記のコードが、私は、クエリが成功したかどう教えてしまうのメッセージを表示する必要があります。おかげ

---

私の新たな問題が以下のコードは、別のページに私を持っていることである：

FORM

<form action="branch_add_verifier.php" method="POST" id="formAdd"> 
<input type="text" name="id" id="id"> 
<input type="submit" value="submit"> 
</form> 

jQueryの

$(document).ready(function(){ 
     $('#formAdd').on('submit', function (e) { 
      e.preventDefault(); 

      var id= $("#id").val(); 
      if (id.length < 12) { 
       alert("INPUT ERROR"); 
       return false; 
      } 

      $.ajax({ 
       context: this, 
       url: $(this).attr('action'), 
       type: 'POST', 
       data: new FormData(this), 
       dataType: 'json' 
      }).done(function (data) { 
       if(data == 'ok') { 
        alert("DATA SUCCESSFULLY ADDED"); 
       } 
       if(data == 'no') { 
        alert("ERROR"); 
       } 
      }).fail(function (data) { 
       console.log('failed'); 
      }); 
     }); 
    }); 

サーバ

$query = mysqli_query($conn, "SELECT * FROM table1 
    INNER JOIN table2 
    ON table1.col1= table2.col1 

    WHERE table2.col3= '".$_REQUEST['id']."'"); 

    if (mysqli_num_rows($query) != 0) { 
    mysqli_close($conn); 
    echo json_encode('no'); 
    return false; 
} 

それ以下の方法がまだあるので、私はjson_encode後に返却する必要があります。

Answer 1

HTMLフォーム

<form action="branch_add_verifier.php" method="POST" id="formAdd"> 
    <input type="text" name="id" id="id"> 
    <input type="submit" value="submit"> 
</form> 

スクリプト：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
    $(function() { 
     $(document).on('submit', "#formAdd", function(e) { 
      e.preventDefault(); 

      $.ajax({ 
       url: $(this).attr('action'), 
       type: "post", 
       data: $(this).serialize(), 
       error:function(){ 
        alert("ERROR : CANNOT CONNECT TO SERVER"); 
       }, 
       success: function(data) { 
        alert(data); 
       } 
      }); 
      return false; 
     }); 
    }); 
</script> 

このようなPHPサーバサイド：

<?php 
$insert = mysqli_query($conn, "insert query here"); 
if($insert) { 
    echo json_encode('ok'); 
} else { 
    echo json_encode('no'); 
} 
?> 

Answer 2

入力タイプのテキストにid="id"と入力するだけです。

<input type="text" name="id"> 

ワーキングコード

$(document).ready(function(){ 
 
     var $form = $('#formAdd'); 
 
     $form.submit(function(){ 
 
      var id= $("#id").val(); 
 
      if (id.length < 12) { 
 
       alert("INPUT ERROR"); 
 
       return false; 
 
      } 
 

 
      $.post($form.attr('action'), $(this).serialize(), function(response){ 
 
       alert("DATA SUCCESSFULLY ADDED"); 
 
      },'json'); 
 
      return false; 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="branch_add_verifier.php" method="POST" id="formAdd"> 
 
<input type="text" id="id" name="id"> 
 
<input type="submit" value="submit"> 
 
</form>