Showing posts with label computer. Show all posts
Showing posts with label computer. Show all posts

Sunday, October 18, 2009

Getting the values of the form with an array of input field name using Coldfusion

Well actually it is not really an array but I am trying to behave it like one. This is the code...............

//this is the sample form ............

<form method="post" action="coldfusion_handler.cfm">
    <input type="text" name="first_name_1" />
    <input type="text" name="first_name_2" />
    <input type="text" name="first_name_3" />
    <input type="submit" value="SUBMIT" />
</form>

// this would be your coldfusion page................

<cfif IsDefined('form.submit')>
  
    <cfloop index="x" from="1" to="3">
  
        <!--- set a string with with the value form.first_name_ and concatenate the index of your loop
        , note the form.first_name_ is the name of the input field from your form --->
        <cfset form_value="form.first_name_"&x>
      
        <!--- the coldfusion evaluate function takes a string argument and convert it into an object,
         in this case the value of the form_value is a string that contain something like this "form.first_name_1",
        then the Evaluate function calls that string and turns it into an object, in this case it behaves like this        
         #form.first_name_1#",  which as you can see calls the value of the form with the name .first_name_1 --->
        <cfoutput>#Evaluate(value)#</cfoutput>
    </cfloop>

</cfif>

well there it is. hope that helps.







Posted by at No comments:
Labels: , , , , ,

Friday, October 16, 2009

How to create a dropdown menu using javascript and css.

heres a the code that creates the dropdown menu using javascript and css.

<html>
    <head>
        <title>Dropdown Sample</title>
        <link rel="stylesheet" type="text/css" href="css.css"/>
        <script type="text/javascript">
       
           //this function is the one who is responsible in displaying the submenu
            function showSub(){
                document.getElementById('subMenuDiv').style.display = "";
            }
            //this function is the one who is responsible in hiding the submenu
            function hideSub(){
                document.getElementById('subMenuDiv').style.display = "none";
            }
           
        </script>
    </head>
    <body>
        <div id="menuDiv">
            <ul>
                <li onmouseover="showSub();" onmouseout="hideSub();"><a href="#">Menu 1</a>
                   < !-- the display:none is responsible for hiding the submenu when the page is newly opened -- >
                    <div id="subMenuDiv" style="display: none;">
                        <ul class="subMenu">
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu 2</a></li>
                            <li><a href="#">Sub Menu 3</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
            </ul>
        </div>
    </body>
</html>


#menuDiv ul{
    margin: 0px;
    padding: 0px;
}

#menuDiv ul li {   
    list-style: none;
    display: inline;
    margin: 0 5px;
    padding: 0;
    background-color: #A80000;
}

#menuDiv ul li a{
    text-decoration: none;
    font-weight: bold;
    padding: 0 10px 0 10px;
    background-color: #A80000;
    color: #FFF;
}

#subMenuDiv {
    padding: 0px;
    position: absolute;
}


/*heres a little css hack*/
* html #subMenuDiv {
    position: absolute;
    margin-top: 18px;
    margin-left: -82px;
}

#subMenuDiv ul{
    margin: 0px;
    padding: 0px;
}

#subMenuDiv ul li{
    display: block;
    border: 1px solid #B0B0B0;
    padding: 0px;
}

#subMenuDiv ul li a{
    background-color: #D00000;
    padding: 0 10px;
}
#subMenuDiv ul li a:hover {
    background-color: #E00000;
}



there you have it folks. I really hope that that code helps you.


Posted by at No comments:
Labels: , , , ,

Thursday, October 15, 2009

validating size of the image before uploading with javasript

Here is the code on how to check the size of the image before uploading it to the server using javascript.
First you must create a form...............


<form method="post" action="yourBackEndPath" >

<!-- create the input type file -->
<input type="file" name="inputname" onchange="setImage();" id="fileId">

<!-- create the submit button -->
<input type="submit" value="Upload">

</form>

<!-- create an image tag without any source and make it hidden -->
<img src="" style="display: none;" id="imageSrcId" />

After creating the form create the javascript file size validator...........

// create the function that sets the image
function setImage(){

//get the value of the image from the file
var image = document.getElementById('fileId').value;

//set that value to the image tag
document.getElementById('imageSrcId').src = image;

//call the function that gets the size of the image
setTimeout('getSize()', 10);

}

//create the function that gets the size of the image
function getSize(){

//set the size of the image
var size = document.getElementById('imageSrcId').fileSize;

//now you can see the size of the image that you want to upload
alert('This is the size of the image that I want to upload '+size);


}

If the getSize function doesn't work you can also try this.

//only works on netscape and internet explorer
function getSize(){


if(navigator.appName == "Netscape"){


var image = document.getElementById('imageSrcId');
var size = image.files[0].fileSize;

//heres the size of the image
alert('This is the size of the image '+size);


} else if (navigator.appName == "Microsoft Internet Explorer") {


var size = document.getElementById('imageSample').fileSize;

//heres the size of the image
alert('This is the size of the image '+size);


}

}


There you have it. After you choose the image that you want to save an alert button will show you how the size of the image that you want to upload. Having a knowledge on the size of the image that you want to upload using javascript helps you a lot. You can filter the image that you want to upload in any size that you want before going to the backend. I know that there's a lot of security issues on it but you try that script and filter it again on the server side if you like. Hope this script did help you.

That code was only tested on mozilla firefox and internet explorer.





Posted by at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)

Feeds

Sonic Run: Internet Search Engine javascript, coldfusion, programming, simple programming teckniques, css, html Webfeed (RSS/ATOM/RDF) submitted to http://www.feeds4all.nl Web Development & Design Blogs DigNow.net

Search Engine Optimization and SEO Tools
javascript, coldfusion, programming, simple programming teckniques, css, html