Click here to Skip to main content
15,888,113 members
Home / Discussions / JavaScript
   

JavaScript

 
GeneralRe: Download images from bing to use without internet connection Pin
Member 1301427820-Feb-17 23:49
Member 1301427820-Feb-17 23:49 
AnswerRe: Download images from bing to use without internet connection Pin
ZurdoDev21-Feb-17 2:01
professionalZurdoDev21-Feb-17 2:01 
Questionangular-cli chrome extension bootstrap from many .html Pin
JulioGold19-Feb-17 8:29
JulioGold19-Feb-17 8:29 
Questionremoving duplicates from array in order to use regex to find match. returning null Pin
Member 1299542016-Feb-17 16:26
Member 1299542016-Feb-17 16:26 
AnswerRe: removing duplicates from array in order to use regex to find match. returning null Pin
Nathan Minier17-Feb-17 1:31
professionalNathan Minier17-Feb-17 1:31 
QuestionAJAX request for photos Pin
Member 1300611016-Feb-17 11:06
Member 1300611016-Feb-17 11:06 
QuestionDynamically add row by DIV(SOLVED) Pin
samflex16-Feb-17 5:46
samflex16-Feb-17 5:46 
AnswerRe: Dynamically add row by DIV Pin
Richard Deeming16-Feb-17 8:40
mveRichard Deeming16-Feb-17 8:40 
samflex wrote:
However, when I click the ADD button, it adds just one textbox.

Because you're only adding one textbox:

samflex wrote:
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.setAttribute('id','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','income1'+NumOfRow);
...
newDiv.appendChild(newTextBox);

Setting the id attribute on the one element three times doesn't magically turn it into three elements. Smile | :)

This looks like the sort of thing where AngularJS[^] or Handlebars.js[^] would probably help.

For example, using Handlebars:
HTML
<script id="row-template" type="text/x-handlebars-template">
<div>
    <div class="form-group">
        <label for="sourcename{{rowNumber}}">Name</label><br>
        <input type="text" style="width:250px;" class="form-control" name="sourcename{{rowNumber}}" id="sourcename{{rowNumber}}" placeholder="Name of income source...">
    </div>
    <div class="form-group">
        <label for="sourceaddress{{rowNumber}}">Address</label><br>
        <input type="text" style="width:250px;" class="form-control" name="sourceaddress{{rowNumber}}" id="sourceaddress{{rowNumber}}" placeholder="Address of income source">
    </div>
    <div class="form-group">
        <label for="income{{rowNumber}}">Income</label><br>
        <input type="text" style="width:250px;"  class="form-control" name="income{{rowNumber}}" id="income{{rowNumber}}" placeholder="income...">
    </div>
    <input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>

<div id="addrow">
    <div>
        <div class="form-group">
           <label for="sourcename1">Name</label><br>
           <input type="text" style="width:250px;" class="form-control" name="sourcename1" id="sourcename1" placeholder="Name of income source...">
        </div>
        <div class="form-group">
            <label for="sourceaddress1">Address</label><br>
            <input type="text" style="width:250px;" class="form-control" name="sourceaddress1" id="sourceaddress1" placeholder="Address of income source">
        </div>
        <div class="form-group">
            <label for="income1">Income</label><br>
            <input type="text" style="width:250px;" class="form-control" name="income1" id="income1" placeholder="income...">
        </div>
    </div>
</div>
<input type="button" value="Add More" rel="add-row" />

JavaScript
$(function(){
    var rowCount = 1;
    var rowSource = $("#row-template").html();
    var rowTemplate = Handlebars.compile(rowSource);
    
    $("form").on("click", "input[rel='add-row']", function(){
        rowCount++;
        var context = { rowNumber: rowCount };
        var html = rowTemplate(context);
        $("#addrow").append(html);
    });
    
    $("form").on("click", "input[rel='remove-row']", function(){
        var addrow = document.getElementById('addrow');
        addrow.removeChild(this.parentNode);
    });
});




"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer


GeneralRe: Dynamically add row by DIV Pin
samflex16-Feb-17 9:05
samflex16-Feb-17 9:05 
GeneralRe: Dynamically add row by DIV Pin
Richard Deeming16-Feb-17 9:30
mveRichard Deeming16-Feb-17 9:30 
GeneralRe: Dynamically add row by DIV Pin
samflex16-Feb-17 9:39
samflex16-Feb-17 9:39 
GeneralRe: Dynamically add row by DIV Pin
Richard Deeming16-Feb-17 10:12
mveRichard Deeming16-Feb-17 10:12 
GeneralRe: Dynamically add row by DIV Pin
samflex16-Feb-17 10:27
samflex16-Feb-17 10:27 
GeneralRe: Dynamically add row by DIV Pin
samflex16-Feb-17 10:52
samflex16-Feb-17 10:52 
GeneralRe: Dynamically add row by DIV Pin
Richard Deeming17-Feb-17 2:07
mveRichard Deeming17-Feb-17 2:07 
GeneralRe: Dynamically add row by DIV Pin
samflex17-Feb-17 2:53
samflex17-Feb-17 2:53 
QuestionInheriting a Javascript Prototype for Web Usercontrol Pin
HemeshSoni13-Feb-17 5:27
HemeshSoni13-Feb-17 5:27 
AnswerRe: Inheriting a Javascript Prototype for Web Usercontrol Pin
Richard Deeming13-Feb-17 8:06
mveRichard Deeming13-Feb-17 8:06 
GeneralRe: Inheriting a Javascript Prototype for Web Usercontrol Pin
HemeshSoni13-Feb-17 17:18
HemeshSoni13-Feb-17 17:18 
AnswerRe: Inheriting a Javascript Prototype for Web Usercontrol Pin
HemeshSoni13-Feb-17 17:25
HemeshSoni13-Feb-17 17:25 
Questionmvc app with angular not working in IIS on 80 port Pin
Member 1103130413-Feb-17 0:17
Member 1103130413-Feb-17 0:17 
AnswerRe: mvc app with angular not working in IIS on 80 port Pin
Nathan Minier13-Feb-17 0:54
professionalNathan Minier13-Feb-17 0:54 
GeneralRe: mvc app with angular not working in IIS on 80 port Pin
Member 1103130413-Feb-17 1:04
Member 1103130413-Feb-17 1:04 
GeneralRe: mvc app with angular not working in IIS on 80 port Pin
Nathan Minier13-Feb-17 1:27
professionalNathan Minier13-Feb-17 1:27 
GeneralRe: mvc app with angular not working in IIS on 80 port Pin
Member 1103130413-Feb-17 2:02
Member 1103130413-Feb-17 2:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.