Jquery post data show up in url

Question

I want to make a dynamic html table using w3css, im using jquery $.post but it doesnt seem to work.Other script like this one is working find in my other html file.

in my adress bar this url show up after excuting the jquery. http://jhonpln.heliohost.org/admin.html?nopersonel=6895005B&gateid=12345&pass=xxx&ulpass=xxx

admin.html

<div class="w3-container w3-animate-bottom">
  <hr>
  <div class="w3-center">
    <h2>Buku Kontak Pegawai</h2>
  </div>
<div class="w3-responsive w3-card-4">
<table id="table" class="w3-table w3-striped w3-bordered">
<thead>
<tr class="w3-theme">
  <th>No. Personel</th>
  <th>Nama</th>
  <th>Gate ID</th>
  <th>No. HP</th>
  <th>Edit Admin</th>
  <th>Pilih</th>
</tr>
</thead>
<tbody>
<tr w3-repeat="admin">
    <td>{{nopersonel}}</td>
    <td>{{nama}}</td>
    <td>{{gateid}}</td>
    <td>{{telp}}</td>
    <td><button class="w3-btn w3-small w3-white w3-border w3-border-blue w3-round-xlarge" >edit</button></td>
  <td><button class="w3-btn w3-small w3-white w3-border w3-border-red w3-round-xlarge" onclick="pilih(this)">X</button></td>
</tr>

</tbody>
</table>
</div>
<hr>

<button class="w3-btn w3-green" onclick="modalTambah()">Tambah Admin</button>
<button class="w3-btn w3-red">Delete Admin</button>
</div>

<!-- Modal that pops up when you click on "New Message" -->
<div id="tambah" class="w3-modal" style="z-index:4">
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-container w3-padding w3-red">
<span onclick="document.getElementById('tambah').style.display='none'" class="w3-right w3-xxlarge w3-closebtn"><i class="fa fa-remove"></i></span>
<h2>Tambah Admin</h2>
</div>
<div class="w3-container">
<form class="w3-container">
<p>
<label>No. Personel</label>
<input name ="nopersonel" class="w3-input w3-border w3-hover-border-black" type="text">
</p>

<p>
<label>Gate ID</label>
<input name ="gateid" class="w3-input w3-border w3-hover-border-black" type="text">
</p>

<p>
<label>Password</label>
<input name ="pass" class="w3-input w3-border w3-hover-border-black" type="password">
</p>

<p>
<label>Ulangi Password</label>
<input name ="ulpass" class="w3-input w3-border w3-hover-border-black" type="password">
</p>


<p>
<a class="w3-btn w3-red" onclick="document.getElementById('tambah').style.display='none'">Batal</a>
<button id="tambahbtn"class="w3-btn w3-right w3-green">Tambah</button >
</p>
</form>
</div>
</div>
</div>

admin.html script

$(document).ready(function(){

     $.post("validation.php",function(respone){

        if(respone == "abort"){
            alert("Silahkan Login Terlebih Dahulu.");
            window.location.href = 'home.html';
        }

        });

    w3Http("table.php", function () {
    if (this.readyState == 4 && this.status == 200) {
        var myObject = JSON.parse(this.responseText);
        w3DisplayData("table", myObject);
        }
    });

    $("#tambahbtn").click(function(){
        var p1 = $( "#pass" ).val();
        var p2 = $( "#ulpass" ).val();
        if(p1 != p2){
                alert("Konfirmasi password salah, silahkan ulang kembali");             
        }else{

            data = {
                'nopersonel'  : $('input[name=nopersonel]').val(), 
                'pass': $('input[name=pass]').val(),
                'ulpass': $('input[name=ulpass]').val(),
                'gateid': $('input[name=gateid]').val()

            };

            $.post("tambahadmin.php", data, function(respone){

            alert(respone);                             

            });

        }




    });

});

tambahadmin.php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $nopersonel = $_POST["nopersonel"];
        $password =$_POST["pass"];
        $gate =$_POST["gateid"];
    }

    $mysqli = new mysqli();

    if (mysqli_connect_errno()) {
        printf("Connect failed: %s\n", mysqli_connect_error()); //this will print out the error while connecting to MySQL, if any
        exit();
    }

    $sql="SELECT nama,telp FROM pegawai WHERE nopersonel='$nopersonel' limit 1";

    if ($result = mysqli_query($mysqli, $sql)) {

        /* fetch associative array */
        while ($row = mysqli_fetch_assoc($result)) {
            $nama = $row['nama'];
            $telp = $row['telp'];
        }

        $nama = array_values($nama);
        $telp = array_values($telp);



        $sql="INSERT INTO admin VALUES ($nopersonel,$password,$nama[0],$gate,$telp[0]);";
        mysqli_query($mysqli, $sql)

        /* free result set */
        mysqli_free_result($result);

        /* close connection */
        mysqli_close($mysqli);

        echo "Berhasil tambah admin";   



    }

this is my first time building a website, can someone point out my mistake ?

Answer 1

You need to use .preventDefault to disable your browser's default behavior:

$("#tambahbtn").click(function(event){
        event.preventDefault();
       //Your code here
)}