Database Connection

Hello everybody.
I need some help because i am new on php,
I have this code below and i want smth to know: When a user create new account member on the code below,i want that this row of accont member will be added on database. give me sm help.

<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit kliente</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
           <script>
         var jQueryOb= jQuery.noConflict();
 </script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
 <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
      <script>
  var jQueryKendo= jQuery.noConflict();
 </script>
    <script src="js/kendo.all.min.js"></script>
   <style>
table {
  border-collapse: separate;
  border-spacing: 0;
}
th, td {
  vertical-align: top;
}
th {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  padding: 9px 8px 7px 8px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
td {
  padding: 3px;
  size: 10px;
}
tbody td {
  border-bottom: 1px solid #c6c9cc;
  border-left: 1px solid #e4e7eb;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
tbody tr:nth-child(even) td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
  border-left: 1px solid #d5d8db;
}
.button {
                         background-color: blue;
                         color: yellow; 
                         font-weight: bold; 
                     }
body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
body {
    font-size: 62.5%;
}
label, input {
    display: block;
}
input.text {
    margin-bottom: 12px;
    width: 95%;
    padding: .4em;
}
fieldset {
    padding: 0;
    border: 0;
    margin-top: 25px;
}
h1 {
    font-size: 1.2em;
    margin: .6em 0;
}
div#users-contain {
    width: 350px;
    margin: 20px 0;
}
div#users-contain table {
    margin: 1em 0;
    border-collapse: collapse;
    width: 100%;
}
div#users-contain table td, div#users-contain table th {
    border: 1px solid #eee;
    padding: .6em 10px;
    text-align: left;
}
.ui-dialog .ui-state-error {
    padding: .3em;
}
.validateTips {
    border: 1px solid transparent;
    padding: 0.3em;
}
#dialog-form {
    display: none;
}   
  #tfheader{
        background-color:#c3dfef;
    }
    #tfnewsearch{
        float:right;
        padding:20px;
    }
    .tftextinput{
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        border:1px solid #0076a3; border-right:0px;
        border-top-left-radius: 5px 5px;
        border-bottom-left-radius: 5px 5px;
    }
    .tfbutton {
        margin: 0;
        padding: 5px 15px;
        font-family: Arial, Helvetica, sans-serif;
        font-size:14px;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        border: solid 1px #0076a3; border-right:0px;
        background: #0095cd;
        background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
        background: -moz-linear-gradient(top,  #00adee,  #0078a5);
        border-top-right-radius: 5px 5px;
        border-bottom-right-radius: 5px 5px;
    }
    .tfbutton:hover {
        text-decoration: none;
        background: #007ead;
        background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
        background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    }
    /* Fixes submit button height problem in Firefox */
    .tfbutton.moz-focus-inner {
      border: 0;
    }
    .tfclear{
        clear:both;
    }
</style>
<script>
    jQueryOb(function new_dialog() {
    var new_dialog = function (type, row) {
        var dlg = jQueryOb("#dialog-form").clone();
        var fname = dlg.find(("#fn1")),
            lname = dlg.find(("#fn2")),
            email = dlg.find(("#fn3")),
            password = dlg.find(("#fn4")),
            vendo = dlg.find(("#fn5")),
            usern = dlg.find(("#fn6"));
        type = type || 'Create';
        var config = {
            autoOpen: true,
            height: 300,
            width: 350,
            modal: true,
            show: {
        effect: "blind",
        duration: 1000
      },
            hide: {
        effect: "explode",
        duration: 1000
      },
            buttons: {
              "Create an account": save_data,
                    "Cancel": function () {
                    dlg.dialog("close");
                }
            },
            close: function () {
                dlg.remove();
            }
        };
        if (type === 'Edit') {
            config.title = "Edit User";
            get_data();
            delete(config.buttons['Create an account']);
            config.buttons['Edit account'] = function () {
                row.remove();
                save_data();
            };
        }
        dlg.dialog(config);
        function get_data() {
            var _em = jQueryOb(row.children().get(1)).text(),
                _mb= jQueryOb(row.children().get(2)).text(),
                _ema= jQueryOb(row.children().get(3)).text(),
                _pass = jQueryOb(row.children().get(4)).text(),
                _vend = jQueryOb(row.children().get(5)).text(),
                _us = jQueryOb(row.children().get(6)).text();
            fname.val(_em);
            lname.val(_mb);
            email.val(_ema);
            password.val(_pass);
            vendo.val(_vend);
            usern.val(_us);
        }
        function save_data() {
            jQueryOb("#users tbody").append("<tr>" + "<td>" + fname.val()+ "</td>" + "<td>" +lname.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "<td>" + vendo.val()+ "</td>" + "<td>" + usern.val()+  "</td>" + "<td><a href='' class='edit'>Edit</a></td>" + "<td><span class='delete'><a href=''>Delete</a></span></td>" + "</tr>");
            dlg.dialog("close");
        }
    };
    jQueryOb(document).on('click', 'span.delete', function () {
        jQueryOb(this).closest('tr').find('td').fadeOut(1000,
        function () {
            // alert($(this).text());
            jQueryOb(this).parents('tr:first').remove();
        });
        return false;
    });
    jQueryOb(document).on('click', 'td a.edit', function () {
        new_dialog('Edit', jQueryOb(this).parents('tr'));
        return false;
    });
    jQueryOb("#create-user").button().click(new_dialog);
});
function validatebox1() {
    var fn = document.getElementById("fn1").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn1").innerHTML = "Plotesoni fushen";
        document.getElementById("error_fn1").style.color = "red";
    }
    else {
        document.getElementById("error_fn1").innerHTML = "";
        document.getElementById("error_fn1").style.color = "green";
    }
}
function validatebox2() {
    var fn = document.getElementById("fn2").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn2").innerHTML = "Plotesoni fushen";
        document.getElementById("error_fn2").style.color = "red";
    }
    else {
        document.getElementById("error_fn2").innerHTML = "";
        document.getElementById("error_fn2").style.color = "green";
    }
}
function validatebox3() {
    var fn = document.getElementById("fn3").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn3").innerHTML = "Plotesoni fushen";
        document.getElementById("error_fn3").style.color = "red";
    }
    else {
        document.getElementById("error_fn3").innerHTML = "";
        document.getElementById("error_fn3").style.color = "green";
    }
}
function validatebox4() {
    var fn = document.getElementById("fn4").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn4").innerHTML = "Plotesoni fushen";
        document.getElementById("error_fn4").style.color = "red";
    }
    else {
        document.getElementById("error_fn4").innerHTML = "";
        document.getElementById("error_fn4").style.color = "green";
    }
}
   function validatebox5() {
    var fn = document.getElementById("fn5").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn5").innerHTML = "Plotesoni fushen";
        document.getElementById("error_fn5").style.color = "red";
    }
    else {
        document.getElementById("error_fn5").innerHTML = "";
        document.getElementById("error_fn5").style.color = "green";
    }
   }
    function validatebox6() {
    var fn = document.getElementById("fn6").value;
    if (fn == null || fn == "") {
        document.getElementById("error_fn6").innerHTML = "Plotesoni fushen";
        document.getElementById("error_fn6").style.color = "red";
    }
    else {
        document.getElementById("error_fn6").innerHTML = "";
        document.getElementById("error_fn6").style.color = "green";
    }
    } 
    function ndrysho_ngjyre(x)
{
x.style.background="#C0C0C0";
}
function ngjyra(y)
{
y.style.background="white";
}
</script>
    </head>
<body>
    <body>
    <div id="tfheader"class="k-content">
        <br/>
            <ul id="menu">
                <li>
                   <a href="http://localhost/final/button.php">Home</a></li>
                        <li>
                            Menaxho_produkte
                        </li>
                        <li>
                            Menaxho_biznese
                        </li>
                        <li>
                            Menaxho_kliente
                        </li>
                <li>
                   Statistika
                    <ul>
                        <li>
                            Shitje
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li><a href="http://localhost/final/chart1.php#">Konsum sipas grupmoshave</a></li>
                                <li><a href="http://localhost/final/chart3.php#">Konsum sipas kategorive</a></li>
                                <li><a href="http://localhost/final/chart4.php#">Klasifikim shitjesh</a></li>
                            </ul>
                        </li>
                        <li>
                           Marketing
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li><a href="http://localhost/final/marketsharechart.php">Market share</a></li>
                                <li><a href="http://localhost/final/fushatemkg.php">Fushata me e mire</a></li>
                            </ul>
                        </li>
                        <li>
                            Human Resources
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li><a href="http://localhost/final/nrvizitoreve.php">Nr.vizitoreve&klienteve</a></li>
                                 <li><a href="http://localhost/final/jobvacancy.php">Job vacancy</a></li>
                            </ul>
                        </li>
                        <li>
                            Finance
                            <ul> <!-- moving the UL to the next line will cause an IE7 problem -->
                                <li><a href="http://localhost/final/sales.php">Ecuria ekonomike</a></li>
                                <li><a href="http://localhost/final/chart2.php">Te ardhurat vjetore</a></li>
                                <li><a href="http://localhost/final/stok.php">Mallra Stok</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="http://localhost/final/newlogin.php">
                   Logout
                    </a>  </li>
                </ul>
        <form id="tfnewsearch" method="get" action="http://www.google.com">
                <input type="text" class="tftextinput" name="q" size="18"maxlength="120"><input type="submit" value="search" class="tfbutton">
        </form>
    <div class="tfclear"></div>
    </div>  
<div class="gradient"></div>
        <style scoped>
            #megaStore {
                width: 600px;
                margin: 30px auto;
                padding-top: 120px;
                background: url('../../content/web/menu/header.jpg') no-repeat 0 0;
            }
            #menu h2 {
                font-size: 1em;
                text-transform: uppercase;
                padding: 5px 10px;
            }
            #template img {
                margin: 5px 20px 0 0;
                float: left;
            }
            #template {
                width: 380px;
            }
            #template ol {
                float: left;
                margin: 0 0 0 30px;
                padding: 10px 10px 0 10px;
            }
            #template:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            #template .k-button {
                float: left;
                clear: left;
                margin: 5px 0 5px 12px;
            }
        </style>
        <script>
            jQueryKendo(document).ready(function() {
                jQueryKendo("#menu").kendoMenu();
            });
        </script>
        <div id="dialog-form" align="center" title="Shto nje klient te ri!">
            <fieldset>
                <form action="addkliente.php" method="post">
    <table border="0" align="center" width="50%" >
    <tr><td width="25%"> <strong> <font color="blue" face="arial">Id_klient : </font> </strong>  </td> <td><input type="text" name="idklient" id="fn1" onblur="validatebox1()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn1"></span></td></tr> <br/>
    <tr> <td><strong><font color="blue" face="arial"> Emer: </font></strong> </td> <td><input type="text" name="emer" id="fn2" onblur="validatebox2()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn2"></span> </td></tr><br/>
    <tr> <td><strong> <font color="blue" face="arial">Mbiemer :</font> </strong> </td> <td><input type="text" name="mbiemer" id="fn3" onblur="validatebox3()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn3"></span></td></tr><br/>
    <tr> <td><strong> <font color="blue" face="arial">Gjini : </font> </strong>  <td><input type="text" name="gjini" id="fn4" onblur="validatebox4()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn4"></span> </td></tr><br/>
    <tr> <td> <strong> <font color="blue" face="arial">Datelindje: </font> </strong>  </td> <td><select name="dtl" id="fn5" onblur="validatebox5()" onfocus="ndrysho_ngjyre(this)"><span id="error_fn5"></span><option selected="selected">Tirane </option> <option>Elbasan</option> <option>Durres </option> <option>Vlore</option> <option>Tjeter</option></select> </td></tr><br>
            <tr> <td><strong> <font color="blue" face="arial">Username</font> </strong>  <td><input type="text" name="user" id="fn6" onblur="validatebox6()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn6"></span> </td>
        </tr>
</table>
    </form>
                </fieldset>
        </div>
        <div id="users-contain" class="ui-widget">
                <h4><font color="blue" face="arial">Klientet Ekzistues:</font></h4>
            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th >Id_klient</th>
      <th >Emer</th>
      <th >Mbiemer</th>
      <th >Datelindje</th>
      <th >Vendodhje</th>
      <th class="price">Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                         <tr>
                        <td class="custom-name">0</td>
      <td >Romina</td>
      <td >Shehu</td>
      <td >1991-3-3</td>
      <td >Elbasan</td>
      <td >r.shehu</td>
      <td><a class="edit" href="">Edit</a>
                        </td>
                        <td><span class="delete"><a href="">Delete</a></span>
                        </td>
    </tr>
    <tr>
       <td class="custom-name">2</td>
      <td >Arbi</td>
      <td >Basha</td>
      <td >1997-3-8</td>
      <td >Vlore</td>
      <td >b.basha</td>
                        </td>
                         <td><a class="edit" href="">Edit</a>
                        </td>
                        <td><span class="delete"><a href="">Delete</a></span>
                        </td>
    </tr>
    <tr>
      <td class="item">3</td>
      <td class="stock out">Agron</td>
      <td class="qty">Ago</td>
      <td class="price">1980-7-12</td>
      <td class="price">Durres</td>
      <td class="price">a.ago</td>
       <td><a class="edit" href="">Edit</a>
                        </td>
                        <td><span class="delete"><a href="">Delete</a></span>
                        </td>
    </tr>
  </tbody>
            </table>
        </div>
        <button id="create-user">Shto</button>
    </body>
</html>

The row should be added in addkliente.php
Did you already write that script? Doesn’t it work? What error are you getting?

yes dosnt it work.it gets error below:
The addkliente.php code is below and i dont know what to do because it show underfined index from row 9-22

<?php
include_once ('db.php.php');
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
$id = $_POST['idklient'];
$emer = $_POST['emer'];
$mbiemer=$_POST['mbiemer'];
$gjini=$_POST['gjini'];
$dtl=$_POST['dtl'];
$user=$_POST['user'];

$sql=("INSERT INTO klient(Id_klient,emer_klient, mbiemer_klient,mosha_klient,gjinia_klient,vendnd,user_klient,pass_klient,action)
VALUES
('$id','$emer','$mbiemer','$gjini','$dtl','$user')");

if (!mysqli_query($con,$sql))
  {
  die('Error: ' . mysqli_error($con));
  }
echo "1 record added";

mysqli_close($con);
?>

You’ve just posted code - you’ve not said what the error was. But I am going to guess that it is “Failed to connect to MySQL:”.

This means one or more of the database name, user name and/or password in your connection string is incorrect. Check the db.php.php file. (Is it REALLY called that? .php twice?)

Your form and fieldset tags aren’t nested correctly.

        <div id="dialog-form" align="center" title="Shto nje klient te ri!">
            <fieldset>
                <form action="addkliente.php" method="post">
    <table border="0" align="center" width="50%" >
    <tr><td width="25%"> <strong> <font color="blue" face="arial">Id_klient : </font> </strong>  </td> <td><input type="text" name="idklient" id="fn1" onblur="validatebox1()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn1"></span></td></tr> <br/>
    <tr> <td><strong><font color="blue" face="arial"> Emer: </font></strong> </td> <td><input type="text" name="emer" id="fn2" onblur="validatebox2()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn2"></span> </td></tr><br/>
    <tr> <td><strong> <font color="blue" face="arial">Mbiemer :</font> </strong> </td> <td><input type="text" name="mbiemer" id="fn3" onblur="validatebox3()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn3"></span></td></tr><br/>
    <tr> <td><strong> <font color="blue" face="arial">Gjini : </font> </strong>  <td><input type="text" name="gjini" id="fn4" onblur="validatebox4()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn4"></span> </td></tr><br/>
    <tr> <td> <strong> <font color="blue" face="arial">Datelindje: </font> </strong>  </td> <td><select name="dtl" id="fn5" onblur="validatebox5()" onfocus="ndrysho_ngjyre(this)"><span id="error_fn5"></span><option selected="selected">Tirane </option> <option>Elbasan</option> <option>Durres </option> <option>Vlore</option> <option>Tjeter</option></select> </td></tr><br>
            <tr> <td><strong> <font color="blue" face="arial">Username</font> </strong>  <td><input type="text" name="user" id="fn6" onblur="validatebox6()" onfocus="ndrysho_ngjyre(this)"size="15"><span id="error_fn6"></span> </td>
        </tr>
</table>
    </form>
                </fieldset>
        </div>

Hi grisindria,

The underfined index states that there is a missing $_POST[’ index '] value.

Try this:


<?php

error_reporting(-1); ini_set('display_errors', true);

// Check connection
   include_once ('db.php.php');

if (mysqli_connect_errno())
{
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

// SET DEFAULTS
  $id      = isset($_POST['idklient']) ? $_POST['idklient'] : NULL;
  $emer    = isset($_POST['emer'] ) ? $_POST['emer']        : NULL ;
  $mbiemer = isset($_POST['mbiemer']) ? $_POST['mbiemer']   : NULL;
  $gjini   = isset($_POST['gjini']) ? $_POST['gjini']       : NULL;
  $dtl     = isset($_POST['dtl']) ? $_POST['dtl']           : NULL;
  $user    = isset($_POST['user']) ? $_POST['user']         : NULL;

if(NULL == $emer OR NULL == $mbiemer OR NULL == $gjini OR NULL == $dtl OR NULL == $user)
{
  echo 'BIG PROBLEM - MISSING $_POST["index-value"] ';
  echo '<pre>';
    print_r( $_POST);
  echo '</pre>';
}else{ 
  $sql="
    INSERT INTO klient
   (
      Id_klient,emer_klient, mbiemer_klient,mosha_klient, 
     gjinia_klient,vendnd,user_klient,pass_klient,action
   )
    VALUES
    ('$id','$emer','$mbiemer','$gjini','$dtl','$user')
  ";
   if (!mysqli_query($con,$sql))
   {
    die('Error: ' . mysqli_error($con));
   }
   echo "1 record added";
 
   mysqli_close($con);
}


In fact i haven’t problem to connect with database but i want to add data into database through the form field in html.
This form has a jquery function that when click the ‘create an account’ button,this action add a row in the existing table and i want to be added in database too
is it possible to correlate this jquery function with php/ajax?

I believe the original post posed the question that you were unable to add a new user to a customer table. Is this correct? Did the detailed suggestions solve your problem, if so then I and others would be grateful for the solution that solved your problem.

As far as this post is concerned then I think that jQuery and aJax could be used but neither would work until you solve your original problem. I also think that it would be better to create another thread in the appropriate forum.

Off Topic:

Were the following spelling mistakes or abbreviations:

  1. smth (to know)
  2. sm (help)