Archive for the ‘ JavaScript ’ Category

How to stop submit from on pressing enter key.


Key code of enter is 13 . so when we need to stop the enter from a text
field we just need to to trace the keypress event and stop for submittion.
Look carefully if condition of stopEnter function–
1> (evt.keyCode == 13) is the checking for enter key is pressed or not
2> (node.type == “text”) is the checking for enter key is pressed on text field or not
3> (node.name == “one”) is the checking for name of field is one or not
<?php    if($_POST){
        echo "Hit Enter";
    }
?>
<html>
    <head>
 <script language="javascript" type="text/javascript">
        function stopEnter(evt) {
            var evt = (evt) ? evt : ((event) ? event : null);
            var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
            if ((evt.keyCode == 13) && (node.type == "text") && (node.name == "one")) {
                return false;
            }
        }
        document.onkeypress = stopEnter;
    </script>

    </head>
    <body>
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
            <input type="text" name="one"/>
            <input type="submit" />
        </form>
    </body>
</html>

How to avoid conflict between JQuery and Prototype or other JavaScript library


If a page has both JQuery and Prototype then I got conflict. There is a option to disable $ sign for JQuery so there is no conflict. I have used jq keyword for JQuery instead of $.


<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script>
var jq = jQuery.noConflict();
</script>

Thats it

Javascript Loader String using JQuery


For javascript loader string —
1> first add the jquery library

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

2> Add the following loader script —-

<script type="text/javascript">
var loadCounter = 0;                        //counter of dots
var loadStrSuffix = "";                     //set the initial dosts to null
var noOfLoaderDots = 5;                     //no of dost will shown on loader string
var miliSecondsToUpdateLoaderDots = 800;    //update time of loader string in miliseconds
var sivar;                                  //sivar is use as the carrier of set interval function
/*
* function : enableLoader is used for enabling the loader
* args:
*  id- is the id of updated string location
*/
var enableLoader = function(id){
$('#'+id).css('display', 'block');
sivar = setInterval("updateLoaderStr('"+id+"')",miliSecondsToUpdateLoaderDots); // call 'updateLoaderStr()' function on every 'miliSecondsToUpdateLoaderDots' miliseconds and store this call into a variable sivar';
}
/*
* function : disableLoader is used for disabling the loader
* args:
*  id- is the id of updated string location
*/
var disableLoader = function (id){
$('#'+id).css('display', 'none');   //block the display of loader string
clearInterval(sivar);               //unset the call of set interval
}
/*
* function : updateLoaderStr is used for updating string
* args:
*  id- is the id of updated string location
*/
var updateLoaderStr = function(id){
if((loadCounter%(noOfLoaderDots+1))==0){
loadStrSuffix = '';
loadCounter++;
}else{
loadStrSuffix += '.';
loadCounter++;
}
$('#'+id).text('Loading'+loadStrSuffix);
}
</script>

3>then call this loader whenever you need. you may use different event here i used onclick event of button ————

<input type="button" value="enable" onclick="enableLoader('my_loader_id');">
<input type="button" value="disable" onclick="disableLoader('my_loader_id')">
<span id="my_loader_id" style="display:none">Loading...</span>

Thats it………….

How to reload or redirect a page after a definite time interval


For reloading or refreshing a page JavaScript is as follows —

window.location.reload();

and for redirect a page after define time interval in JavaScript is as follows–

<script type=”text/javascript”>
setTimeout(“location.href=’https://ruzdi.wordpress.com&#8217;,10000);
</script>

here in the setTimeout() Javascript functon first parameter is the location where to redirect and second parameter is the time interval

In Html inside the head tag use following meta tag for redirection —

<head>

<meta http-equiv=”refresh” content=”10;https://ruzdi.wordpress.com”&gt;

</head>

here in this meta tag on content 10 is the time interval and next address is the address where to redirect

How to submitting from inside of iFrame from Outside of iFrame


In case of situation like that a form which is inside of iframe but I  need to submit it from outside of iframe.

<iframe name=”displayframe” src=”display.php” width=”100%” height=”650px” style=’border:none’ >

<form action=”<?php echo $base_index.$action;?>” method=”post” enctype=”multipart/form-data” name=”formdisplay” id=”formwork”>
<input type=”hidden” id=’base’ value='<?php echo $base_index?>’ />

<table width=”522″ border=”0″ align=”center”>
<tr>
<td align=”right”><b>Title:</b></td>
<td colspan=”4″><label>
<input name=”title” type=”text” id=”title” size=”50″  />
</label></td>
</tr>
<tr>
<td align=”right”><b>Description:</b></td>
<td colspan=”4″><label>
<textarea name=”description” rows=”5″ cols=”30″ style=”width:600px” >
</textarea>
</label></td>
</tr>

</table>
</form>

</iframe>

<input type=”button” name=”insert” id=”button” onclick=”submitDisplayForm()” value=”submit” />

and my JavaScript code is

<script type=”text/javascript”>

window.frames[‘displayframe’].document.forms[‘formdisplay’].submit();

</script>

in this javascript code “displayframe” is the name of iframe and “formdisplay” is the name of form which is inside of iframe.

Thats all i have done so far.