Javascript

[Solution]: element access problem when only a single radio button defined

/ ajiprabowo / Leave a comment

Kor's AvatarKor: When you have a single radio button, the classical reference return, logically, a single element, not a collection. A single element has no length property. For instance, give a textbox a name, than try to find its length property. You will get undefined, logically. Same with a single radio button.

DOM method getElementsByName() returns always a collection, thus this is the reason for DOM method works, classical form’s elements reference don’t.

once again: getElementsByName() returns always a collection, thus it has always a length property, very much alike an array. Now if you have a single element with a certain name refered by getElementsByName() it is the same as you would have an array with a single element.

This is the reason for you need always an index when using getElementsByName() to refer a certain element.

Classical reference

Code:
document.formname.elementname

is ambiguous. It returns a collection if there are more than one element, but it returns the element itself when there is no other element with the same name.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Radion Test</title>
<script language="javascript" type="text/javascript">
function radio_test(){
     var str= "1. document.forms['dummy'].elements['single'].length=\n\t"+
     document.forms.dummy.elements.single.length+
     "\n\n2. document.forms['dummy'].elements['single'].type=\n\t"+
     document.forms.dummy.elements.single.type+
     "\n\n3. document.getElementsByName('single').length=\n\t"+
     document.getElementsByName('single').length+
     "\n\n4. document.getElementsByName('single')[0].type=\n\t"+
     document.getElementsByName('single')[0].type;
     alert(str);

     return false;
}
onload=function(){
document.getElementsByName('submit')[0].onclick=radio_test;
}
</script>
</head>
<body>
<form name="dummy" action="" onsubmit= "return false">
        <fieldset><input type="radio" name="single" >
        <input type="submit" value="submit" name="submit">
        </fieldset>
</form>
</body>
</html>

—

Quoted: http://www.webdeveloper.com/forum/showthread.php?t=184376

Javascript Form Validation

/ ajiprabowo / 1 Comment

Dibawah ini sample script yang sudah dimodif untuk validasi email dan nomor telepon (+62-21 5555555)

<script language=”javascript”
type=”text/javascript”>
<!– hide script from older browsers
function IsNumeric(strString)
//  check for valid numeric strings
{
var strValidChars = “0123456789.-+”;
var strChar;
var blnResult = true;
if (strString.length == 0) return false;
//  test strString consists of valid characters listed above
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
return blnResult;
}
function validateForm(contact)
{
if(“”==document.forms.contact.name.value)
{
alert(“Please enter your name.”);
document.forms.contact.name.focus();
return false;
}
var phone = document.forms.contact.phone.value;
if(“”==phone)
{
alert(“Please enter your phone.”);
document.forms.contact.phone.focus();
return false;
}else if(!IsNumeric(phone)){
alert(“Please enter your phone all in numeric e.g. +62-21-5555555.”);
document.forms.contact.phone.focus();
return false;
}
if(“”==document.forms.contact.email.value)
{
alert(“Please enter your email.”);
document.forms.contact.email.focus();
return false;
}else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.forms.contact.email.value)){}
else{
alert(“Please enter your correct email address.”);
document.forms.contact.email.focus();
return false;
}
document.forms.contact.submit();
}
–>
</script>

<script language=”javascript”   type=”text/javascript”>
<!– hide script from older browsersfunction IsNumeric(strString)   //  check for valid numeric strings    {   var strValidChars = “0123456789.-+”;   var strChar;   var blnResult = true;
if (strString.length == 0) return false;
//  test strString consists of valid characters listed above   for (i = 0; i < strString.length && blnResult == true; i++)      {      strChar = strString.charAt(i);      if (strValidChars.indexOf(strChar) == -1)         {         blnResult = false;         }      }   return blnResult;   }

function validateForm(contact){
if(“”==document.forms.contact.name.value){alert(“Please enter your name.”);document.forms.contact.name.focus();
return false;}
var phone = document.forms.contact.phone.value;
if(“”==phone){alert(“Please enter your phone.”);document.forms.contact.phone.focus();
return false;}else if(!IsNumeric(phone)){ alert(“Please enter your phone all in numeric e.g. +62-21-5555555.”);document.forms.contact.phone.focus();
return false; }
if(“”==document.forms.contact.email.value){alert(“Please enter your email.”);document.forms.contact.email.focus();
return false;}else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.forms.contact.email.value)){}else{ alert(“Please enter your correct email address.”);document.forms.contact.email.focus();
return false; }
document.forms.contact.submit();} –></script>

Semoga bermanfaat.

—

source: pbdr.com

css/ Javascript: Form in a Lightbox

/ ajiprabowo / Leave a comment

Form in a Lightbox

Showing a form in the lightbox, with fading effect in option, should encourage visitors to fill it…

We have seen how to create a lightbox with fade in effect, we use the same JavaScript code but we also simplify the CSS code because a form has a submit button and a cancel button, so the close button may be removed.

The form is placed directly in the box on the page and does not need to be loaded dynamically, although that option remains possible, and it is also possible to create several boxes and leave a choice to the user. We can adapt the code to do so.

Demonstration

Our example uses a form composed of objects of different types:
– A text field.
– Two alternative radio buttons.
– A selection list.

In our example, data entered and choices made by users are sent to another web page. These data are collected by a JavaScript code placed in this other page:

function retrieve()
{

	var parameters = location.search.substring(1).split("&");
	var temp = parameters[0].split("=");
	mail = unescape(temp[1]);

	temp = parameters[1].split("=");
	sex = unescape(temp[1]);

	temp = parameters[2].split("=");
	city = unescape(temp[1]);

	var data =  document.getElementById("data");

	data.innerHTML = "Email: " + mail + "<brr";
	data.innerHTML += "Genre: " + sex + "<br>";
	data.innerHTML += "City: " + city + "<br>";

}

retrieve();

About the code in the page of the form, it is the same as the code previously used, except that the dynamic filling part is removed. This gives a simplified openbox function.

function openbox(formtitle, fadin)
{
  var box = document.getElementById('box'); 
  document.getElementById('filter').style.display='block';

  var btitle = document.getElementById('boxtitle');
  btitle.innerHTML = formtitle;

  if(fadin)
  {
	 gradient("box", 0);
	 fadein("box");
  }
  else
  { 	
    box.style.display='block';
  }  	
}

We can see that the function as a parameter for the title of the form, and the fadin option, its value is 1 if you ask a fade, and 0 if the display must be immediate.

The function closebox is now associated to the “cancel” button:

<input type="button" name="cancel" value="Cancel" onclick="closebox()">

The CSS is the same with the deletion of some descriptors. Indeed, the code to insert a box in a page is simpler:

<div id="filter"></div>
<div id="box"></box>
    <span id="boxtitle"></span>
    <form method="GET" action="lightbox-form-test.html" >
        ... objects of the form...
    </form>
</div>
</div>

—

source: xul.fr