How to add cssclass to dynamic textbox created by javascript

Question

4.00/5 (1 vote)

See more:

JavaScript

$("#btnAdd").bind("click", function () {
                 var div = $("<div />");
                 div.html(GetDynamicTextBox("", ""));
                 $('ContactName').addClass('form-control has-ns');
                 
                 $("#TextBoxContainer").append(div);
                 return false;
             });
             $("body").on("click", ".remove", function () {
                 $(this).closest("div").remove();

             });
         });
         function GetDynamicTextBox(valuename, valueemail) {


             return '<input name = "ContactName" type="text" value = "' + valuename + '" /> ' + '<input name = "ContactEmail" type="text" value = "' + valueemail + '" /> ' +
           '<input type="button" value="Remove" class="remove" />'

What I have tried:

$('ContactName').addClass('form-control has-ns');
to this line i want to add css class but its not showing on my textbox.please help!

Posted 7-Jul-16 2:44am

Member 10549697

Updated 7-Jul-16 3:08am

SRS(The Coder)

v2

Add a Solution

Comments

F-ES Sitecore 7-Jul-16 9:14am

A handy way of debugging these issues is to examine the "length" of things that come back from your query lookups

alert ($('ContactName').length);
$('ContactName').addClass('form-control has-ns');

A length of 0 means jquery can't find the component you're looking for so is applying the class to nothing. As others have said, your selector wasn't a valid one for finding your box, $('ContactName') finds a tag called contactname, so

<ContactName/>>

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-07-07T03:07:00

Solution 1

use Attribute Equals Selector [^] for Selecting controls with Name instead of Id

JavaScript

$("input[name='ContactName']").addClass('form-control has-ns');

Posted 7-Jul-16 3:07am

Karthik_Mahalingam

Comments

Member 10549697 7-Jul-16 23:21pm

Thank You sir.it helped.now its working

Karthik_Mahalingam 8-Jul-16 0:17am

cool

SRS(The Coder) · Accepted Answer · 2016-07-07T03:08:00

Here is my piece of HTML for your reference written in an aspx page which works as expected by you:-

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .form-control{
            border-color:red;
            border-width:2px;
            height:50px;
            width:200px;
        }
        .has-ns{
            background-color:green;
        }
    </style>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnAdd").bind("click", function () {
                var div = "<div>" + GetDynamicTextBox("SmrutiRanjan", "smruti.sahoo@gmail.com") + "</div>";
                $("#TextBoxContainer").append(div);
                $('input[name=ContactName]').addClass('form-control has-ns');
                return false;
            });

            $("body").on("click", ".remove", function () {
                $(this).closest("div").remove();

            });
        });        

        function GetDynamicTextBox(valuename, valueemail) {
            return '<input name="ContactName" type="text" value="' + valuename + '" /> ' + '<input name="ContactEmail" type="text" value="' + valueemail + '" /> ' +
            '<input type="button" value="Remove" class="remove" />';
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
      <div id="TextBoxContainer"></div>
      <input type="button" id="btnAdd" value="Add" />
    </form>
</body>
</html>

Hope this will definitely of help to you.

How to add cssclass to dynamic textbox created by javascript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

How to add cssclass to dynamic textbox created by javascript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us