Mukesh Chapagain's Blog » Javascript

Javascript: How to Submit form and Change form action?

Mukesh — Mon, 02 Jan 2012 17:59:53 +0000

This article will show you how to submit form and change form action using javascript. This is a very simple trick but it’s very useful and frequently used.

Submit Form using Javascript

HTML form


	Search:

Javascript function

function submitForm()
{
  document.myForm.submit();
}

Change form action using Javascript

HTML form


	Search:

Javascript function

function formAction()
{
  document.newForm.action = "http://google.com";
}

Full Source Code

Javascript and Forms

Example 1: Submitting form through Javascript

Example 2: Changing form action through Javascript

Hope it helps. Thanks.

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

Javascript: Show Hide textbox text on focus

Mukesh — Mon, 26 Sep 2011 14:33:25 +0000

This might be simple one but it is a very handy code. Generally, I see this being used in Search textbox where there is some text like ‘search…’ by default. And, when you put the mouse cursor on the textbox, the text is removed and then you can type your desired search text.

For this, two javascript event handler are used: onFocus and onBlur.

onFocus: event handler used when the body of the page receives focus
onBlur: event handler used when the body of the page loses focus

Here is the code:-

Hope this helps. Thanks.

Related posts:

Magento jQuery: How to use them together?

Mukesh — Wed, 02 Mar 2011 00:34:28 +0000

By default, Magento contains and uses the Prototype javascript library. You can also integrate the other most popular javascript library ‘jQuery‘ in your Magento site.

While integrating jQuery in Magento, you might get some javascript conflict and errors as you will be using two javascript libraries (prototype and jQuery) at a time. This is caused because prototype also uses ‘$‘ as a function or variable name, just as jQuery does.

Well, jQuery has a solution for this conflict case. Here’s what jQuery has to say about the conflict:-

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

Here, I will explain you on how you can integrate jQuery in Magento without any conflict and error.

Below is the step-by-step guide to integrate jQuery with Magento:-

1) Download jQuery from jquery.com
2) Copy the jquery file to the following directory: skin/frontend/default/your_theme/js/
3) Open app/design/frontend/default/your_theme/layout/page.xml
4) In page.xml file, search for block with name ‘head‘ and add the following code inside it (I suppose that your jquery file name is jquery.js):-

	skin_jsjs/jquery.js

5) Removing conflict between two javascript libraries (prototype and jquery):
- Open app/design/frontend/default/your_theme/template/page/head.phtml
- Add the following code at the end of this page:-

6) That’s all. You are done. Now, you can use jQuery in your Magento website freely and without any conflict. :)

Hope this helps. Thanks.

Related posts:

Javascript: How to get current URL without Query string?

Mukesh — Fri, 28 Jan 2011 09:41:23 +0000

Here is a quick code to get the current URL of a page with Javascript:-

var current_url = location.href;

Here is another way:-

var current_url = document.URL;

Suppose, you have query string in your URL and you only want to get the actual URL without the query string.

Here is the code for this:-

var url = location.href;
var url_parts = url.split(‘?’);
var main_url = url_parts[0];

Hope this helps. Thanks.

Related posts:

print_r in Javascript

Mukesh — Fri, 08 Jan 2010 07:45:02 +0000

It’s a real headache when you have to work on objects and arrays in Javascript. It would be lot easier to detect elements of the Javascript objects/arrays if we have print_r function in Javascript as we have in PHP.

I googled the web and have found a very efficient print_r Javascript function. This has helped me a lot in my projects. Here is the code:-

USING PRINT_R

Source: http://www.brandnewbox.co.uk/articles/details/a_print_r_equivalent_for_javascript/

Related posts:

Javascript: Show/Hide HTML elements

Mukesh — Fri, 27 Nov 2009 12:26:51 +0000

Here, I will be demonstrating on showing or hiding a div when a link is clicked. I have done this with Javascript and CSS.

I have called showHideDiv() Js function when the link is clicked. The display of the div where content is present, is visible or hidden on each click. For this, CSS styling is used (display: none).

The code follows:



	Show / Hide
	This is a test.

Try, Implement and Enjoy!

Related posts:

Javascript: Add Remove HTML elements

Mukesh — Tue, 17 Nov 2009 13:53:05 +0000

You can add html elements dynamically with Javascript. In this article, I will show you how to do so. I have created two Javascript functions. One for creating html elements and the other for removing them.

In my html elements, I have created ‘li’ and ‘strong’ elements inside ‘div’. The div id is ‘summary’. I have written comment in the code so that it would be easy to understand.

Javascript function to create html elements:-

function createSummary(title,content) {
	// get div id
	var summaryOptions = document.getElementById('summary');

	// create new 
	var newLi = document.createElement('li');
	var liIdName = title;
	// set 
 attribute id
	newLi.setAttribute('id',liIdName);

	// create new element 
	var newStrong = document.createElement('strong');
	var strongIdName = title+" strong";
	// assign id to 
	newStrong.setAttribute('id',strongIdName);

	// adding parameter 'title' value inside 
	newStrong.innerHTML = title;
	// adding  inside div
	summaryOptions.appendChild(newStrong);

	// adding parameter 'content' value inside 

	newLi.innerHTML = content;
	// adding 
 inside div
	summaryOptions.appendChild(newLi);
}

Javascript function to remove html elements:-

function removeSummary(title) { var summaryOptions = document.getElementById('summary'); var childLi = document.getElementById(title); var childStrong = document.getElementById(title+" strong"); // remove
if(childLi) { summaryOptions.removeChild(childLi); } // remove strong if(childStrong) { summaryOptions.removeChild(childStrong); } }

Full code is as under:-

Test
 

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)
Related posts:
Javascript: Show/Hide HTML elements

print_r in Javascript

Javascript: How to Submit form and Change form action?

Website statistic (User Information) in Javascript

Go back link in Javascript

PHP Javascript : Playing with multi-dimensional array

Mukesh — Sat, 24 Oct 2009 05:27:15 +0000

I had to work on multi-dimensional array with javascript and php. I had a multi-dimensional array in php. I had to load it into javascript array and then populate the html selection list.

The challenge for me was to create multi-dimensional array in javascript and populate selection list with for loop in javascript.

Here is the full code containing php array, creating javascript array, using for loop in javascript to populate selection list in onclick event.

Given php array:-

array( 'easy' => array('music','history'), 'difficult' => array('maths','science') ), 'sports'=>array( 'easy' => array('cricket'), 'difficult' => array('football','basketball') ) ); $keyName = array(); ?>

Creating array in javascript with php array:-

var itemData = new Array(); $value) { foreach($value as $k=>$v) { $v = implode(",",$v); if(!in_array($key,$keyName)) { ?> itemData[''] = new Array(); itemData[''][''] = new Array('');

Populating selection list with javascript for loop:-

for (i=0; i
Download Full Source Code

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)
Related posts:
PHP: Parse Unparse String Array

print_r in Javascript

Go back link in Javascript

jQuery: Print array and object

Displaying date and time

Website statistic (User Information) in Javascript

Mukesh — Mon, 31 Mar 2008 04:48:42 +0000

From the code below, you can get Resolution, Page title, Page url, Agent name, Browser name and Page Referrer.

Website Statistic
Note: Referer is only displayed when you come to this page from some other page.

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)
Related posts:
Website statistic (User Information) in PHP

print_r in Javascript

Javascript: Add Remove HTML elements

Javascript: Show/Hide HTML elements

Magento: Track Visitor’s Information

Go back link in Javascript

Mukesh — Wed, 19 Mar 2008 11:30:06 +0000

I had problem giving the back link and I found this solution:

Go Back

This helped me. Hope this will be useful to you as well.

goback.html

Go Back Test Go Back to Previous link, Test Page

Click the link below for the test:

CLICK ME

goback2.php

"; echo "Please click ANY of the given link to go back to the previous page: "; //go back to the previous page echo "Go Back | "; //the above link can also be used in this way echo "Go Back"; ?>

Thank You.

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)
Related posts:
Javascript: Show/Hide HTML elements

PHP Javascript : Playing with multi-dimensional array

print_r in Javascript

Javascript: Add Remove HTML elements

Page refresh in PHP