CODEWITHSUNDEEP
javascriptjqueryhtmlcss
shihabmohamed
shihabmohamed

Reputation: 23

how dynamically add new button by javascript

I have two textboxes and one button, I want to add one new textfield, that should show card name from textbox1 and Link URL append from textbox2 when I click on button

//AddnNewCardNavigator
var counter=2;
var nmecardtxt= document.getElementById("textbox1").value;
var linkurltxt= document.getElementById("textbox2").value;
$("#addbutton").click(function(){
  if(nmecardtxt ==""||nmecardtxt ==0||nmecardtxt ==null 
  && linkurltxt ==""||linkurltxt ==""|| linkurltxt ==0||linkurltxt ==null){
    alert("Please insert value in Card name and Link Url textboxes and must be correct");
    return false;
  }
var NewCarddiv = $(document.createElement('div')).attr("id",'cardlink'+counter);
NewCarddiv.after().html()
})
</script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
  <div id="textboxesgroup">
    <div id="textboxdiv1">
      <label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
    </div>
    <div id="textboxdiv2">
      <label style="color:blanchedalmond">Link Url:&ensp;&ensp;&ensp; </label><input type="textbox" id="textbox2">
    </div>
  </div>
</div>
</div>

Upvotes: 1

Views: 101

Answers (2)

Takit Isy
Takit Isy

Reputation: 10081

Your variables nmecardtxt and linkurltxt must be created inside the click function,
because it's empty at the loading of the page.

I also took the liberty to use jQuery for that variables, as you're already using it, and tried to enhance some other things:
(See comments in my code for details)

//AddnNewCardNavigator
var counter = 2;

// On click function
$("#addbutton").click(function() {

  // Here it's better
  var nmecardtxt = $("#textbox1").val(); 
  var linkurltxt = $("#textbox2").val();

  // Modified you test here
  if (!nmecardtxt || !linkurltxt) {
    alert("Please insert value in Card name and Link Url textboxes and must be correct");
    return false;
  }
  
  // Modified creation of the card
  var link = $(document.createElement('a')).attr("href", linkurltxt).html(linkurltxt);
  var NewCarddiv = $(document.createElement('div')).attr("id", 'cardlink' + counter).html(nmecardtxt + ": ").append(link);
  $('#cards').append(NewCarddiv);
  //NewCarddiv.after().html(); // Was that line an attempt of the above ?
});
body {
  background: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- text boxes-->
<div class="row">
  <div class="col-md-12">
    <div id="textboxesgroup">
      <div id="textboxdiv1">
        <label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
      </div>
      <div id="textboxdiv2">
        <label style="color:blanchedalmond">Link Url:&ensp;&ensp;&ensp;</label><input type="textbox" id="textbox2">
      </div>
    </div>
  </div>
</div>

<!-- Added the below -->
<div id="cards">
</div>
<button id="addbutton">Add…</button>

Hope it helps.

Upvotes: 1

Kodie Grantham
Kodie Grantham

Reputation: 2032

Here's a simplified version of what you're trying to accomplish:

function addNewCard() {
  var name = $('#name').val();
  var url = $('#url').val();
  var count = $('#cards > .card').length;
  
  if (!name || !url) {
    alert('Missing name and/or URL.');
  }
  
  var card = $('<div class="card"></div>').html("Name: " + name + "<br>URL: " + url);
  
  $("#cards").append(card);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="url">URL:</label>
<input type="text" id="url" name="url">
<input type="submit" value="Add Card" onclick="addNewCard();">

<div id="cards">
</div>

Upvotes: 0

Related Questions