javascript-demos – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Sun, 20 Jan 2013 07:24:26 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 How To Check If Textbox Is Empty Using JavaScript https://theextremewebdesigns.com/blog/javascript-textbox-empty-how-to-check-if-textbox-is-empty-using-javascript/ https://theextremewebdesigns.com/blog/javascript-textbox-empty-how-to-check-if-textbox-is-empty-using-javascript/#comments Sun, 20 Jan 2013 07:24:26 +0000 https://theextremewebdesigns.com/blog/?p=2037 If you have worked with forms, then you would know how important it is to process the form input to make sure that all the required information is filled out properly. In this article, I am going to share a very easy way that you can use to check if Textbox is Empty using JavaScript.

How to use JavaScript to Check If Textbox Is Empty?

For this example, I am assuming that we have a Textbox in a form and we need to check if this textbox is empty or not when the “Check” button is clicked.

Example: Check if Textbox has contents or if it is empty using JavaScript

<script Language="JavaScript">
<!--
function check_blank()
{
// If the value of the textbox is empty, then show an alert
if (my_form.state.value == "")
{
alert("Please fill in State.");

// Focus the textbox so that user can fill it
my_form.state.focus();

// return false to stop further processing
return false;
}

// If state is not null continue processing
return true;
}
-->
</script>

<form name="my_form" id="my_form" action="#" onsubmit="return check_blank();">
<label for="state">State</label>
<input type="text" name="state" id="state" >
<input type="submit" value="Check">
</form>

Once you run the above code and click the “Check” button, the page will show an alert. If you enter something in it and then click the button, the form will quietly submit the info.

Simple, isn’t it?

Do you know of any other ways to use JavaScript to check if textbox is empty? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/javascript-textbox-empty-how-to-check-if-textbox-is-empty-using-javascript/feed/ 1 2037 JavaScript Get Image Dimensions (Width & Height) Examples https://theextremewebdesigns.com/blog/javascript-get-image-dimensions-get-image-width-height/ https://theextremewebdesigns.com/blog/javascript-get-image-dimensions-get-image-width-height/#respond Tue, 19 Jun 2012 17:12:14 +0000 https://theextremewebdesigns.com/blog/?p=928 Have you ever wanted to get image dimensions using JavaScript? In this article, I am going to share an easy way to use JavaScript to get image dimensions (width & height).

How to use JavaScript to Get Image Dimensions (Width & Height)

Following is the complete HTML + JavaScript source code that shows how to get the image dimensions (width & height) when the page is loaded:

Example: Get Image Width & Height (dimensions) using JavaScript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Get Image Dimensions</title>
</head>

<body>

<img src="images/banner.png" id="my_img" />

<script type="text/javascript">

var img = document.getElementById('my_img');

var width = img.clientWidth;

var height = img.clientHeight;

alert( 'Width: ' + width + ' Height:' + height );

</script>
</body>
</html>

The given code assumes that there is an image with ID “my_img” and the dimensions of this image needs to be found. When the above code is executed, the page will alert the width and height of the image.

Note

The image has to be completely loaded in order to get it’s size, or the width & height values are incorrectly shown as zero.

That’s it!

Do you know of any other ways to find image width and height using JavaScript? Feel free to share by commenting below.

]]> https://theextremewebdesigns.com/blog/javascript-get-image-dimensions-get-image-width-height/feed/ 0 928