Posts

Showing posts from April, 2014

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 pass a Javascript Array to PHP file using AJAX and JSON?

How to pass a Javascript Array to PHP file using AJAX and JSON? I have an array in javascript and I need to pass this array to a PHP by using AJAX call to that PHP file. I will get this array in PHP file and assign this javascript array to PHP array. Then I will find out the count of that PHP array elements and return it back to the javascript. I will convert JS array in JSON format by JSON.stringify. This is a very simple example on how to pass javascript array to PHP asynchronously. You can perform a lot of operations on this array which you have passed to PHP file but for simplicity I am just returning its count. Let's have a look at the following code snippet. Javascript Array var myJSArray = new Array("Saab","Volvo","BMW"); ProcessAJAXRequest() function wil pass JS array to PHP file using AJAX request and will show count of array elements returned by PHP file. function ProcessAJAXRequest() {     $.ajax     ({         type: "POST",   ...
Post a Comment
Read more