如何将数据从模式形式（JQUERY-UI）传递给mysql？

Question

I am trying to pass some data from a modal form (JQuery-UI) to MySQL Database and I tryed the action="" with POST method but nothing comes on my database. I searched on google every single answer within the 3 first pages but I didnt found nothing to solve my issue. I will attach my code so you can see me code and correct me. The modal form that I use is about a new client form. I click the button "Add client" on my page and a popup (modal form) is openned with some html inputs and when I press submit i want to INSERT that data on my database. Thank you!

Modal Form Code:

<div  id="dialog-form" title="Add new client">

                        <form name="new_client" method="POST" action="addclient.php">
                         <fieldset>
                            <label for="name">First Name</label>
                            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
                            <label for="last">Last Name</label>
                            <input type="text" name="last" id="last" class="text ui-widget-content ui-corner-all">
                            <label for="address">Address</label>
                            <input type="text" name="address" id="address" class="text ui-widget-content ui-corner-all">
                            <label for="num">Nr. of Address</label>
                            <input type="text" name="num" id="num" class="text ui-widget-content ui-corner-all">
                            <label for="city">City</label>
                            <input type="text" name="city" id="city" class="text ui-widget-content ui-corner-all">
                            <label for="postal">Postal Code</label>
                            <input type="text" name="postal" id="postal" class="text ui-widget-content ui-corner-all">
                            <label for="state">State</label>
                            <input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">


<!-- Allow form submission with keyboard without duplicating the dialog     button -->
                            <input type="submit" method="POST"  name="insert-client" id="insert-client" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
(and the div tag here)

(and the following closing tags)

AddClient.php

<?php

require_once('mysqli_connect.php'); 
if(isset('insert-client')){
    $f_name = $_POST['name'];
    $l_name = $_POST['last'];
    $address = $_POST['address'];
    $num = $_POST['num'];  
    $city = $_POST['city'];
    $postal = $_POST['postal'];
    $state = $_POST['state'];


    $query = "INSERT INTO clients(clientID, name, last, address, num, city, postal, state) VALUES (NULL, $f_name, $l_name, $address, $num, $city, $postal, $state)";

    mysqli_query($dbc, $query);
    mysqli_close($dbc);
}
?>

I also tryed to put this line of code on my head tag on modal form javascript

$.post("addclient.php", $("new_client").serialize());

I post here the script code on the head tags to check it

<script>
 $( function() {
  var dialog, form,

  // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
  emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
  name = $( "#name" ),
  last = $( "#last" ),
  address = $( "#address" ),
  num = $( "#num" ),
  city = $( "#city" ),
  postal = $( "#postal" ),
  state = $( "#state" ),
  allFields = $( [] ).add( name ).add( last ).add( address ).add( num ).add( city ).add( postal ).add( state ),
  tips = $( ".validateTips" );

function updateTips( t ) {
  tips
    .text( t )
    .addClass( "ui-state-highlight" );
  setTimeout(function() {
    tips.removeClass( "ui-state-highlight", 1500 );
  }, 500 );
}

function checkLength( o, n, min, max ) {
  if ( o.val().length > max || o.val().length < min ) {
    o.addClass( "ui-state-error" );
    updateTips( "Length of " + n + " must be between " +
      min + " and " + max + "." );
    return false;
  } else {
    return true;
  }
}

function checkRegexp( o, regexp, n ) {
  if ( !( regexp.test( o.val() ) ) ) {
    o.addClass( "ui-state-error" );
    updateTips( n );
    return false;
  } else {
    return true;
  }
 }


  function addUser() {
  var valid = true;
  allFields.removeClass( "ui-state-error" );

  valid = valid && checkLength( name, "name", 3, 16 );
  valid = valid && checkLength( name, "last", 3, 16 );
  valid = valid && checkLength( name, "address", 3, 16 );
  valid = valid && checkLength( name, "num", 3, 16 );
  valid = valid && checkLength( name, "city", 3, 16 );
  valid = valid && checkLength( name, "postal", 3, 16 );
  valid = valid && checkLength( name, "state", 3, 16 );

  if ( valid ) {
    $( "#clients tbody" ).append( "<tr>" +
      "<td>" + name.val() + "</td>" +
      "<td>" + last.val() + "</td>" +
      "<td>" + address.val() + "</td>" +
      "<td>" + num.val() + "</td>" +
      "<td>" + city.val() + "</td>" +
      "<td>" + postal.val() + "</td>" +
      "<td>" + state.val() + "</td>" +
      "</tr>" );
     dialog.dialog( "close" );

  }
  return valid;
 }

 dialog = $( "#dialog-form3" ).dialog({
  autoOpen: false,
  height: 680,
  width: 770,
  modal: true,
  buttons: {
    "Προσθήκη": addUser,
    Cancel: function() {
      dialog.dialog( "close" );
    }
  },
  close: function() {
    form[ 0 ].reset();
    allFields.removeClass( "ui-state-error" );
  }
});

form = dialog.find( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  addUser();
});



$( "#create-user3" ).button().on( "click", function() {
  dialog.dialog( "open" );
  });
 } );
</script>

Answer 1

Try this method

 $(document).ready(function(){
        $("#new_client").click(function(){
            var str = $("form").serializeArray();
            $.ajax({  
                type: "POST",  
                url: "http://example.com",  
                data: str,  
                success: function(value) {
                    // your logic
                }
            });
        });
    });

In your code, you missed calling "#new_client"