[ad_1]
\n<\/p>\n
I see what you have now. Thanks for adding the code. I would first focus on design. It sounds like you want some sort of CRUD(Create Retrieve Update Delete) system. In that case, what I would do, is place the initial submission form on top (like what you have), and use modals to show any alert messages and the Edit form.<\/p>\n
The design would look like this:<\/p>\n
+-------------------------------------+\n| Submit Form |\n| - input |\n| - input |\n+-------------------------------------+\n| List showing DB info |\n| - result 1 (with Edit\/Delete links) |\n| - result 2 (with Edit\/Delete links) |\n| ... |\n+-------------------------------------+\n<\/code><\/pre>\nAt page load, you will run an JS function, we can call it update_list()<\/code>, that will use AJAX to fetch all the database info and parse it in the List container.<\/p>\nThen you will delegate<\/code> Edit\/Delete Click events to call the desired AJAX calls.<\/p>\nKeep in mind, this design structure separates everything in functions and uses AJAX to call on PHP scripts. The data will be sent via JSON.<\/p>\n
Now, when you Submit the submission form, this will also use AJAX to send POST requests to PHP, then once submitted, JS will use Bootstrap’s modal to show messages.<\/p>\n
When the edit link is clicked, JS will again open a Bootstrap modal to show the edit form.<\/p>\n
With that said, this is how I would do it :<\/p>\n
<html>\n <title>Modal<\/title>\n <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=iso-8859-1\">\n <head>\n <link rel=\"stylesheet\" href=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\">\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\n <script src=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/js\/bootstrap.min.js\"><\/script>\n <style>\n #wrapper {\n padding: 10px;\n }\n\n .modal-header, h4, .close {\n background-color: #5cb85c;\n color: white !important;\n text-align: center;\n font-size: 30px;\n }\n\n .modal-footer {\n background-color: #f9f9f9;\n }\n <\/style>\n <\/head>\n <body>\n <div id=\"wrapper\">\n <form id=\"submit_form\" role=\"form\" style=\"width: 300px;\">\n <div class=\"form-group\">\n <label for=\"pais\">Pais:<\/label>\n <?php\n $array_pais = array('Selecione...', 'Alemanha', 'Angola', 'Argentina', 'Bol\u00edvia', 'Brasil', 'Camar\u00f5es', 'Canad\u00e1', 'Chile', 'China', 'Colombia',\n 'Costa Rica', 'Cuba', 'Dinamarca', 'Equador', 'Espanha', 'Estados Unidos', 'Fran\u00e7a', 'Holanda', 'Inglaterra', 'It\u00e1lia', 'Jap\u00e3o',\n 'M\u00e9xico', 'Nig\u00e9ria', 'Panam\u00e1', 'Paraguai', 'Peru', 'Porto Rico', 'Portugal', 'R\u00fassia', 'Senegal', 'Taiwan', 'Uruguai', 'Venezuela'\n );\n echo '<select class=\"form-control\" name=\"pais\" id=\"pais\">';\n foreach ($array_pais as $valor) {\n echo '<option>' . $valor . '<\/option>';\n }\n echo '<\/select>';\n ?>\n <\/div>\n <div class=\"form-group\">\n <label for=\"nome\">Nome:<\/label>\n <input class=\"form-control\" name=\"nome\" type=\"text\" id=\"nome\" size=\"50\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"empresa\">Empresa:<\/label>\n <input class=\"form-control\" name=\"empresa\" type=\"text\" id=\"empresa\" size=\"50\" style=\"text-transform:uppercase;\">\n <\/div>\n <input type=\"submit\" name=\"Submit\" class=\"btn btn-success btn-lg\" value=\"+\">\n <\/form>\n\n\n <table id=\"list\" class=\"table\">\n <thead align=\"center\">\n <tr bgcolor=\"#B0E2FF\">\n <th>PA\u00cdS<\/th>\n <th>NOME<\/th>\n <th>EMPRESA<\/th>\n <th>A\u00c7\u00d5ES<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <\/tbody>\n <\/table>\n\n <div class=\"modals_container\">\n <div class=\"modal fade\" id=\"message_modal\" role=\"dialog\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\">×<\/button>\n <h4 class=\"modal-title\">Message<\/h4>\n <\/div>\n <div class=\"modal-body\"><\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"modal fade\" id=\"edit_modal\" role=\"dialog\">\n <div class=\"modal-dialog\">\n <form id=\"edit_form\" class=\"form\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\">×<\/button>\n <h4 class=\"modal-title\">Edit<\/h4>\n <\/div>\n <div class=\"modal-body\">\n <div class=\"form-group\">\n Country: <input id=\"country_input\" type=\"text\" name=\"country\">\n <\/div>\n <div class=\"form-group\">\n Nome: <input id=\"username_input\" type=\"text\" name=\"username\">\n <\/div>\n <div class=\"form-group\">\n Company: <input id=\"company_input\" type=\"text\" name=\"company\">\n <\/div>\n <input id=\"id_input\" type=\"hidden\" name=\"id\">\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Cancel<\/button>\n <button type=\"submit\" class=\"btn btn-default\">submit<\/button>\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <script>\n function update_list() {\n $.getJSON(\"get_list.php\", function (data) {\n\n if (data.response) {\n $(\"#list\").find(\"tbody\").empty();\n data.results.forEach(function (i) {\n console.log(i);\n $(\"#list\").find(\"tbody\").append(\n \"<tr>\" +\n \"<td>\" + i.country + \"<\/td>\" +\n \"<td>\" + i.username + \"<\/td>\" +\n \"<td>\" + i.company + \"<\/td>\" +\n \"<td><a class=\"edit_link\" href=\"\" + JSON.stringify(i) + \"\">edit<\/a> | <a class=\"delete_link\" href=\"\" + i.id + \"\">delete<\/a><\/td>\" +\n \"<\/tr>\"\n );\n });\n }\n\n });\n }\n update_list();\n $('#submit_form').submit(function () {\n $.ajax({\n url: \"main.php\",\n type: \"POST\",\n data: $(this).serialize(),\n dataType: \"json\",\n success: function (data) {\n if (data.response) {\n var $modal = $('#message_modal');\n $modal.find(\".modal-body\").html(data.message);\n $modal.modal('show');\n update_list();\n } else {\n alert(data.message);\n }\n }\n });\n return false;\n });\n\n $(\"#list\").delegate('.edit_link', 'click', function (e) {\n e.preventDefault();\n var info = JSON.parse($(this).attr(\"href\"));\n var $modal = $(\"#edit_modal\");\n $modal.find(\"#country_input\").val(info.country);\n $modal.find(\"#company_input\").val(info.company);\n $modal.find(\"#username_input\").val(info.username);\n $modal.find(\"#id_input\").val(info.id);\n $modal.modal('show');\n });\n\n $('#edit_form').submit(function () {\n $.ajax({\n url: \"edit.php\",\n type: \"POST\",\n data: $(this).serialize(),\n dataType: \"json\",\n success: function (data) {\n if (data.response) {\n var $modal = $('#message_modal');\n $(\"#edit_modal\").modal('hide');\n $modal.find(\".modal-body\").html(data.message);\n $modal.modal('show');\n update_list();\n } else {\n alert(data.message);\n }\n }\n });\n return false;\n });\n <\/script>\n <\/body>\n<\/html>\n<\/code><\/pre>\nedit.php should be something like this:<\/p>\n
$con = mysqli_connect(\"localhost\", \"root\", \"\", \"test\");\n\n\/\/ Check connection\nif (mysqli_connect_errno()) {\n echo \"Failed to connect to MySQL: \" . mysqli_connect_error();\n}\n\n$id = $_POST['id'];\n$nome = $_POST['username'];\n$company = $_POST['company'];\n$country = $_POST['country'];\n\n\n$query = \"UPDATE table SET username=\"$nome\", company = '$company', country= '$country' WHERE id = $id \";\n\nif (mysqli_query($con, $query)) {\n $res['response'] = true;\n $res['message'] = \"Record has been updated\";\n} else {\n $res['response'] = false;\n $res['message'] = \"Error: \" . $query . \"<br>\" . mysqli_error($con);\n}\n\necho json_encode($res);\n<\/code><\/pre>\nTry this out, and let me know what you think.<\/p>\n<\/p><\/div>\n