Progress Monitor for IdealProgrammer.com

Take Swift, Intelligent, Massive, Planned, Loving, Effective (S.I.M.P.L.E.) Action to Transform Self into Ideal

Skip Repetitive Navigational Links
Home
News
Presenters
Contact
Please login

type JavaScript (JS) Example

Description: Illustrates the JavaScript syntax for the Button Object type Property .
Syntax: ButtonObject.type="button|reset|submit" – Allows you to access the type of a Button Object. NOTE: Assigning type cannot be done after element is created. The only way to do it is to create a new element that looks just like the old one and assign a type to the new element. Then, you replace the original element with the new one.
type JavaScript (JS) Example Code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
  <head>
    <title>IdealProgrammer.com: type </title>
    <!-- 
    ***************************************************
    * This example is from http://idealprogrammer.com *
    ***************************************************
    -->
    <style type="text/css" id="myStyle">
 
       .myButtons
        {
            font-size:large;           
            color:red;
        }
        .myButtons input
        {
        color:Blue
        }
 
        .myButton2
        {
            font-size:xx-small;
        }
        .myButton2 input
        {
        font-style :italic;        
        }
 
        .myButton3
        {
            background-color:#d0e4fe;
        }
        .myButton3 input
        {
        font-weight:600
        }
 
 
    </style>
    <script type="text/javascript">
 
        //****************************************************************
        //         Set Cookie
        //****************************************************************    
 function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
 
//****************************************************************
//         Get Cookie
//**************************************************************** 
// this fixes an issue with the old method, ambiguous values
// with this test document.cookie.indexOf( name + "=" );
function Get_Cookie(check_name) {
    // first we'll split this cookie up into name/value pairs
    // note: document.cookie only returns name=value, not the other components
    var a_all_cookies = document.cookie.split(';');
    var a_temp_cookie = '';
    var cookie_name = '';
    var cookie_value = '';
    var b_cookie_found = false; // set boolean t/f default f
 
    for (i = 0; i < a_all_cookies.length; i++) {
        // now we'll split apart each name=value pair
        a_temp_cookie = a_all_cookies[i].split('=');
 
 
        // and trim left/right whitespace while we're at it
        cookie_name = a_temp_cookie[0].replace(/^\s+|\s+$/g, '');
 
        // if the extracted name matches passed check_name
        if (cookie_name == check_name) {
            b_cookie_found = true;
            // we need to handle case where cookie has no value but exists (no = sign, that is):
            if (a_temp_cookie.length > 1) {
                cookie_value = unescape(a_temp_cookie[1].replace(/^\s+|\s+$/g, ''));
            }
            // note that in cases where cookie is initialized but no value, null is returned
            return cookie_value;
            break;
        }
        a_temp_cookie = null;
        cookie_name = '';
    }
    if (!b_cookie_found) {
        return null;
    }
}
 
</script>			
 
   </head>
  <body id="myBodyID">
 
        <div style="background-color:Yellow;border-color:black;border-style:solid;border-width:1px;"> click Buttons to change type of  button object:</div><br /><br />
         <!--using onclick to set a cookie and reload page; 
        when page is reloading, we check that cookie to assign different styles to button
        -->
 
      <input id="Button1" type="button"  class="myButtons" value="button1 - type=button" onclick="javascript: Set_Cookie( 'mycookie', '1', 30, '/', '', '' ); window.location.reload();" /><br /><br />
      <input id="Button2" type="button"  class="myButtons" value="button2 - type=button" onclick="javascript: Set_Cookie( 'mycookie', '2', 30, '/', '', '' ); window.location.reload();"/><br /><br />
      <input id="Button3" type="button"  class="myButtons" value="button3 - type=button" onclick="javascript: Set_Cookie( 'mycookie', '3', 30, '/', '', '' ); window.location.reload();"/><br /><br />
 
   <script type="text/javascript">
       //*****************************************************
       // DOM Objects
       //*****************************************************
 
 
       //*****************************************************
       //    ***    Button Object Properties   ***
       //*****************************************************
 
       //*****************************************************
       // type
       //*****************************************************
 
       //    SYNTAX:
       //    object.type="submit|button|reset"  Allows you to retrieve or assign type for button
       // NOTE: Assigning type cannot be done after element is created
       // The only way to do it is to create a new element that
       // looks just like the old one and assign a type to the
       // new element.  Then, you replace the original element
       // with the new one 
 
       // Two ways to retrieve type
       document.write("<div style=\"border-style:solid\"><strong>Demonstrating Two Ways to Retrieve Property for Button1</strong><br />") 
 
         //   1. GetElementsByTagName
                myObject=document.getElementsByTagName('input')[0];
                document.write("Using getElementsByTagName: " + myObject.type);
                document.write("<br />");
            //   2. GetElementById
 
                document.write("Using getElementById: ");
                document.write(document.getElementById('Button1').type);
                document.write("</div><br />");
                document.write("<br />");
 
 
 
                // Two ways to assign type
                // NOTE: Assigning type cannot be done after element is created
                // The only way to do it is to create a new element that
                // looks just like the old one and assign a type to the
                // new element.  Then, you replace the original element
                // with the new one 
                if (Get_Cookie('mycookie')) {
 
                    ButtonNum = (Get_Cookie('mycookie'));
                }
                else {
                    ButtonNum = '1';
                }
 
                //   1. GetElementById
 
                if (ButtonNum == '2') {
                //replace original button with new one that has new type
                    var input = document.getElementById("Button2")
                    var newInput = document.createElement('input');
                    newInput.type = 'submit';
                    newInput.id = input.id
                    newInput.value = input.value;
                    input.parentNode.replaceChild(newInput, input);
                //end of replace rtn
                    document.write("<div style=\"border-style:solid\"><strong>Demonstrating Assigning Property with GetById for Button2</strong><br />")
                    document.getElementById('Button2').className = "myButton2"
                    document.getElementById('Button2').value = "button2 - type=submit"
                    document.write("Button2 type changed to submit: " + document.getElementById('Button2').type + "</div><br />");
                }
            //   2. GetElementsByTagName
 
                if (ButtonNum == '3') {
                    //replace original button with new one that has new type
                    var input = document.getElementById("Button3")
                    var newInput = document.createElement('input');
                    newInput.type = 'reset';
                    newInput.id = input.id
                    newInput.value = input.value;
                    input.parentNode.replaceChild(newInput, input);
                    //end of replace rtn
                    document.write("<div style=\"border-style:solid\"><strong>Demonstrating Assigning Property with GetElementsByTagName for Button3</strong><br />") 
                    myThirdButton = document.getElementsByTagName('input')[2];
                    myThirdButton.className = "myButton3"
                    myThirdButton.value = "button3 - type=reset"
                    document.write("Button3 type changed to type=reset: " + myThirdButton.type + "</div>");
 
                }
 
 
 
 
   </script>
 
  </body>
</html>