JavaScript

Richard Deeming16-Feb-17 8:40

16-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

samflex16-Feb-17 9:05

16-Feb-17 9:05

Hi Richard,

You explain it so well. Thank you so much.

Now, I have not used AngularJS before. So, if I have to use your code as is, do I need to install or import any libraries or is it just plug and play?

Also, I went ahead and added name attribute as well like below:

PHP

newTextBox.type = 'text';
newTextBox.setAttribute('id','name','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','name','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','name','income1'+NumOfRow);

Will my php be able to tell that I have say, sourcename1,sourcename2, etc by just adding the name attribute?

I can come up with the php code to grab all the values and insert into the database.

Many thanks,

Richard Deeming16-Feb-17 9:30

16-Feb-17 9:30

The example I posted was using Handlebars.js[^] - you just need to add a reference to the script file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js" integrity="sha256-1O3BtOwnPyyRzOszK6P+gqaRoXHV6JXj8HkjZmPYhCI=" crossorigin="anonymous"></script>

In the template, I've given the fields sequential names, so you'll get sourcename1, sourcename2, etc. Obviously, if the user removes a row, you could get a gap in the sequence. You might want to add a hidden field within each row's <div> with a fixed name, which would then give you the list of IDs to look for in your PHP code:

HTML

<script id="row-template" type="text/x-handlebars-template">
<div>
    <input type="hidden" name="rowIDs" value="{{rowNumber}}" />
    ...
</div>
</script>

<div id="addrow">
    <div>
        <input type="hidden" name="rowIDs" value="1" />
        ...
    </div>
</div>

PHP

$rowIDs = $_POST['rowIDs'];
foreach ($rowIDs as $id) {
    $sourcename = $_POST['sourcename' . $id];
    $sourceaddress = $_POST['sourceaddress' . $id];
    $income = $_POST['income' . $id];
    ...
}

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

samflex16-Feb-17 9:39

16-Feb-17 9:39

You are just so awesome.

I did however, add a reference before this response:

PHP

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

but when I click on the Add More, nothing happens.

I really like this AngularJS because looking at the code, it will ensure that similar textbox styles are maintained but it is not working so far.

The original javascript is adding the three boxes but the styles are completely off.

Richard Deeming16-Feb-17 10:12

16-Feb-17 10:12

You've added a reference to AngularJS. As I said, the example I posted was using Handlebars.

You'll need to remove the Angular reference and add the Handlebars one. If you haven't already included it, you'll also need a reference for jQuery.

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

samflex16-Feb-17 10:27

16-Feb-17 10:27

Oh I see.
Thanks so much sir.

samflex16-Feb-17 10:52

16-Feb-17 10:52

WOW!!!

This is so awesome. Textbox size and styling are maintained. WOW.

Just one last question please sir?

I need to use same Add More to the rest.

In other words, rather than add rest of the control to the AngularJS script, I need to add the Add More button to a few more of the controls within their respective DIV.

For instance, we have added this button to the

with ID of addrow.

Assume that I have another

with ID of addrow1, do just add another handlebars with a separate unique and wrap it around the DIV I need to add the button to?

For instance, this becomes:

PHP

<script id="row-template1" type="text/x-handlebars-template">

etc

Richard Deeming17-Feb-17 2:07

17-Feb-17 2:07

samflex wrote:
AngularJS

Handlebars. Smile | :)

samflex wrote:
Assume that I have another <div> with ID of addrow1, do just add another handlebars with a separate unique and wrap it around the DIV I need to add the button to?

Effectively, yes.

You'll need some way to know which Handlebars template to use, and which <div> to append it to, based on the button that was clicked.

Something like this should work:

HTML

<script id="row-template" type="text/x-handlebars-template">
<div>
    <input type="hidden" name="rowIDs" value="{{rowNumber}}" />
    ...
    <input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>

<div id="addrow" data-row-count="1" data-template-id="row-template">
    <div>
        <input type="hidden" name="rowIDs" value="1" />
        ...
    </div>
</div>

<input type="button" value="Add More" rel="add-row" data-target="addrow" />

...

<script id="row-template-2" type="text/x-handlebars-template">
<div>
    <input type="hidden" name="row2IDs" value="{{rowNumber}}" />
    ...
    <input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>

<div id="addrow2" data-row-count="1" data-template-id="row-template-2">
    <div>
        <input type="hidden" name="row2IDs" value="1" />
        ...
    </div>
</div>

<input type="button" value="Add More" rel="add-row" data-target="addrow2" />

JavaScript

$(function(){
    var templates = {
        "row-template": Handlebars.compile($("#row-template").html()),
        "row-template-2": Handlebars.compile($("#row-template-2").html())
    };
    
    $("form").on("click", "input[rel='add-row']", function(){
        var containerId = $(this).data("target");
        var container = $("#" + containerId);
        
        var templateId = container.data("templateId");
        var template = templates[templateId];
        
        var rowCount = container.data("rowCount");
        rowCount++;
        
        var context = { rowNumber: rowCount };
        var html = template(context);
        container.append(html);
        
        container.data("rowCount", rowCount);
    });
    
    $("form").on("click", "input[rel='remove-row']", function(){
        var row = this.parentNode;
        var container = row.parentNode;
        container.removeChild(row);
    });
});

Here's a quick demo: Edit fiddle - JSFiddle[^]

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

samflex17-Feb-17 2:53

Inheriting a Javascript Prototype for Web Usercontrol

17-Feb-17 2:53

I did it differently yesterday which worked but I will adapt this solution.

It is cleaner and more efficient.

You have been incredibly generous and patient. Thanks so much sir.

It is just not the code you provide but you explain it so well.

Many thanks.

HemeshSoni13-Feb-17 5:27

HemeshSoni

13-Feb-17 5:27

I have a Web user control with its Javascript code in a JS file. Here is the code in the JS File.

JavaScript

function CtrlColor() {}

CtrlColor.prototype = {
  Change: function() {
    if (Category == '1') {
      this.pnlSearchClientID.style.backGroundColor = 'Red';
    } else {
      this.pnlSearchClientID.style.backGroundColor = 'Blue';
    }
  }
};

The User Control has a Panel whose color i want to change from a Page. Here is the User Control:

ASP.NET

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlName.ascx.vb" Inherits="MultiInstanceControl.CtrlName" %>
<asp:Panel ID="pnlSearch" runat="server" Style="background-color: yellow;width: 30px;height: 30px;"></asp:Panel>
<script type="text/javascript" src="CtrlNameJS.js"></script>

<script type="text/javascript">
    function CtrlName <%= me.ClientID %> () {
        this.pnlSearchClientID = <%= pnlSearch.ClientID %> ;
    }

    CtrlName <%= me.ClientID %> = CtrlColor.prototype;
</script>

Category is a Server Side property of the Web Control, which I set in the Markup of the page.

In the Page I have 2 Instances of the above Web user Control.

ASP.NET

<form id="form1" runat="server">
       <div> 1. First Instance
           <uc1:CtrlName ID="CtrlName1" IsMultipleFile="false" Category="1" runat="server" />
           <asp:Button runat="server" ID="btnTest1" Text="Get Value" OnClientClick="return btnTest_ClientClick('1');" />
           <br /> 2. Second Instance
           <uc1:CtrlName ID="CtrlName2" IsMultipleFile="false" Category="2" runat="server" />
           <asp:Button runat="server" ID="Button2" Text="Get Value" OnClientClick="return btnTest_ClientClick('2');" />

       </div>
       <script type="text/javascript">
           var inst1 = null;
           var inst2 = null;


           inst1 = new CtrlName<%= CtrlName1.ClientID %> ();
           inst2 = new CtrlName<%= CtrlName2.ClientID %> ();


           function btnTest_ClientClick(strVal) {
               if (strVal == '1') {
                   inst1.Change();
               } else {
                   inst2.Change();
               }
               return false;
           }
       </script>
   </form>

When I execute this, it throws an error:

CtrlNameCtrlName1 is not a constructor
at this line

inst1 = new CtrlName<%=CtrlName1.ClientID %>();

Any suggestion where I am going wrong?

Re: Inheriting a Javascript Prototype for Web Usercontrol

Richard Deeming13-Feb-17 8:06