CODEWITHSUNDEEP
javascriptjqueryhtmldomdynamic
Fabio Zanchi
Fabio Zanchi

Reputation: 945

Create paragraphs with dynamic ID and value from inputs

I'm creating two paragraphs from two inputs but I can't put the content from the input into the paragraph.

Here is the code:

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control custom-input-form" id="name" placeholder="Name">
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="form-group">
        <div class="input-group">
          <input type="number" class="form-control my-ip" id="number" placeholder="Name">
        </div>
      </div>
      <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button>
    </div>
  </div>
</form>

<div class="row">
  <div class="col-6" id="new-names">
  </div>
  <div class="col-6" id="new-numbers">
  </div>
</div>

JS

var countName = 0;
var countNumber = 0;

$('#add-new').on('click', function(e) {
    e.preventDefault();
    $('#new-names').append('<p id="new-name-'+countName+'"></p>');
    countName++;
    $('#new-numbers').append('<p id="new-number-'+countNumber+'"></p>');
    countNumber++;

  $('#"new-name'+countName+'"').text($('#name').val()); 
  $('#"new-number'+countNumber+'"').text($('#number').val());

});

I also created on simple Codepen with the code: https://codepen.io/fabiozanchi/pen/PJyeap

Thanks!

Upvotes: 0

Views: 221

Answers (2)

dhilt
dhilt

Reputation: 20744

Try following:

var countName = 0;
var countNumber = 0;

$('#add-new').on('click', function(e) {
    e.preventDefault();
    $('#new-names').append('<p id="new-name-' + (countName++) + '">' + $('#name').val() + '</p>');
    $('#new-numbers').append('<p id="new-number-' + (countNumber++) + '">' + $('#number').val() + '</p>');
});

Try to make as minimal interactions with DOM as possible. Two .append and two .val calls are enough here.

Upvotes: 1

Zakky
Zakky

Reputation: 139

Codepen

Here is what I have done:

  1. Fixed some syntax on lines 12 and 13.

ORIGINAL

$('#"new-name'+countName+'"').text($('#name').val()); 
$('#"new-number'+countNumber+'"').text($('#number').val());

NEW 

$('#new-name'+countName).text($('#name').val()); 
$('#new-number'+countNumber).text($('#number').val());

  1. I added '+$('#name').val()+' to line 7 and '+$('#number').val()+' to line 9, between the p tags.

  2. I also changed the placeholder text of your number field. All seems to work fine.

Notes

Aside from some syntax errors, I didn't notice any major issues.

New Code

HTML

<form id="ip-form" class="custom-form wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
  <div class="row">
    <div class="col-6">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control custom-input-form" id="name" placeholder="Name">
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="form-group">
        <div class="input-group">
          <input type="number" class="form-control my-ip" id="number" placeholder="Number">
        </div>
      </div>
      <button type="submit" class="btn btn-gray no-side-margin float-right" id="add-new">Add</button>
    </div>
  </div>
</form>

<div class="row">
  <div class="col-6" id="new-names">
  </div>
  <div class="col-6" id="new-numbers">
  </div>
</div>

JavaScript

var countName = 0;
var countNumber = 0;

$('#add-new').click(function(e) {

    e.preventDefault();
    $('#new-names').append('<p id="new-name-'+countName+'">'+$('#name').val()+'</p>');
    countName++;
    $('#new-numbers').append('<p id="new-number-'+countNumber+'">'+$('#number').val()+'</p>');
    countNumber++;

  $('#new-name'+countName).text($('#name').val()); 
  $('#new-number'+countNumber).text($('#number').val());

});

Upvotes: 1

Related Questions