Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to append the data of an input box to another div

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 248
    Comment on it

    Suppose we want to add the content of different elements in a single element, we use append for that.

    Below is the example which will append the text of an input into a div.

    HTML- 

              <div class="aside_header" id="sentence_addable">
                           
                           <div class="">
                             <button class="right_edit_btn">Click here to append data</button>
                           </div>
                           <div class="content1">
                             <input type="text" class="sentence_input1" id="sentence_input1">
                           </div>
                           <div class="col-md-2">
                             <input type="text" class="sentence_input2" id="sentence_input2">
                           </div>
                                
                </div>
                              
                       
                     <div id="add_sentenceDiv"></div>

    CSS-

    .aside_header{border: 1px solid #ccc; margin: 15px 10px;padding: 10px; border-radius: 5px; width: 50%; margin: 0 auto;}
    .aside_header div >div{padding-right: 0;}
    .aside_header div >div p{word-break: break-all;}
    .aside_header div >div:last-child{padding-right: 10px; padding-left: 5px;}
    .aside_header div > input{width: 100%; background-color: #E1E1E1; border: none; height: 35px;}
    .right_edit_btn{height: 40px; max-width: 100%; padding: 0;}
    .right_edit_btn img{max-height: 100%; max-width: 100%;}
    .content1{padding: 5px 0;}

    JQUERY-

    $(document).ready(function(){
        $('.right_edit_btn').click(function() { 
          var input_Sentence1 = document.getElementById('sentence_input1').value.trim();
          var input_Sentence2 = document.getElementById('sentence_input2').value.trim();
          if (input_Sentence1 !=="" &&  input_Sentence2 !=="" ) {
              $("#add_sentenceDiv").append('<div class="aside_header"><div class="content1"><p>'+input_Sentence1+'</p></div><div class="content2"><p>'+input_Sentence2+'</p></div></div></div>');  
              $("#sentence_input1").val("");
              $("#sentence_input2").val("");
           }
            
        });
     });
     

    https://jsfiddle.net/ur23jwfs/1/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: