CODEWITHSUNDEEP
javascriptjqueryhtmldom
Goper Leo Zosa
Goper Leo Zosa

Reputation: 1283

Get all contents of div including new inputs

I have a div which have 3 inputs:

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">
  </div>
</div>

the result of num1 is added to num2 and put in the total textbox. I use this to add 

$( "#calculate" ).on( "click", function() {
            num1 = $("#num1").val();
            num2 = $("#num2").val();
            total = parseInt(num1) + parseInt(num2);
            $("#total").val(total);
    });

I use this code to get the html contents:

var cont = $('.getThis').html();

but it only gets the content not the values of textbox included like this Title

<div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">

I want the result is should be: Title

<div>ID</div>
  <div>Name</div>
  <p>Content here....</p>
  <input type="text" id="num1" value="OfWhatIInput"> + 
  <input type="text" id="num2" value="OfWhatIInput"> = 
  <input type="text" id="total" value="OfWhatIsTheResult">

Upvotes: 0

Views: 105

Answers (5)

Sabyasachi Mishra
Sabyasachi Mishra

Reputation: 1749

I have done this by using keyup event. Any changes in your input will reflect directly in your sum.

I did some changes by adding class="demo" on your input style

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" class="demo" id="num1"> + 
    <input type="text" class="demo" id="num2"> = 
    <input type="text" id="total">
  </div>
</div>

Your JS

$(document).ready(function(){
  $(".demo" ).keyup(function() {
     var textInput1 = $('#num1').val();
     var textInput2 = $('#num2').val();
     var total = parseInt(textInput1) + parseInt(textInput2); 
    //erase parseInt and check srting input addition
     $('#total').val(total);
  });
});

Also you can find solution here https://jsfiddle.net/zfb37pfp/2/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

I think 1 hack is to

$('button').click(function() {
  var cont = $('.getThis').clone().find('input:text').attr('value', function() {
    return this.value;
  }).end().html();
  snippet.log(cont)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1" />+
    <input type="text" id="num2" />=
    <input type="text" id="total" />
  </div>
</div>
<button>Test</button>

Upvotes: 0

Amit Shah
Amit Shah

Reputation: 1380

To get the values of the text boxes, you need to use the way mentioned.

var num1 = $('#num1').val();
var num2 = $('#num2').val();
var total = $('#num1').val()+$('#num2').val();
$('#total').val(total);

Try complete example as given below:

<div class="excelPreview">
  <a href="#" id="getContent" class="btn btn-primary">get</a>
  <a href="#" id="calculate" class="btn btn-primary">calculate</a>
  <div class="getThis">
    Title
    <div>ID</div>
    <div>Name</div>
    <p>Content here....</p>
    <input type="text" id="num1"> + 
    <input type="text" id="num2"> = 
    <input type="text" id="total">
    <input type="button" name="click" id="click" onclick="a()">
  </div>
  <script src="http://x.dpstatic.com/j/jquery/jquery-1.11.0.min.js"></script>
  <script>
  function a(){
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        var total = parseInt($('#num1').val())+parseInt($('#num2').val());
        $('#total').val(total);
}
  </script>

Let me know if more information needed.

Thanks Amit

Upvotes: 0

Nithin Krishnan P
Nithin Krishnan P

Reputation: 758

var sum=$('#num2).val()+$('#num2).val();
$('#total).val(sum);

Upvotes: 0

Sougata Bose
Sougata Bose

Reputation: 31749

You can use clone. clone will copy the whole div with all the events also.

$('#getContent').on('click', function() {
  var cont = $('.getThis').clone(true);
  $(".excelPreview").append(cont);
})

Fiddle

Upvotes: 2

Related Questions