Adding Text Boxes With Javascript

Question

I am working on some code that will add text boxes when a button is pressed. the problems is when i fill out the info in the text box and then click add it deletes the content.

Im complacently new to java script so i don't know where i went wrong. It looks like its all correct to me.

var countBox = 1;
var boxName = 0;

function addInput() {
  var boxName = "textBox" + countBox;
  document.getElementById('responce').innerHTML += 'Opp Code <input type="text" onkeyup="checkvalue(this.id)" value="tes" id="opp_' + boxName + '"> ';
  document.getElementById('responce').innerHTML += 'Item<input type="text" id="dec_' + boxName + '"> ';
  document.getElementById('responce').innerHTML += 'Price<input type="text" id="pri_' + boxName + '"> <br>';
  countBox += 1;
}
document.getElementById('responce').innerHTML += 'total<br><input type="text" id="total"> <br>';

function checkvalue(clicked_id) {
  // var count = countBox - 1;
  var textarea = document.getElementById(clicked_id);
  var n1 = document.getElementById(clicked_id);
  var opp = document.getElementById(clicked_id).value;
  var dec = "dec";
  var pri = "pri";
  var res = clicked_id.substr(3);
  var dec = dec + res;
  var pri = pri + res;

  if (opp == "wv") {
    var description = "Wash & Vac";
    var price = "12.99";
  } else {
    var description = "";
    var price = "";
  }
  document.getElementById(dec).value = description;
  document.getElementById(pri).value = price;
}

<input type="button" value="add" onclick="addInput()">
<p id="demo"></p>
<span id="responce"></span>

when you fill out the first box it should populate the other 2 boxes and then when you press add then there should be 3 more boxes and you should be able to do the same thing.

The content (value) input elements isn't part of the HTML, so ...innerHTML += ... effectively erases the content. — RobG
– RobG, Commented Aug 25, 2019 at 2:08
Better would be to use DOM methods (create and append) rather than innerHTML. — RobG
– RobG, Commented Aug 25, 2019 at 2:12

Christian Carrillo · Accepted Answer · 2019-08-25 02:21:54Z

3

Yo should do it using insertAdjacentHTML function instead of innerHTML, like this:

let countBox =1;
let boxName = 0;
const $responce = document.getElementById('responce')

function addInput() {
  let boxName="textBox"+countBox; 
  let template = ""
  template += 'Opp Code <input type="text" onkeyup="checkvalue(this.id)" value="tes" id="opp_'+boxName+'"> ';

  template += 'Item<input type="text" id="dec_'+boxName+'"> ';

  template += 'Price<input type="text" id="pri_'+boxName+'"> <br>';

  $responce.insertAdjacentHTML('beforeend', template);

  countBox++;

}

// i don't know why this sentence is out of some function
/*document.getElementById('responce').innerHTML += 'total<br><input type="text" id="total"> <br>';*/

function checkvalue(clicked_id) {
  // var count = countBox - 1;
  var textarea = document.getElementById(clicked_id);
  var n1 = document.getElementById(clicked_id);
  var opp = document.getElementById(clicked_id).value;
  var dec = "dec";
  var pri = "pri";
  var res = clicked_id.substr(3);
  var dec = dec + res;
  var pri = pri + res;

  if (opp == "wv") {
    var description = "Wash & Vac";
    var price = "12.99";
  } else {
    var description = "";
    var price = "";
  }
  document.getElementById(dec).value = description;
  document.getElementById(pri).value = price;
}

<input type="button" value="add" onclick="addInput()"/>
<p id="demo"></p>

<span id="responce"></span>

answered Aug 25, 2019 at 2:21

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Carrillo Over a year ago

i'm according that appendChild should be more convenient

Collectives™ on Stack Overflow

Adding Text Boxes With Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related