JAVASCRIPT

JAVA SCRIPT FORM VALIDATION

*****************************************************************************
CALL JAVA SCRIPT CODE IN B/W HEAD TAG
<script language="javascript">
function valid()
{
    if(document.frm.n1.value=="")
    {
    alert("enter First Name");
    return false;
    }
   
   
     if(document.frm.n5.value=="")
    {
    alert("enter Date Of Birth");
    return false;
    }
    if(isNaN(document.frm.n5.value))
    {
    alert("enter numeric Date Of Birth");
    return false;
    }
   
   
     if(document.frm.n6.value.length < 10)
    {
    alert("enter Address");
    return false;
    }
   
   
   
    if(document.frm.n12.value=="")
    {
    alert("enter Home Phone");
    return false;
    }
    if(isNaN(document.frm.n12.value))
    {
    alert("enter numeric Home Phone");
    return false;
    }
   
    if(document.frm.n15.value.length < 10)
    {
    alert("enter min 10 word Allergies");
    return false;
    }
   
}   
</script>

<form name="frm" onsubmit="return valid()">

<tr><td colspan="4" style="background-color:#339999" height="30"><b>Emergency Contact Info</b>  <small>  More Action</small> </td></tr>

<tr><td colspan="4">&nbsp;</td></tr>

<tr><td>First Name</td><td><input type="text" name="n1" size="30" /></td><td colspan="2"><u><i>Emergency Contact Info</i></u></td></tr>

<tr><td colspan="4">&nbsp;</td></tr>

<tr><td>Last Name</td><td><input type="text" name="n2" size="30" /></td><td> Name</td><td><input type="text" name="n3" size="30" /></td></tr>

<tr><td colspan="4">&nbsp;</td></tr>

<tr><td>Gender</td><td><select name="gender">
                       <option>Male</option>
                       <option>Female</option>
                       </select></td><td>Relationship</td><td><input type="text" name="n4" size="30" /></td></tr>
                         
<tr><td colspan="4">&nbsp;</td></tr>

<tr><td>Date Of Birth</td><td><input type="text" name="n5" size="30" />dd-mmm-yyyy</td><td> Address</td><td><textarea rows="3" cols="22" name="n6"></textarea></td></tr>

<tr><td colspan="4"><u>Medical Infomation</u></td></tr>

<tr><td colspan="4">&nbsp;</td></tr>

<tr><td>Hospital <br/>Preference</td><td><input type="text" name="n7" size="30" /></td><td> City</td><td><input type="text" name="n8" size="30" /></td></tr>

<tr><td>Insurance <br/>Company</td><td><input type="text" name="n9" size="30" /></td><td> State</td><td><select name="state">
                                                                                                         <option>--select--</option>
                                                                                                         <option >Uttar Pardesh</option>
                                                                                                         <option>Gujraat</option>
                                                                                                         <option>West Bangal</option>
                                                                                                         <option>Bihar</option>
                                                                                                         <option>Jharkhand</option>
                                                                                                         </select></td></tr>
                                                                                                      
<tr><td>Policy Number</td><td><input type="text" name="n10" size="30" /></td><td> Country</td><td><select name="cntry">
                                                                                                   <option>--select--</option>
                                                                                                   <option >Austria</option>
                                                                                                   <option>India</option>
                                                                                                   <option>USA</option>
                                                                                                   <option>Green Land</option>
                                                                                                   </select></td></tr>
<tr><td>Physician's<br/>Name</td><td><input type="text" name="n11" size="30" /></td><td> Home Phone</td><td><input type="text" name="n12" size="30" /></td></tr>

<tr><td>Phone Number</td><td><input type="text" name="n13" size="30" /></td><td> Work phone</td><td><input type="text" name="n14" size="30" /></td></tr>

<tr><td>Allergies(If<br/>Any)</td><td><textarea rows="3" cols="30" name="n15"></textarea></td><td colspan="2"></td></tr>

<tr><td colspan="4" align="center"><input type="submit" name="sub" value="Submit"/><input type="submit" name="sub1" value="Reset" /></td></tr>
</form>
*******************************************************************************
full code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script language="javascript">
function valid()
{
  if(document.frm.nm.value=="")
   {
     alert("Please Enter name");
     return false;
   }
    if(document.frm.cn.value=="")
   {
     alert("Please Enter Client name");
     return false;
   }
}

</script>

</head>

<body>
<form name="frm" onsubmit="return valid()" action="">
<table>
 <tr>
   <td> Name </td><td> <input type="text" name="nm" /> </td>
 </tr>
  <tr>
   <td> Client Name </td><td> <input type="text" name="cn" /> </td>
 </tr>
 <tr>
   <td colspan="2"> <input type="submit" name="sub" value="Save" /> </td>
 </tr>
</table>
</form>

</body>
</html>
*******************************************************************************
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>
<p>Click the button to display the date.</p>
<p id="demo"></p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>
******************************************************************************
EMI CALCULATOR
***************************************************************************
<script language="javascript" type="text/JavaScript">
function clearval(docname) {
docname.txtLoanAmount.value="";
docname.txtInterestRate.value="";
docname.txtPeriod.value="";
docname.resultemi.value="";
docname.Selectopt.selectedIndex=0;
docname.txtLoanAmount.focus();
return false;
}
function checkval(docname){

var i;
var getval=docname.value;
var count_deci=0;
var flag=0;


for(i=0;i<getval.length;i=i+1) {
if((getval.charAt(i) >= "0" && getval.charAt(i) <= "9") || (getval.charAt(i) == ".")) {

if(getval.charAt(i) == ".") {
count_deci=count_deci+1;

if(getval.charAt(i+1)=="") {
alert("Wrong entry");
docname.amt.value="";
docname.amt.focus();
flag=1;
break;
}
}

if(count_deci>1) {
alert("Illegal Data");
docname.amt.value="";
docname.amt.focus();
flag=1;
break;
}
}
else {
alert("Invalid Entry");
docname.value="";
docname.focus();
flag=1;
break;
}
}
}


function CalculateValue(docname) {
subflag = true;

if(subflag) {

var LoanA,IntR,TimeP;
var TypeOfLoan;
var Multiplier,numerator,denominator;
var EMI;
var e1,e2,e3;
var emi;

LoanA=docname.txtLoanAmount.value;
IntR=docname.txtInterestRate.value;
TimeP=(docname.txtPeriod.value);
TypeOfLoan = docname.Selectopt.value;
e1 = parseInt(LoanA);
e2 = (LoanA * IntR / 100);
EMI = (e1+e2)/TimeP;
emi = Math.round(EMI);
docname.resultemi.value = emi;
return false;
}
}
</script>




<h2>EMI Calculator</h2>
<article>





<!--EMI Calculator starts-->

<form name="frmEMI" method="post">
<table border="0" cellspacing="0">
        <tr>
            <!--<td class="headVr ar" width="24%"></td>-->
            <td align="left" width="400px">
                <input type="text" id="txtLoanAmount" name="txtLoanAmount" size="17" title="Enter Loan Amount (Rs.)"
                    class="textbox" onblur="if(this.value == &#39;&#39;) { this.value=&#39;Loan Amount (Rs.)*&#39;; }"
                    onfocus="if (this.value == &#39;Loan Amount (Rs.)*&#39;) this.value = &#39;&#39;;"
                    value="" placeholder="  Loan Amount (Rs.)*"/>
                <!--<input type="text" class="input" name="txtLoanAmount" onblur="checkval(document.frmEMI.txtLoanAmount)" size="17">-->
            </td>
        </tr>
        <tr>
            <td align="left">
                <input type="text" id="txtInterestRate" name="txtInterestRate" title="Enter Interest Rate"
                    class="textbox" onblur="if(this.value == &#39;&#39;) { this.value=&#39;Interest Rate (%)*&#39;; }"
                    size="17" onfocus="if (this.value == &#39;Interest Rate (%)*&#39;) this.value = &#39;&#39;;"
                    value="" placeholder="   Interest Rate (%)*"/>
                <!--<input type="text" class="input" name="txtInterestRate" onblur="checkval(document.frmEMI.txtInterestRate)" size="17">-->
            </td>
        </tr>
        <tr>
            <!--<td class="headVr ar" width="24%">Loan Period (Yrs)</td>-->
            <td align="left">
                <input type="text" id="txtPeriod" name="txtPeriod" title="Enter txtPeriod" class="textbox"
                    onblur="if(this.value == &#39;&#39;) { this.value=&#39;Loan Period (Month)*&#39;; }"
                    size="17" onfocus="if (this.value == &#39;Loan Period (Month)*&#39;) this.value = &#39;&#39;;"
                    value="" placeholder="   Loan Period (Month)*"/>
                <!--<input type="text" class="input" name="txtPeriod" onblur="checkval(document.frmEMI.txtPeriod)" size="17">-->
            </td>
        </tr>
        <tr>
            <!--<td class="headVr ar" width="24%">Equated Monthly Installment (<b>EMI</b>)</td>-->
            <td align="left" valign="TOP" class="p2px5px">
                <input type="text" class="textbox" name="resultemi" size="10" value="" size="17" placeholder="  EMI"
                    readonly /></td></tr>
<tr>
            <!--<td>&nbsp;</td>-->
            <td align="left">
               
               <pre>

</pre>
            </td>
        </tr>
                <tr><td><a href="javascript:void(0);" onclick="return CalculateValue(document.frmEMI);">
                    <input class="button" type="button" name="Submit" value="Calculate" alt="Calculate"
                       
                    style="background-color:#9BCC31; color: #222; margin-top:10px; margin-left: 12px;"></a>
<a href="javascript:void(0);" onclick="return(clearval(document.frmEMI))"><input
                    type="button" name="Submit1"
                                value="Clear" alt="Clear All" class="button" style="background-color: #9BCC31; margin-top:10px;color: #222;
                                 margin-left: 18px;"></a></td>
        </tr>
        <tr>
            <!--<td>&nbsp;</td>-->
            <td align="left">
                <input type="hidden" name="Selectopt" value="Monthly">
                &nbsp;&nbsp;
            </td>
        </tr>
    </table>
    </form> </td>
</tr>
</table>
<!--EMI Calculator ends-->

********************************************************************************

TOGGLE FUNCTION
*******************************************************************
<div id="feedback" style="display: block; height: 362px;  right: -481px; padding: 0px;">
            <div class="feedform">
               <div class="mmanage">
<h3 class="abt">Address</h3>
<div class="abtus">
<p>3/473,<br>
Vishal Khand,<br>
Gomti Nagar,<br>
Lucknow (UP)-10</p>
<h3 class="abt">Email_Id</h3>
<p>info@conceptinfra.com<br>
enquiry@conceptinfra.com</p>
<h3 class="abt">Ring Us:</h3>
<p class="num">052204007337</p>
</div>
</div>
            </div>
            <img src="http://kanoinfotech.in/vscity/wp-content/uploads/2014/03/imagescont2.jpg" style="transform:rotate(270deg); -moz-transform:rotate(-90deg); -webkit-transform:rotate(270deg);">
        </div>
<script type="text/javascript">
$(document).ready(function(
{
$("#feedback").animate({right:"-481px"})
});

</script>

*******************************************************************************
ADD, REMOVE, TOGGLE CLASS

****************************************************************************

Resolved menu scrolling issue in mobile and filter by pop up scrolling issue in mobile also

https://www.youtube.com/watch?v=I2IR5HlHb4I

<script>

$('.mobile-button').click(function(){

$('body').addClass("menupopupbody");

});

$('.mobile-button.active').click(function(){

$('body').removeClass("menupopupbody");

});

$('.mobile-button').click(function(){

$('body').toggleClass("menupopupbody");

});

</script>

Where-> mobile-button (nav class name on mobile)

<script>

$('.product-filter-button').click(function(){

$('body').addClass("popupbody");

});

$('.close-filter-popup').click(function(){

$('body').removeClass("popupbody");

});

</script>

Where-> product-filter-button ((popup model) class name on mobile and (close-filter-popup) this is close button name)

and add this on style.css page

.menupopupbody {

overflow:hidden;

position:relative;

}

*******************************************************************************

How to set Div Onclick href Location

---------------------------------------------------------------------------------------

<div onclick="location.href='YOUR-URL-HERE';" style="cursor: pointer;"></div>

<div class="productFeature" onclick="location.href='<?php the_permalink() ?>';" style="cursor: pointer;">

<img src="<?= get_the_post_thumbnail_url( $ID, 'post-thumbnail' ) ?>" alt="<?php the_title() ?>"/>

 </div>

**********************************************************************************

Get Select Box selected value using java script

-------------------------------------------------

<select class="single-option-selector dropdown_arrow product-select" data-option="option1" id="product-selectors-option-0" autofilled="">

<option value="Single">Single</option>

<option value="Diwan">Diwan</option>

<option value="Queen">Queen</option>

<option value="King">King</option></select>

<script>

// $(document).ready(function(){

   setTimeout(function(){

     document.getElementById("product-selectors-option-0").addEventListener('change', function(e){

      //console.log('eeethis', this.value)

      //alert('hh')

      //console.log('eeee', e.target.value)

//         var selectedValue = e.target.val();

//         alert("You have selected - " + selectedValue);

     

      var tempValue = '';

      switch(this.value){

        case 'Single':

          tempValue = 'Lalit'

          break;

        case 'Diwan':

          tempValue = 'Abc'

          break;

        default:

          return

          

      }

           var newdemoElement = document.getElementById("newdemo")

      newdemoElement.innerHTML = tempValue;

      

   })}, 3000);

// });

</script>

**********************************************************************************

how to comment multiple lines at once in javascript

-------------------------------------------------

press- ctrl+/

================================================================