arkam chou
asked on
html table to mysql
Dear Expert,
I want to have data entry to server with goal below:
1.have two input box and one button
- Input1(Brand Name): get data from MySQL
- Inp;ut2(Price): input by user via html
- button1 (Add Data2Table): Add data to same html table by using javascript
2. have one button for transfer all data in html table to MySQL using php
Note: the data in table can be delete and update.
Thanks,
Rada
I want to have data entry to server with goal below:
1.have two input box and one button
- Input1(Brand Name): get data from MySQL
- Inp;ut2(Price): input by user via html
- button1 (Add Data2Table): Add data to same html table by using javascript
2. have one button for transfer all data in html table to MySQL using php
Note: the data in table can be delete and update.
Thanks,
Rada
ASKER
Hello Dan,
Thanks you so much for you support. I am first with web programming, It look really hard for me. I am really struck on how to write data from html table to mysql.
Thanks you so much for you support. I am first with web programming, It look really hard for me. I am really struck on how to write data from html table to mysql.
Here's a couple more methods:
1. Add entries into a spreadsheet/Excel and IMPORT into mySQL
-or-
2. Install/Configure phpMyAdmin to insert into your table directly to a temp (development) table or permanent table (production)
http://www.phpmyadmin.net/home_page/index.php
This is assuming that the entry is done internally
1. Add entries into a spreadsheet/Excel and IMPORT into mySQL
-or-
2. Install/Configure phpMyAdmin to insert into your table directly to a temp (development) table or permanent table (production)
http://www.phpmyadmin.net/home_page/index.php
This is assuming that the entry is done internally
ASKER
Hello Sir,
I need to input from html.
I need to input from html.
html is a markup language.
you can create a HTML <FORM> and have the action point to a PHP-based processing page.
Please clarify what else you want to occur.
You can add a row dynamically to the html via javascript or a framework (like jquery) and have the new from fields set as an array-----thus, allowing your processing page that is called when the user presses the button to process the fields as array values.
you can create a HTML <FORM> and have the action point to a PHP-based processing page.
Please clarify what else you want to occur.
You can add a row dynamically to the html via javascript or a framework (like jquery) and have the new from fields set as an array-----thus, allowing your processing page that is called when the user presses the button to process the fields as array values.
for this to work you need:
1. a HTML form built on PHP or Server-side code with a javascript framework or function to facilitate the row adding.
2. a PHP or Server-side processing page.
3. a mySQL or other database.
1. a HTML form built on PHP or Server-side code with a javascript framework or function to facilitate the row adding.
2. a PHP or Server-side processing page.
3. a mySQL or other database.
The thing you're talking about is called a "table maintenance" application. It is a standard part of every web development curriculum, with very well-understood design guidelines.
If you're new to web development with PHP and MySQL this article can help you find good learning resources. Perhaps more importantly, it can help you avoid the many bad examples that litter the internet.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html
PHP has some guidance on how to use forms here:
http://php.net/manual/en/tutorial.php
Once you have a foundation, this article shows the essential moving parts of a table maintenance application.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_12335-PHP-and-MySQLi-Table-Maintenance.html
If you're new to web development with PHP and MySQL this article can help you find good learning resources. Perhaps more importantly, it can help you avoid the many bad examples that litter the internet.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_11769-And-by-the-way-I-am-new-to-PHP.html
PHP has some guidance on how to use forms here:
http://php.net/manual/en/tutorial.php
Once you have a foundation, this article shows the essential moving parts of a table maintenance application.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_12335-PHP-and-MySQLi-Table-Maintenance.html
greetings sokrada, , Looked at your question and you need to - "Add data to same html table by using javascript"
You can do this with javascript, , however there is no way for us experts to know what to suggest , because you do not give use enough "Code" information. You say this - "the data in table can be delete and update", , so this page must be somewhat complex. . . If you can, please show us the Page code for your page with the HTML <table>, and the methods you may use for the "table can be delete and update" concerns.
You can do this with javascript, , however there is no way for us experts to know what to suggest , because you do not give use enough "Code" information. You say this - "the data in table can be delete and update", , so this page must be somewhat complex. . . If you can, please show us the Page code for your page with the HTML <table>, and the methods you may use for the "table can be delete and update" concerns.
maybe like this -
<!DOCTYPE html>
<html><head><title>Update Table wid JS</title>
<style>
body {background: #ffe8d0;}
.updater {background: #d0e8ff; width: 13em; border:1px solid #3b3;}
.updater th {background: #fff; color: #b99;}
</style>
<script>/* <![CDATA[ */
function id2ob(elmt1){return document.getElementById(elmt1);}
if(document.all)id2ob=function(elmt1){return document.all[elmt1];}
function updater(){
// get values from inputs
var brand1 = id2ob("brand").value;
if (brand1.length < 1) brand1 = "None";
var price1 = id2ob("price").value;
if (price1.length < 1) price1 = "00.00";
//alert("Updater button "+brand1+" - "+price1);
// get the <tbody>
var tbody1 = id2ob("tbd1");
// insert a Row
var tr1 = tbody1.insertRow(tbody1.rows.length);
// create and add 2 cells
var td1 = tr1.insertCell(0);
// add some text to the new <td>
var tx = document.createTextNode(price1)
td1.appendChild(tx);
td1 = tr1.insertCell(0);
tx = document.createTextNode(brand1)
td1.appendChild(tx);
// please Note: first <td> added will be LAST cell in the row
}
/* ]]> */</script>
</head>
<body><h3>Update an HTML Table</h3>
<table id="tbl1" class="updater">
<thead>
<tr><th>Brand Name</th><th>Price</th></tr>
</thead>
<tbody id = "tbd1">
<tr>
<td>Kool</td><td>17.50</td>
</tr>
<tr>
<td>Broke</td><td>0.10</td>
</tr>
<tr>
<td>Strike</td><td>22.22</td>
</tr>
<tr>
<td>Jump High</td><td>43.21</td>
</tr>
</tbody>
</table>
<hr style="border-color: #d0e8ff;">
Brand Name here - <input type="text" id="brand" value="Next" /><br />
Price here - <input type="text" id="price" value="11.11" style="margin-left: 3.5em;" /><br />
<button onclick="updater()">Add Brand to table</button>
</body></html>ASKER
Dear Expert NerdsOfTech,
your guide is right, but I don't know how to transfer data from html to mysql.
--------------------------
Dear Ray Paseur,
Thanks for your reference. I don't like to ask before don't study much too but I need it for this small purpose first.
--------------------------
Dear Expert Slick812,
I want to like this and then have one button for transfer the data in table to MySQL using php or other.
your guide is right, but I don't know how to transfer data from html to mysql.
--------------------------
Dear Ray Paseur,
Thanks for your reference. I don't like to ask before don't study much too but I need it for this small purpose first.
--------------------------
Dear Expert Slick812,
I want to like this and then have one button for transfer the data in table to MySQL using php or other.
For some reason, PHP is the only programming language that people think they can use before they learn the language. Nobody tries to write in C++ or Java until they have taken a course in C++ or Java. I don't understand why PHP is in this unique niche. It has at least as much learning curve as other programming languages.
What we have here seems to not be a question, so much as a requirement for application development. We can show you the principles, but when it comes to the specific implementations, that part is your responsibility. We are just volunteers who answer questions and provide teaching examples.
Based on your responses, it appears that your best path to a good solution would be to hire a professional developer. You either need to do that, or take the personal study time to learn all of the things a professional developer already knows. That will take months if not years, so spending a little money for professional work will surely be the fastest way to get results. It's also likely to get you better results! As the great fire fighter Red Adair famously said, "If you think it's expensive to hire a professional, just wait till you hire an amateur!"
If you have any specific questions about the links or articles I posted above, I'll be glad to answer them. Best of luck with your project, ~Ray
What we have here seems to not be a question, so much as a requirement for application development. We can show you the principles, but when it comes to the specific implementations, that part is your responsibility. We are just volunteers who answer questions and provide teaching examples.
Based on your responses, it appears that your best path to a good solution would be to hire a professional developer. You either need to do that, or take the personal study time to learn all of the things a professional developer already knows. That will take months if not years, so spending a little money for professional work will surely be the fastest way to get results. It's also likely to get you better results! As the great fire fighter Red Adair famously said, "If you think it's expensive to hire a professional, just wait till you hire an amateur!"
If you have any specific questions about the links or articles I posted above, I'll be glad to answer them. Best of luck with your project, ~Ray
@sokrada , , I read your last comment as ID: 40734963 , and The part you have for me is -
"I want to like this and then have one button for transfer the data in table to MySQL using php or other. "
I only understand your words here, , a SMALL amount, I am NOT clear about what you may mean when you say -
"transfer the data in table to MySQL using php or other"
But I am Not able to see what your PAGE CODE may be for your <table>, I just used a two two column <table> in my example code above. You seem to have run that code, and it worked for you, , because you say - "I want to like this"
I asked you before, and I will ask again
Can you SHOW us what you have in PHP and - or HTML as the CODE you use for your Page?
If you can please tell us about your saying -
"Note: the data in table can be delete and update."
you have said some about the "update" part, but nothing about the "delete" from <table> part. Is this code you already have? ? Or is this code you need to have help with?
It seems that English is not your first language, if you can, , try and explain more, , and talk more about what you use and know about on your PHP server, especially about the part in your question -
" - Input1(Brand Name): get data from MySQL"
can you show us, , or tell us about the PHP code for your MySQL , like -
$mysqli = new mysqli('localhost', 'user', 'password', 'dataBase');
that you use or know about.
We can not try and help much, if we do not know the parts of your code you may already have written.
"I want to like this and then have one button for transfer the data in table to MySQL using php or other. "
I only understand your words here, , a SMALL amount, I am NOT clear about what you may mean when you say -
"transfer the data in table to MySQL using php or other"
But I am Not able to see what your PAGE CODE may be for your <table>, I just used a two two column <table> in my example code above. You seem to have run that code, and it worked for you, , because you say - "I want to like this"
I asked you before, and I will ask again
Can you SHOW us what you have in PHP and - or HTML as the CODE you use for your Page?
If you can please tell us about your saying -
"Note: the data in table can be delete and update."
you have said some about the "update" part, but nothing about the "delete" from <table> part. Is this code you already have? ? Or is this code you need to have help with?
It seems that English is not your first language, if you can, , try and explain more, , and talk more about what you use and know about on your PHP server, especially about the part in your question -
" - Input1(Brand Name): get data from MySQL"
can you show us, , or tell us about the PHP code for your MySQL , like -
$mysqli = new mysqli('localhost', 'user', 'password', 'dataBase');
that you use or know about.
We can not try and help much, if we do not know the parts of your code you may already have written.
ASKER
Dear Expert Slick812,
Thanks you so much for you support, I am sorry about my English word. I am not good of it. Please find below of the code. My purpose is that
<!DOCTYPE html>
<html lang=en>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>
<?php
echo "Brand";
$connection=mysqli_connect
$query="select brandID, brandNameEN from tblbrand order by brandNameEN";
$result=mysqli_query($conn
if (mysqli_num_rows($result)>
echo "<select name=brand id=brand>";
while($row=mysqli_fetch_as
echo "<option value=".$row[brandID].">";
echo $row["brandNameEN"];
echo "</option>";
}
echo "</select>";
}else{
echo "Null";
}
echo "Price";
echo "<input type='text' name='price' id='price'>";
echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
?>
<table id="HTMLTable" border="1">
<thead>
<tr>
<td>Brand</td>
<td>Price</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="transfer data from HTML Table to MySQL" id="HTMLtoMySQL">
<script>
$("#AddToHTML").click(func
$("#HTMLTable").find("tbod
})
</script>
</body>
</html>
--------------------------
@sokrada , , I read your last comment as ID: 40734963 , and The part you have for me is -
"I want to like this and then have one button for transfer the data in table to MySQL using php or other. "
My purpose is make data entry to database. first of all, I want to use html for input data. the data input from textbox go to table in html and then I need to submit data in html table to MySQL by using php.
I only understand your words here, , a SMALL amount, I am NOT clear about what you may mean when you say -
"transfer the data in table to MySQL using php or other"
I want insert data to MySQL, the data that will insert is taking from table in html.
Thanks you so much for you support, I am sorry about my English word. I am not good of it. Please find below of the code. My purpose is that
<!DOCTYPE html>
<html lang=en>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>
<?php
echo "Brand";
$connection=mysqli_connect
$query="select brandID, brandNameEN from tblbrand order by brandNameEN";
$result=mysqli_query($conn
if (mysqli_num_rows($result)>
echo "<select name=brand id=brand>";
while($row=mysqli_fetch_as
echo "<option value=".$row[brandID].">";
echo $row["brandNameEN"];
echo "</option>";
}
echo "</select>";
}else{
echo "Null";
}
echo "Price";
echo "<input type='text' name='price' id='price'>";
echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
?>
<table id="HTMLTable" border="1">
<thead>
<tr>
<td>Brand</td>
<td>Price</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="transfer data from HTML Table to MySQL" id="HTMLtoMySQL">
<script>
$("#AddToHTML").click(func
$("#HTMLTable").find("tbod
})
</script>
</body>
</html>
--------------------------
@sokrada , , I read your last comment as ID: 40734963 , and The part you have for me is -
"I want to like this and then have one button for transfer the data in table to MySQL using php or other. "
My purpose is make data entry to database. first of all, I want to use html for input data. the data input from textbox go to table in html and then I need to submit data in html table to MySQL by using php.
I only understand your words here, , a SMALL amount, I am NOT clear about what you may mean when you say -
"transfer the data in table to MySQL using php or other"
I want insert data to MySQL, the data that will insert is taking from table in html.
ASKER
But I am Not able to see what your PAGE CODE may be for your <table>, I just used a two two column <table> in my example code above. You seem to have run that code, and it worked for you, , because you say - "I want to like this"
I mean it look like this but I need to have one button for insert data from table in html to MySQL
I asked you before, and I will ask again
Can you SHOW us what you have in PHP and - or HTML as the CODE you use for your Page?
If you can please tell us about your saying -
"Note: the data in table can be delete and update."
you have said some about the "update" part, but nothing about the "delete" from <table> part. Is this code you already have? ? Or is this code you need to have help with?
the data entry in web will insert into table in html using javascript. when I entry data, sometime make mistake so I can delete record by click button in each record or click on any cell on table to update by type new word in each cell that want update.
It seems that English is not your first language, if you can, , try and explain more, , and talk more about what you use and know about on your PHP server, especially about the part in your question -
" - Input1(Brand Name): get data from MySQL"
sorry for my English. Please see my code.
can you show us, , or tell us about the PHP code for your MySQL , like -
$mysqli = new mysqli('localhost', 'user', 'password', 'dataBase');
Please check my code.
that you use or know about.
We can not try and help much, if we do not know the parts of your code you may already have written.
Please, check my code.
I mean it look like this but I need to have one button for insert data from table in html to MySQL
I asked you before, and I will ask again
Can you SHOW us what you have in PHP and - or HTML as the CODE you use for your Page?
If you can please tell us about your saying -
"Note: the data in table can be delete and update."
you have said some about the "update" part, but nothing about the "delete" from <table> part. Is this code you already have? ? Or is this code you need to have help with?
the data entry in web will insert into table in html using javascript. when I entry data, sometime make mistake so I can delete record by click button in each record or click on any cell on table to update by type new word in each cell that want update.
It seems that English is not your first language, if you can, , try and explain more, , and talk more about what you use and know about on your PHP server, especially about the part in your question -
" - Input1(Brand Name): get data from MySQL"
sorry for my English. Please see my code.
can you show us, , or tell us about the PHP code for your MySQL , like -
$mysqli = new mysqli('localhost', 'user', 'password', 'dataBase');
Please check my code.
that you use or know about.
We can not try and help much, if we do not know the parts of your code you may already have written.
Please, check my code.
Thanks so much for your PHP code!
I will tell you that when you post Code Work here to always use the experts Code entry, by clicking on the "Code" in the "Post Comment" click options at the top so you get it to show like this -
I will tell you that when you post Code Work here to always use the experts Code entry, by clicking on the "Code" in the "Post Comment" click options at the top so you get it to show like this -
<!DOCTYPE html>
<html lang=en>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>
<?php
echo "Brand";
$connection=mysqli_connect("localhost","root","","imsresearch") or die ("message");
$query="select brandID, brandNameEN from tblbrand order by brandNameEN";
$result=mysqli_query($connection,$query);
if (mysqli_num_rows($result)>0){
echo "<select name=brand id=brand>";
while($row=mysqli_fetch_assoc($result)){
echo "<option value=".$row[brandID].">";
echo $row["brandNameEN"];
echo "</option>";
}
echo "</select>";
}else{
echo "Null";
}
echo "Price";
echo "<input type='text' name='price' id='price'>";
echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
?>
<table id="HTMLTable" border="1">
<thead>
<tr>
<td>Brand</td>
<td>Price</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" value="transfer data from HTML Table to MySQL" id="HTMLtoMySQL">
<script>
$("#AddToHTML").click(function(){
$("#HTMLTable").find("tbody").append("<tr><td>"+ $("#brand").val() + "</td><td>" + $("#price").val() + "</td></tr>");
})
</script>
</body>
</html>
In your original question you say - "by using javascript"
so thats what code work I did in my example, using raw javascript
However in your page code you use JQuery, which is a different coding path, than just using javascript.
I like to code in raw javascript, without using JQuery, because to me, JQuery seems so mixed up and sideways, compared to what I know in javascript. But if you want to work in Jquery, maybe some other expert here, can help you better than me, , but they will probably suggest using, an Add-In like the Jquery DataTables.
so thats what code work I did in my example, using raw javascript
However in your page code you use JQuery, which is a different coding path, than just using javascript.
I like to code in raw javascript, without using JQuery, because to me, JQuery seems so mixed up and sideways, compared to what I know in javascript. But if you want to work in Jquery, maybe some other expert here, can help you better than me, , but they will probably suggest using, an Add-In like the Jquery DataTables.
OK , I remembered that you can add hidden inputs to a form, and, in my view, the way to do this with the least code is to submit a <form> with created hiddens for the table additions -
My version of your code page-
Notice that placed your " transfer data from HTML Table to MySQL " button, in a <form> as a submit input,
it is disabled. When the 'AddToHTML' button is touched, then the javascript adds hidden inputs to the form with-
$("#form1").append('<input
and it makes the submit button active.
I use array "names" for the inputs like "bn[]"
so in your <form> post page which i have as "table2mysql.php" you can get the hidden inputs with -
$brands = $_POST['bn'];
$prices = $_POST['pr'];
both of these should be arrays;
My version of your code page-
<!DOCTYPE html>
<html lang=en><head>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script type="test/javascript" scr="jquery.js"></script>
</head>
<body>
<?php
echo "Brand";
$connection=mysqli_connect("localhost","root","","imsresearch") or die ("message");
$query="select brandID, brandNameEN from tblbrand order by brandNameEN";
$result=mysqli_query($connection,$query);
if (mysqli_num_rows($result)>0){
echo "<select name=brand id=brand>";
while($row=mysqli_fetch_assoc($result)){
echo "<option value=".$row[brandID].">";
echo $row["brandNameEN"];
echo "</option>";
}
echo "</select>";
}else{
echo "Null";
}
echo "Price";
echo "<input type='text' name='price' id='price'>";
echo "<input type='button' name='AddToHTML' value='AddToHTML' id='AddToHTML'>";
?>
<table id="HTMLTable" border="1">
<thead>
<tr>
<td>Brand</td>
<td>Price</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<form id="form1" action="table2mysql.php" method="post">
<input type="submit" name="subForm" id="sub" disabled value=" transfer data from HTML Table to MySQL ">
</form>
<script>
$("#AddToHTML").click(function(){
var brand = $("#brand").val();
var price = $("#price").val();
if (price.length < 1) price = "0.00";
$("#HTMLTable").find("tbody").append("<tr><td>"+ brand + "</td><td>" + price + "</td></tr>");
$("#form1").append('<input type="hidden" name="bn[]" value="'+ brand + '" /><input type="hidden" name="pr[]" value="'+ price + '" />');
$("#sub").removeAttr("disabled");
});
</script>
</body>
</html>Notice that placed your " transfer data from HTML Table to MySQL " button, in a <form> as a submit input,
it is disabled. When the 'AddToHTML' button is touched, then the javascript adds hidden inputs to the form with-
$("#form1").append('<input
and it makes the submit button active.
I use array "names" for the inputs like "bn[]"
so in your <form> post page which i have as "table2mysql.php" you can get the hidden inputs with -
$brands = $_POST['bn'];
$prices = $_POST['pr'];
both of these should be arrays;
ASKER
Dear Expert Slick812,
it is good to use hidden form, how about update (cell) and delete (record) html table?
it is good to use hidden form, how about update (cell) and delete (record) html table?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The good news is that most frameworks are capable of that.
The bad news is that you're going to have a steep learning curve.
Examples:
Yii: http://www.sitepoint.com/build-a-crud-app-with-yii-in-minutes/
Laravel: https://scotch.io/tutorials/simple-laravel-crud-with-resource-controllers
CakePHP: http://www.php-dev-zone.com/2013/08/crud-in-cakephp-part-1.html
HTH,
Dan