Web Code Logics

Improve your skills

September 27, 2016

How to Add or Remove HTML Element Dynamically in Javascript or JQuery

, , No comments

In this article, we will discuss about how to add or remove any html element dynamically in javascript or jquery.

 We can easily add or remove any HTML elements like textbox, button, radio button etc. using JavaScript. JavaScript’s document object has a method called createElement() which can be used to create HTML elements dynamically.

First, we take a button(to add additional html element like textbox) or a textbox (default textbox) in body as show in below-

HTML:
<body style="background: #E0EDFA; text-align: center; margin-top: 250px;">
    <div id="dvAllTextbox">
        <input type="button" value="Add New Textbox" onclick="createTextbox();" /><br />
        <input type="text" /><br />
    </div>
</body>

After that, attach the jquery library link and write the below javascript code in head part as shown below-

JS:
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

         var i = 1;
        function createTextbox() {
            var div = document.createElement('DIV');
            div.innerHTML = "<input id='txt" + i + "' type='text' /><input id='btnRemove" + i + "' type='button' value='Remove' onclick='removeTextbox(this.id);' />"
            document.getElementById("dvAllTextbox").appendChild(div);
            i++;
        }

         function removeTextbox(id) {
            var newId = document.getElementById(id);
            newId.parentNode.parentNode.removeChild(newId.parentNode);
        }

    </script>
</head>

Now save the file and run on browser.

 The function createTextbox() creates an HTML DIV element with a TextBox and a Button (to remove the TextBox) and then appends it to the Container DIV.

 The function removeTextbox() simply removes the dynamically added DIV with TextBox and Button that was clicked.


Demo:






Read More

September 14, 2016

Add Simple Auto Complete Search to Input Box like Google using JQuery UI

, , , , , No comments

In this tutorial, we learn how to implement auto-complete search textbox like google using jQuery UI. We can easily display a list of suggestions from the beginning of the word typed in a text box. Auto-complete prevents the user from having to enter an entire word or a set of words.

Here we have implemented a basic autocomplete with a local array as its data source. The source option is mandatory to which we are specifying a local array of strings. Once the user starting to enter country name, the auto suggested countries would be listed under the textbox. These auto suggested countries would be fetched from the list of the countries defined in our array.

First, we declare a input text box in <body> element as show in below-

HTML:
<body>
    <form>
        <input id="txtSearch" type="text" placeholder="Search Country" /><br/>
        <span id="lblMsg" style="color:green;"></span>
    </form>
</body>

After that, attach the jQuery library and jQuery UI link on your <head> part of page and write the below javascript code in head part shown as below-

JS:
<head>
<title>Add Simple Autocomplete Search to input box using jQuery UI</title>

 <!-- Load jQuery, jQuery UI and jQuery ui styles from jQuery website -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <script type="text/javascript">

 /* list of array of countries as its local data source*/
var data = ["Afghanistan", "Australia", "Bangladesh", "Canada", "China", "France", "Germany", "India", "Indonesia", "Iran", "Italy", "Japan", "Nepal", "New Zealand", "Pakistan", "Russia", "Saudi Arabia", "Sri Lanka", "United Arab Emirates", "United Kingdom", "Zimbabwe"];

 $(document).ready( function () {
/* binding the text box with the jQuery Auto complete function. */
$("#txtSearch").autocomplete({
/*source refers to the list of countries that are available in the auto complete list. */
source:data,
autoFocus:true,
/*call this function after select value from autocomplete suggestions */
select: function (event, ui) {
$("#lblMsg").html("You selected: " + ui.item.label);
},
/*minLength defines, minimum character in textbox to show suggestions */
minLength: 0,
/*show autocomplete suggestions list on textbox focus.  */
}).focus(function () {
$(this).autocomplete("search", "");
});
});

 </script>
</head>

Now, save and run the file in browser and when we start typing the first alphabet, it is matched against a list of the countries defined in our array and the matches get displayed in a drop-down menu attached to the textbox.

Result:


Live Demo (Try it):





 If you like this, please share with your friends...



Read More

September 08, 2016

How to Disable Resizeable Property of Textarea

, No comments

Normally whenever we use textarea in pages, the browser allows the user to resize it, but sometimes this is not required (as it affect the other part of the design).

 So, In this article I will explain how to disable or prevent users from resizing the textarea element in browsers like Google Chrome, Mozilla Firefox and Apple Safari.

 Note: By default, <textarea> elements are resizeable as shown below-.
----: Old Method :-----
In the old method, we need to set the value of the CSS property shown as below-
textarea { 
    width:400px; 
    max-width:400px; 
    height:300px; 
    max-height:300px; 
}
we set max-height/max-width same as height/width.
Example-

This method works well, but we still see "resize" icon in corner.

-----: New CSS3 Method :-----
We can use the CSS3 resize property to remove or disable the default horizontal and vertical resizeable property of the HTML <textarea> element. 

 This property will also hide the resizing handle at the bottom-right corner of the textarea.
textarea {  
    resize:none;
}
Example-

Note: The resize property applies to elements whose overflow property value is something other than "visible".


-----: Optional / Conditional Resizing :-----

For enabling only the horizontal resizing, we can replace the none with horizontal.
textarea {  
    resize:horizontal;
}
Example-



 Similarly for enabling only the vertical resizing, we can replace the none with vertical.
textarea {  
    resize:vertical;
}
Example-








Read More

September 03, 2016

How to Check weather a checkbox is checked or not using JavaScript or jQuery

, , No comments

Here I will explained with an example and live demo, How to check whether a CheckBox is checked (selected) or unchecked (not selected) using JavaScript or jQuery.

 Description:

 The checked property indicates whether a checkbox is checked or not. If a checkbox is selected, the value of checked property is true otherwise it is false.

----: Using JavaScript :-----

The following code consists an HTML CheckBox and a Button. When the Button is clicked, a click event handler is executed which first references the CheckBox using its ID and then based on whether it is checked or unchecked, displays a JavaScript alert message box.

 Example-
<html> 
<head> 
    <script type="text/javascript"> 
        function Check() {
            var chkGraduate = document.getElementById("chkGraduate");
            if (chkGraduate.checked) {
                alert("CheckBox checked.");
            } else {
                alert("CheckBox not checked.");
            }
        } 
    </script> 
</head>
<body style="background: #E0EDFA;">
    <form id="form1">
        <input id="chkGraduate" type="checkbox" />
        <label for="chkGraduate">Are you graduate ?</label>
        <br />
        <br />
        <input type="button" value="Check" onclick="Check();" />
    </form>
</body>
</html> 
-----: Using jQuery :-----

 There are two ways to track the status of checkboxes whether it is checked or not using the jQuery :checked selector and prop() method. We explained both methods one by one with example.

 (1). Using the :checked Selector -

 Using the jQuery ":checked" selector, we can easily check the status of checkboxes. The ":checked" selector specifically designed for radio button and checkboxes. If the checkbox is checked then it returns "true" otherwise it returns "false".

 Example-
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        function Check() {
            var isChecked = $("#chkGraduate").is(":checked");
            if (isChecked) {
                alert("CheckBox checked.");
            } else {
                alert("CheckBox not checked.");
            }
        }
    </script> 
</head>
<body style="background: #E0EDFA;">
    <form id="form1">
        <input id="chkGraduate" type="checkbox" />
        <label for="chkGraduate">Are you graduate ?</label>
        <br />
        <br />
        <input type="button" value="Check" onclick="Check();" />
    </form>
</body> 
</html> 

(2). Using the prop() Method -

 The jQuery prop() method provides an simple and reliable way to check the status of checkboxes. It works perfectly in all the conditions because every checkbox has checked property which specifie its checked or unchecked status.
If the checkbox is checked then prop() Method returns "true" otherwise it returns "false".

 Note: Don't confuse with the "checked" attribute of checkbox. The "checked" attribute only define the initial state, not the current state of the checkbox.

 Example-
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
        function Check() {
            var isChecked = $("#chkGraduate").prop("checked"); 
            if (isChecked) {
                alert("CheckBox checked.");
            } else {
                alert("CheckBox not checked.");
            } 
        } 
    </script> 
</head>
<body style="background: #E0EDFA;">
    <form id="form1">
        <input id="chkGraduate" type="checkbox" />
        <label for="chkGraduate">Are you graduate ?</label>
        <br />
        <br />
        <input type="button" value="Check" onclick="Check();" />
    </form>
</body> 
</html> 

Result:
check weather a checkbox is checked or not in jquery or javascript


Live Demo:

Read More
Subscribe to: Posts (Atom)

Subscribe for Latest Update

Popular Posts