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 the alert('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

 

Created By team of SUAVEDIGITAL