Tag: Java Script and jQuery

Restrict selection of some options in select element without disabled attribute using jQuery

last day, One of my friend was facing a strange problem in the select element. His select element has some disabled options( using the disabled attribute), and element is working fine every where but failed in the safari (ipad) and also disabled attribute is not supported in Internet Explorer 7 and earlier versions.

disable options without disabled

After implementing some other possible solution we have found a way to restrict selection of some options in select element without disabled attribute using jQuery. In the below example we are using the .change() jQuery event of the select element.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript">
        $(function() {
            var lastSel = $("#ddlType option:selected");
            $("#ddlType").change(function(event) {
 
                if ($("#ddlType option:selected").index() > 1) {
                    event.preventDefault();
                    event.stopPropagation();
                    lastSel.attr("selected", true);
                    return false;
                }
                else {
                    lastSel = $("#ddlType option:selected");
                }
            });
        });
    </script>
    <style>
        .disablectrl
        {
            color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody><tr><td width="205">
            <select style="width: 230px;" id="ddlType">
                <option value="0" selected="selected">---Choose Program Type---</option>
                <option value="TEXT">Text</option>
                <option value="BASIC" class="disablectrl">Basic </option>
                <option value="ADVANCED" class="disablectrl">Advanced </option>
                <option value="SCORM" class="disablectrl">Program</option>
            </select>
          </td></tr></tbody>
    </table>
</body>
</html>

In the .change() event, code check the selected index if the condition does’t meet, code set the old selected value in the select element.

How to assign undefined value to an array element in JavaScript

 
Following example shows that how to assign undefined value to an array element in JavaScript.

<HTML>
   <HEAD>
   <TITLE>
     undefined element in javaScript array
   </TITLE>
   </HEAD>
   <BODY>
   <SCRIPT>
      var ArrayCity = new Array(4);
         ArrayCity[0] = "New Delhi";
         ArrayCity[1] = "NewYork";
         ArrayCity[2] =  undefined;
         ArrayCity[3] = "Kolkata";
 
     for (var i = 0; i < ArrayCity.length; i++){
       if (ArrayCity[i] != undefined)
        document.write("ArrayCity[" + i + "] = " + ArrayCity[i] + "<br>");
     }     
   </SCRIPT>
   </BODY>
</HTML>

Output of above example will be:

ArrayCity[0] = New Delhi
ArrayCity[1] = NewYork
ArrayCity[3] = Kolkata

How to validate phone number in JavaScript

 
Regular expressions are a right way to validate text fields such as phone numbers, names, addresses, age, date and other input information. You can use them to constrain input, apply formatting rules, and check lengths.
Continue reading “How to validate phone number in JavaScript”