CODEWITHSUNDEEP
javascripthtmlcss
Ankit Kumar
Ankit Kumar

Reputation: 403

How to show entered data in other div?

I have to enter data one by one and after hit ADD BUTTON data should be added and shown to other div. I am using html,*css* and javascrit. same like shopping sites i.e. One by one we add product and it appears in cart.

I am new to web designing, please help.

Upvotes: 0

Views: 77

Answers (2)

alberto-bottarini
alberto-bottarini

Reputation: 1231

This could be first demo to be used to learn

<div id="console"></div>
<input id="input" type="text">

<button id="trigger">Click me!</button>

<script>
document.getElementsById("trigger").onclick = function() {
  document.getElementById("console").innnerHTML = document.getElementById("input").value;
}

</script>

Upvotes: 0

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28528

Here is working demo

Html:

<a href="#" class="design_button add">Click here to add Product</a>
<div id="this_div_contains_settings"></div>

jquery:

$(function(){
   var number = 1;
   $('a.add').click(function(e){
      e.preventDefault();
      $('#this_div_contains_settings').append('<div id="settings'+number+'">Product Item.<a href="#" class="design_button">Remove this Product</a></div>');
      number++;
   });
   $('#this_div_contains_settings').on('click','a.design_button', function(e){
      e.preventDefault();
      $(this).parent().remove();
   });
});

Upvotes: 1

Related Questions