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>

Recommended Answers

All 2 Replies

Member Avatar for diafol

Any chance you could just include the relevant code and markup? Hundreds of lines of irrelevant markup is just a pain.

Below is the relevant code.
In fact 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?

<html>
    <head>
        <meta charset="utf-8" />
        <title>Edit client</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>
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;
}

#dialog-form {
    display: none;
}   

</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);
});

</script>
    </head>
<body>
    <body>

<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="Add a new client!">
            <fieldset>
                <form action="addcliente.php" method="post">
    <table border="0" align="center" width="50%" >
    <tr><td width="25%"> <strong> <font color="blue" face="arial">Id_client : </font> </strong>  </td> <td><input type="text" name="client"></td></tr> <br/>
    <tr> <td><strong><font color="blue" face="arial"> Firstname: </font></strong> </td> <td><input type="text" name="emer"> </td></tr><br/>
    <tr> <td><strong> <font color="blue" face="arial">Lastname :</font> </strong> </td> <td><input type="text" name="mbiemer>"</td></tr><br/>
    <tr> <td><strong> <font color="blue" face="arial">Gender : </font> </strong>  <td><input type="text" name="gjini"> </td></tr><br/>
    <tr> <td> <strong> <font color="blue" face="arial">Birth: </font> </strong>  </td> <td><select name="dtl"<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"> </td>
        </tr>
</table>
    </form>
                </fieldset>
        </div>
        <div id="users-contain" class="ui-widget">
                <h4>Existing Client:</h4>
            <table id="users" class="ui-widget ui-widget-content">
                <thead>
                    <tr class="ui-widget-header ">
                        <th >Id_klient</th>
      <th >Firstname</th>
      <th >Lastname</th>
      <th >Birth</th>
      <th >Hometown</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>

  </tbody>
            </table>
        </div>
        <button i***Bold Text Here***d="create-user">Add</button>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.