Hello Progrramres! I am once again back to you with a new blog post which describe 'How to create a Multi-Row Data Form' with HTML and Java Script and in the coming post I will also describe that how to feed the data with this form in the database with PHP.
Multi-Row data forms are very use full when you are working with Database programs. Let us suppose that we need to create an Invoice Form for a Retail shop where we have to select multi products at a time to create the Bills or Invoices. In this case we need a multi-row data form.
Before starting I would to tell you that you must have the knowledge of HTML and Java Script. So if you are familiar with JS then it might be lot easier to understand the JS script.
Even if you are not enough with Java Script, you can also create the same on your computer just because I have placed the ready to use codes in below snippets.
Now lets Start, you can see HTML code below. Only you have to do what, only create an HTML file with name 'index.html'. Copy below code and paste into 'index.html' file and save it.
HTML Code Section
Now lets move on CSS. Create a folder named 'style' in the same directory where you have created 'index.html'. Inside 'style' folder create a file named 'style.css' and paste the below codes into it and save.
CSS Code Section
Note: Remove the <style> tags when you are pasting this code into '.css' files and then save it.
Now it's time to create Java Script file. To do this first create a folder named 'js' where you have created 'index.html'. Inside 'js' folder create a file named 'script.js' and paste below code into it and save.
JS Code Section
The most important thing is click on the below link to download and unzip the Java Script file for JQuery Function. Place this file into 'JS' folder.
Now when you click the '+' button on the form, a new form row will be added and when you click '-' then that row will be deleted.
In next post we will learn 'How to submit data with this form in PHP and SQL.
Thanks a lot
Chandan Kumar Vishwakarma
https://www.progrramers.com/
https://www.facebook.com/theprogrramers
https://www.facebook.com/groups/progrramers/
Related Topics
Multi-Row data forms are very use full when you are working with Database programs. Let us suppose that we need to create an Invoice Form for a Retail shop where we have to select multi products at a time to create the Bills or Invoices. In this case we need a multi-row data form.
Before starting I would to tell you that you must have the knowledge of HTML and Java Script. So if you are familiar with JS then it might be lot easier to understand the JS script.
Even if you are not enough with Java Script, you can also create the same on your computer just because I have placed the ready to use codes in below snippets.
Now lets Start, you can see HTML code below. Only you have to do what, only create an HTML file with name 'index.html'. Copy below code and paste into 'index.html' file and save it.
HTML Code Section
<!DOCTYPE html>
<html lang = "en-US" ?xml version = "1.0">
<html>
<head>
<title>Multi-Row Data Form</title>
<link rel = 'stylesheet' href = 'css/style.css' type = 'text/css'/>
<script src = 'js/v2.0.2jquery.min.js'></script>
<script src = 'js/script.js'></script>
</head>
<body>
<h1>Multi-Row Data Form</h1>
<p>Click '+' button to Add New Rows.</p>
<p>Click '-' button to Delete the same Row.</p>
<form action = "" method = "post" id = "frm_data">
<table>
<thead>
<th>Sl.</th>
<th>Input-1</th>
<th>Input-2</th>
<th>Input-3</th>
<th>Input-4</th>
<th><input type = "button" value = "+" id = "addnew" title = "Click to Add New Row"/></th>
</thead>
<tbody id = "tbl_body">
<tr>
<td>1</td>
<td><input type = "text" placeholder = "Input-1"/></td>
<td><input type = "text" placeholder = "Input-2"/></td>
<td><input type = "text" placeholder = "Input-3"/></td>
<td><input type = "text" placeholder = "Input-4"/></td>
<td title = "This Row Can't be Deleted"></td>
</tr>
</tbody>
</table>
<input type = "button" value = "Submit" id = "sub_button" title = "Save the Record"/>
</form>
</body>
</html>
Now lets move on CSS. Create a folder named 'style' in the same directory where you have created 'index.html'. Inside 'style' folder create a file named 'style.css' and paste the below codes into it and save.
CSS Code Section
<style> // Remove the style tags while pasting this code into '.css' file
#frm_data th,tr,td {
background:skyblue;
color:darkblue;
text-align:center;
background-color:skyblue;
border-radius:3px;
padding:0px;
}
#frm_data th{
padding:5px;
}
input{
padding:5px;
}
#sub_button{
background-color:skyblue;
border-radius:5px;
}
</style>
Note: Remove the <style> tags when you are pasting this code into '.css' files and then save it.
Now it's time to create Java Script file. To do this first create a folder named 'js' where you have created 'index.html'. Inside 'js' folder create a file named 'script.js' and paste below code into it and save.
JS Code Section
<script>
$(document).ready(function(){
$('#addnew').click(function(){
addnewrow();
});
$('body').delegate('#del_row', 'click', function(){
$(this).parent().parent().remove();
});
});
function addnewrow(){
var n = ($('#tbl_body tr').length - 0) + 1;
var row = '<tr>' +
'<td>' + n + '</td>' +
'<td><input type = "text" placeholder = "Input-1"/></td>' +
'<td><input type = "text" placeholder = "Input-2"/></td>' +
'<td><input type = "text" placeholder = "Input-3"/></td>' +
'<td><input type = "text" placeholder = "Input-4"/></td>' +
'<td><input type = "button" value = "-" id = "del_row" title = "Click to Delete this Row"></td>' +
'</tr>';
$('#tbl_body').append(row);
}
</script>
The most important thing is click on the below link to download and unzip the Java Script file for JQuery Function. Place this file into 'JS' folder.
Download Java Script File
Now when you click the '+' button on the form, a new form row will be added and when you click '-' then that row will be deleted.
In next post we will learn 'How to submit data with this form in PHP and SQL.
Thanks a lot
Chandan Kumar Vishwakarma
https://www.progrramers.com/
https://www.facebook.com/theprogrramers
https://www.facebook.com/groups/progrramers/
Related Topics
download link is not working.
ReplyDeleteGoogle Shortner is expired therefore it is not working...please download the codes from jquery site.
DeleteEither the drive can be conveyed to our office situated in Bangalore or it very well may be gotten and dropped to customer's and client's area (Currently accessible assistance in Lab recuperation in Bangalore area) or individual visit to our office area, other city or nation is upheld by means of dispatch office.data hdd recovery
ReplyDelete