Hi, Here i want to explain you about jquery append that i modify to use with form , i create the function where you can create the form and in the form there is a text field and textarea and surelly submit button,
and what the difference ? , the normally form will bring you to another page or reload the page when the form is submitted , but with this function you can temporary save your textfield and textarea without move to another page or reload the page
How it’s work ? Here i give you the main codes
HTML
<div class="container"> <table> <tbody id="tablebody"> <tr> <td class="content"> <div class="AppendedContainer"> <!-- Appended content will be in here--> </div> <div class="form"> <div class="title">Title</div> <input type="text" class="input-text"> <div class="content">Content</div> <textarea class="input-textarea"></textarea> <div class="a"> <button type="button" class="add-button" href="javascript:void(0)" id="add">Add</button> <button type="button" class="remove-button" href="javascript:void(0)" id="remove">Clear</button> </div> </div> </td> </tr> </tbody> </table> </div>
in here there is the form inside the table and div , inside the form there is textfield , textarea , and surely submit and clear button , and when you input some text in textfield and textarea and submit it , the page still reload right ?, and then add this javascript to bottom of your page
JavaScript
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i = 1;
var inpt = $('.input-text').val();
var text = $('.input-textarea').val();
$('#add').click(function() {
if ( $('.input-text').val() == '' ){
alert('The field is empty');
}
else {
if (i > 5 ) {
alert('You just can input 5 Contents');
}
else {
$('.AppendedContainer').append('<div class="AppendedContent"><div class="title">' + $('.input-text').val() + '</div> <div class="text">' + $('.input-textarea').val() + '</div></div>');
$('.input-text').val('');
$('.input-textarea').val('');
i++;
return false;
}
}
});
$(document).on('click', '#remove' , function() {
$('.AppendedContent' ).remove();
$i=0;
return false;
});
</script>
now try to input some data in textfield and textarea and submit it, Yes! the page not reloaded now and the data saved and displayed temporary to the page , now leave the textfield and textarea empty and then click submit again , oops you cannot leave it empty , try again to submit data more than 5 data , what the effect ? yes you cannot submit more than 5 data
how it’s can happen ?
Ok , i will explain that
first, you ever read about jquery append ? , you can check this for understanding what is jquery append :https://api.jquery.com/append/
in here the .append function is to append(add) the content which you inputted to textfield and textarea to div with have class .AppendedContainer
$('.AppendedContainer').append('<div class="AppendedContent"><div class="title">' + $('.input-text').val() + '</div> <div class="text">' + $('.input-textarea').val() + '</div></div>');
the $(‘.input-text’).val() is your textfield value and $(‘.input-textarea’).val() is your textarea value
and why i cannot leave the textfield blank
if ( $('.input-text').val() == '' ){
alert('The field is empty');
}
here , look at the $(‘.input-text’).val() == ” , yes if you leave the textfield empty or ” in if conditions. you will get alert(‘The field is empty’); message
and then why i cannot submit more than 5 data ,
in here i have limitation that limit the user for submit data , i add this to avoid spamming ,
here the code
var i = 1; is the sum of appended content , and
if (i > 6 ) {
alert('You just can input 5 Contents');
}
if the appended content or i more than 5 , it will show you thealert(‘You just can input 5 Contents’); message
ok , i have explain that , but if you think your form still ugly with out the style , i give you the css with my favorite style type , flat style
CSS
body {
font-family: Helvetica, Arial, sans-serif;
color: #34495e;
}
.container {
width: 500px;
background-color: #eff0f2;
margin: 0 auto;
padding: 20px;
}
.content .form {
width: 480px;
}
.content .form input {
border: 2px solid #bdc3c7;
color: #34495e;
font-size: 15px;
padding: 8px 12px;
-webkit-appearance: none;
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
}
.content .form textarea {
border: 2px solid #bdc3c7;
color: #34495e;
font-size: 15px;
padding: 8px 12px;
-webkit-appearance: none;
border-radius: 6px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-bottom: 10px;
width: 100%;
}
.content .form input:focus {
border: 2px solid #3498DB;
outline: none;
}
.content .form textarea:focus {
border: 2px solid #3498DB;
outline: none;
}
.content .form .title,.content {
color: #6b6a63;
font-size: 14px;
padding-bottom: 5px;
}
.content .form .content {
padding-top: 10px;
}
.add-button {
position: relative;
vertical-align: top;
width: 100%;
padding: 5px;
font-size: 14px;
text-decoration: none;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
background: #01afd1;
border: 0;
border-bottom: 2px solid #0699b6;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #0699b6;
box-shadow: inset 0 -2px #0699b6;
width: 100px;
}
.remove-button {
position: relative;
vertical-align: top;
width: 100%;
padding: 5px;
font-size: 14px;
text-decoration: none;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
background: #e74c3c;
border: 0;
border-bottom: 2px solid #c0392b;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #c0392b;
box-shadow: inset 0 -2px #c0392b;
width: 100px;
}
.add-button:active,.remove-button:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.AppendedContent .title{
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
}
.AppendedContent {
border-bottom: 1px solid #bdc3c7;
padding-bottom: 20px;
margin-bottom: 20px;
}
.separator {
border-bottom: 1px solid #bdc3c7;
margin-bottom: 20px;
margin-top: 20px;
}
.author {
font-size: 12px;
margin: 0 auto;
margin-top: 15px;
text-align: center;
color: #34495e;
}
Look at the DEMO HERE
And download for Free HERE
