Posts

Showing posts with the label HTML

How to use Javascript localStorage to retain values of HTML input elements on Page Refresh?

How to use Javascript localStorage to retain values of HTML input elements on Page Refresh? localStorage in Javascript is used to retain the values of the HTML input elements on the page refresh. setItem() and getItem() methods are used to set and get the data from the localStorage. clear() method is used to clear the data from the localStorage. Suppose I have following 2 textboxes and buttons in my HTML page.  <input type="text" id="text1" value="" /> <button type="button" id="myButton1" onclick="myButtonClicked('text1')">Click Me</button> <input type="text" id="text2" value="" /> <button type="button" id="myButton2" onclick="myButtonClicked('text2')">Click Me</button> I fill some data in each textbox. Now when I refresh the page, the data is lost. I want to retain that data on the page refresh. I will use localStor...
Post a Comment
Read more

How to call both Javascript function with PHP file on the click on HTML link?

How to call both Javascript function with PHP file on the click on HTML link? Recently, I was trying to implement logout functionality while working with PHP website. I had put logout logic in logout.php file and I was calling that file on the click of logout link like following: <a href="logout.php">Logout</a> This was working fine. But later on I realised that I also have to clear localstorage maintained by using Javascript before logging out the user. So, I had to call the javascript function that clears the localstorage before calling the logout.php file.  Javascript function for clearing the localstorage: function ClearMyLocalStorage() { localStorage.clear(); } I investigated two approaches to accomplish my task. Approach 1: <a href="logout.php" onclick="ClearMyLocalStorage()"> Approach 2: <a href="javascript:;" onclick="ClearMyLocalStorage();">Logout</a> And in your function you have to write like fu...
Post a Comment
Read more

How to change InnerHTML of all the HTML Buttons in one go using jQuery?

How to change InnerHTML of all the HTML Buttons in one go using jQuery? Suppose, I have 5 buttons on my page. How can I change the innerHTML of the buttons in one go using jQuery? I want that buttons having text "Clicked" should get changed to "Click me" when Change InnerHTML button is clicked. I will use jQuery to solve this problem. Refer the following example. <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function ChangeInnerHTML() { //Iterate all the buttons with innerHTML = "Clicked" in the DOM and set them to "Click me". } </script> </head> <body> <button type="button" id="myButton1">Click me</button> <button type="button" id="myButton2">Clicked</button> <button type="button" id="myButton3">Click me</button> <button type="bu...
Post a Comment
Read more

How to return value from child window to parent window using window.open in Javascript?

How to return value from child window to parent window using window.open in Javascript? It is very easy to return a value from a child window to parent window which has been opened from parent window using window.open method in Javascript. In many scenarios, it is possible to do some calculations on the child window and parent window need the result of that calculations to perform some task. So, let's try to resolve this problem. In Parent Window I have following Javascript function which will open a child window named childWin. I also have a function which will catch the value returned by the child window. function openChildWin()  {        var childWin = window.open("childWin.html", "_blank", "height=400, width=550, status=yes, toolbar=no, menubar=no, location=no,addressbar=no);  } function setValue(val1)  {    //you can use the value here which has been returned by your child window } ChildWin.html page Following is my childWin HTML page. T...
Post a Comment
Read more

How to allow HTML Textbox to accept Numbers only using Javascript?

How to allow HTML Textbox to accept Numbers only using Javascript? While web development, you often encounter the need of functionality where your textboxes should be filled with numbers only. For example, you want your users to fill the quantity of anything, ID (if it is composed on integers only), price of anything (excluding decimal) etc. In short, you want only numbers plus some keys like backspace, delete. left and right arrow to be typed in the textbox. You can use javascript to restrict your users to fill only numbers in the textbox. It is very simple. On the KeyPress event of any HTML text, just call a simple javascript function which checks the keycodes for the numbers and on the basis of keycodes, it returns true or false. Here is how? HTML Text <input type="text" id="txtSample" name="txtSample" onkeypress="return CheckNumeric(event)" /> Javascript  function CheckNumeric(event) {        var key = window.event ? event.keyCode : eve...
Post a Comment
Read more

HTML5 MENU Tag Redefined

HTML5 <menu> Tag Redefined The <menu> tag provides an easy way to create menus on a web page. The HTML <menu> element was deprecated in HTML 4.01 but is redefined in HTML5. The HTML <menu> tag defines a list/menu of commands. The <menu> tag is used for context menus, toolbars and for listing form controls and commands. <li> tag is used within the <menu> tag . For example: Which pet do you own? <menu>  <li>Dog</li>  <li>Cat</li> </menu> You can also place radio buttons and check boxes inside <menu> tags. Have a look at following simple example of <menu> tag radiobuttons inside <menu> tag <menu>    <li><input type="radio" id="radDog" class="radPets" name="radDog"/>Dog</li>    <li><input type="radio" id="radCat" class="radPets" name="radCat"/>Cat</li> </menu> checkboxe...
Post a Comment
Read more

How to secure jQuery AJAX calls in PHP from hackers?

How to secure jQuery AJAX calls in PHP from hackers? If you are making jQuery AJAX calls in your PHP website, please ensure that those jQuery AJAX calls are secure from website hackers. Your code should not be vulnerable to hackers. Below are some methods and steps which need to be taken to secure your jQuery AJAX calls to PHP files. I am writing this post because I had written a simple post " How to call PHP function from JavaScript function? Always use AJAX. " without mentioning any security code. I got following comment on that post: " Your code is very vulnerable. You're not filtering the $_POST variable at all. This opens yourself to HTML injection. A hacker could pwn your web site very quickly if you used this code. Careless examples like yours is exactly why so many web sites are hacked. " That's why this is my small attempt to make your jQuery AJAX calls secure.  1. Use $_SERVER['HTTP_X_REQUESTED_WITH'] :  This is a basic check to see if the ...
Post a Comment
Read more

How to call PHP function from JavaScript function? Always use AJAX.

How to call PHP function from JavaScript function? Always use AJAX. Recently, I was developing a web application in PHP. I get into the need of calling my PHP function from my Javascript function. This is the common thing when you are developing a web application in PHP and have to call a PHP code from Javascript to refresh only a certain portion of your web page with server results. Always use AJAX to achieve this functionality. Using AJAX you can call server side code / functions (your PHP code) from client side (Javascript). Below is the PHP and Javascript code snippet to illustrate this concept.  This is very simple example on how to call server side functions of PHP from client browsers (Javascript)? In following example, I have a PHP file named myscript.php which has function named myfunction(). This function uses two $_POST variables and just echoes them. I have mydiv HTML div anywhere on my webpage which I want to refresh with the result which is returned from my PHP script...
Post a Comment
Read more

How to put images in HTML text and password fields?

How to put images in HTML text and password fields? You can easily place images inside text fields in HTML. To explain this, I am making a registration form in  which I have text and password fields like name, email, password and confirm password. I want to put user image  inside name text field, email image inside email field and so on. I have kept images(32*32 png icons) of user, email and password  in images folder. HTML file <form action="register.php" name="register" id="register" method="post">         <input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">   <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="3" class="txtinput">   <input type="password" n...
Post a Comment
Read more

How to make stylish Submit and Reset HTML buttons with CSS3?

How to make stylish Submit and Reset HTML buttons with CSS3? Recently, I had to create a registration form which had submit and reset buttons. I wrote some CSS3 code to  look submit and reset html buttons stylish. I thought of sharing this code with all you guys so that it might  help someone. If you have any better CSS tips to make these submit and reset buttons more stylish, do share it. My HTML file: <div id="buttons">     <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">     <input type="submit" name="submit" id="submitbtn" class="submitbtn" value="Register"> </div> My CSS file: #buttons  {    display: block; padding-top: 10px;  } #buttons #resetbtn  {   display: block;   float: left;   color: #515151;   text-shadow: -1px 1px 0px #fff;   margin-right: 20px;   height: 3em;   padding: 0 1em;   outline: 0;   font-weight: bol...
Post a Comment
Read more

How to pause javascript setInterval method for sometime and restart again?

How to pause javascript setInterval method for sometime and restart again? I was using javascript setInterval method to display different divs after a regular interval of time. In between, I fell into the requirement of pausing the javascript setInterval method for sometime, do some stuff and restart it again. So, I repeatedly used setInterval and clearInterval to acheive my functionality.  I have 3 divs: div0 (green), div1 (yellow), div2 (red). All are overlapping each other. I am using setInterval to hide and show div1 and div2 after every second. if index = 4 or 6, I am showing red div else yellow div.  My requirement is that, When index becomes 8, I want to pause the setInterval for 5 seconds and till then show div0 (green) and afterwards resume the loop of setInterval until clearInterval is called. Below is the code snippet for pausing and restarting setInterval method which is self explanatory. <!DOCTYPE html> <html lang="en">   <head>   ...
Post a Comment
Read more