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

JavaScript

 
AnswerRe: Download images from bing to use without internet connection Pin
OriginalGriff20-Feb-17 23:44
mveOriginalGriff20-Feb-17 23:44 
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 
Greetings mates.

This is really a jQuery question but since is integrated with classic asp, it could be deleted if I post it on jquery for asp.net forum, hence here.

I am building a questionnaire (sort of) form and some of responses might require additional textboxes.

As a result, we are trying to use jquery or just regular JavaScript to give participants the opportunity to add additional rows to each div should they wish to.

So far, the simple JavaScript I am using is not working.

For instance, I have a div with ID of "addrow". with an ADD button next to that div.

Our expectation is that if the participant clicks that ADD button, the textboxes inside that div should be cloned to as many rows as they wish.

However, when I click the ADD button, it adds just one textbox.

Can someone please help?

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Questionnaires</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
    .bs-example{
    	margin-left: 250px;
    	margin-top: 30px;
    }
</style>
 <script type="text/javascript">

         var NumOfRow = 1;

         function Button1_onclick(){
             NumOfRow++;

             // get the refference of the main Div
             var addrow = document.getElementById('addrow');

             // create new div that will work as a container
             var newDiv = document.createElement('div');
             newDiv.setAttribute('id','innerDiv'+NumOfRow);

             //create span to contain the text
             var newSpan = document.createElement('span');
             newSpan.innerHTML = "Complete the following";

             // create new textbox for email entry
             var newTextBox = document.createElement('input');
             newTextBox.type = 'text';
             newTextBox.setAttribute('id','sourcename1'+NumOfRow);
             newTextBox.setAttribute('id','sourceaddress1'+NumOfRow);
             newTextBox.setAttribute('id','income1'+NumOfRow);
             // create remove button for each of the controls
             var newButton = document.createElement('input');
             newButton.type = 'button';
             newButton.value = 'Remove';
             newButton.id = 'btn'+NumOfRow;

             // atach event for remove button click
             newButton.onclick = function RemoveEntry() {
                 var addrow = document.getElementById('addrow');
                 addrow.removeChild(this.parentNode);
             }

             // append the span, textbox and the button
             newDiv.appendChild(newSpan);
             newDiv.appendChild(newTextBox);
             newDiv.appendChild(newButton);

             // finally append the new div to the addrow div
             addrow.appendChild(newDiv);

         }
     </script>
</head>
<body>
<div class="bs-example">
    <form class="form-inline" action="process.asp" role="form">
        <div class="form-group">
            <label  for="employeename">Employee Name</label><br>
            <input type="text" style="width:375px;" class="form-control" name="employeename" id="employeename" placeholder="Employee name...">
        </div>
        <div class="form-group">
            <label for="ttitle">Title</label><br>
            <input type="text" style="width:375px;" class="form-control" name="ttitle" id="ttitle" placeholder="Title...">
        </div><br><br><br>
       <div id="addrow">
        <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><input id="Button1" type="button" value="Add More" onclick="Button1_onclick()" /> <br><br><br>
        <div class="form-group">
            <label for="spousename">Name</label><br>
            <input type="text" style="width:250px;" class="form-control" name="spousename" id="spousename" placeholder="Spouse Name...">
        </div>
        <div class="form-group">
            <label for="spouseAddress">Address</label><br>
            <input type="text" style="width:250px;" class="form-control" name="spouseAddress" id="spouseAddress" placeholder="Address of income source...">
        </div>
        <div class="form-group">
            <label for="spouseIncome">Income</label><br>
            <input type="text" style="width:250px;"  class="form-control" name="spouseIncome" id="spouseIncome" placeholder="Income...">
        </div><br><br><br>
        <div class="form-group">
            <label for="dividentname">Name</label><br>
            <input type="email" style="width:250px;" class="form-control" name="dividentname" id="dividentname" placeholder="Divident name...">
        </div>
        <div class="form-group">
            <label for="dividentaddress">Address</label><br>
            <input type="text" style="width:250px;" class="form-control" name="dividentaddress" id="dividentaddress" placeholder="Address of divident...">
        </div>

        <div class="form-group">
            <label for="dividentAmt">Divident Amount</label><br>
            <input type="text" style="width:250px;"  class="form-control" name="reimbursmentName" id="reimbursmentName" placeholder="Divident amount...">
        </div><br><br><br>
         <div class="form-group">
            <label for="reimbursmentName">Name</label><br>
            <input type="text" style="width:250px;" class="form-control" name="reimbursmentName" id="reimbursmentName" placeholder="Reimbursement name...">
        </div>
        <div class="form-group">
            <label for="reimburseAddr">Address of Reimbursement</label><br>
            <input type="password" style="width:250px;" class="form-control" name="reimburseAddr" id="reimburseAddr" placeholder="Reimbursement Address...">
        </div>
        <div class="form-group">
            <label for="remursementAmt">Reinbursement Amount</label><br>
            <input type="text" style="width:250px;"  class="form-control" name="remursementAmt" id="remursementAmt" placeholder="Remursement Amount">
        </div><br><br><br>
        <div class="form-group">
          <label for="inputHonoraria">Honoraria</label><br>
          <input type="text" style="width:250px;" class="form-control" name="inputHonoraria" id="inputHonoraria" placeholder="Honoraria from a single source...">
        </div>
        <div class="form-group">
         <label for="giftname">Name</label><br>
          <input type="text" style="width:250px;" class="form-control" name="giftname" id="giftname" placeholder="Gift name...">
        </div>
        <div class="form-group">
           <label for="giftaddress">Gift Address</label><br>
           <input type="text" style="width:250px;"  class="form-control" name=giftaddress" id="giftaddress" placeholder="Address of gift...">
        </div><br><br><br>
        <div class="form-group">
            <label for="giftamount">Gift Amount</label><br>
            <input type="text" style="width:250px;" class="form-control" name=giftamount" id="giftamount" placeholder="Gift amount...">
        </div>
        <div class="form-group">
            <label for="orgname">Name of Organization</label><br>
            <input type="text" style="width:250px;" class="form-control" name="orgname" id="orgname" placeholder="Name of organization...">
        </div>
        <div class="form-group">
            <label for="orgaddresss">Address of Organization</label><br>
            <input type="text" style="width:250px;"  class="form-control" name="orgaddresss" id="orgaddresss" placeholder="Address of organization...">
        </div><br><br><br>
        <div class="form-group">
            <label for="creditorname">Name of Creditor</label><br>
            <input type="text" style="width:250px;" class="form-control" name="creditorname" id="creditorname" placeholder="Name of creditor...">
        </div>
        <div class="form-group">
            <label for="creditoraddress">Address of creditor</label><br>
            <input type="text" style="width:250px;" class="form-control" name="creditoraddress" id="creditoraddress" placeholder="Address of creditor...">
        </div>
        <div class="form-group">
            <label for="creditAmt">Credit Amount</label><br>
            <input type="text" style="width:250px;"  class="form-control" name="creditAmt" id="creditAmt" placeholder="Credit Amount...">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br>
</div>
</body>
</html>


Many thanks for your help.

modified 17-Feb-17 8:55am.

AnswerRe: Dynamically add row by DIV Pin
Richard Deeming16-Feb-17 8:40
mveRichard Deeming16-Feb-17 8:40 
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 

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.