Friday 17 May 2013

pure Html Registration Page with Validations


<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/examples-offline.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .txtPhoneWidth
        {
            width: 37px;
        }
        .txtPhoneWidth2
        {
            width: 42px;
        }
        .txtExpWidth
        {
            width: 60px;
        }
        .txtExpWidth2
        {
            width: 70px;
        }
           
    </style>
    <script type="text/javascript">
        /***********************************************
        * Drop Down Date select script- by JavaScriptKit.com
        * This notice MUST stay intact for use
        * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more
        ***********************************************/

        var monthtext = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

        function populatedropdown(monthfield, yearfield) {
            var today = new Date()          
            var monthfield = document.getElementById(monthfield)
            var yearfield = document.getElementById(yearfield)
           
            for (var m = 0; m < 12; m++)
                monthfield.options[m] = new Option(monthtext[m], monthtext[m])
            monthfield.options[today.getMonth()] = new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
            var thisyear = today.getFullYear()
            for (var y = 0; y < 40; y++) {
                yearfield.options[y] = new Option(thisyear, thisyear)
                thisyear += 1
            }
            yearfield.options[0] = new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year



        }
        function Validation() {
            debugger;
            LName = document.getElementById("txtLastName");
            CompanyNum = document.getElementById("CompanyNum");
            TransType = document.getElementById("TransType");
            CardNum = document.getElementById("CardNum");
            ExpMonth = document.getElementById("ExpMonth");
            ExpYear = document.getElementById("ExpYear");
            Member = document.getElementById("Member");
            TypeCredit = document.getElementById("TypeCredit");
            Payments = document.getElementById("Payments");
            Amount = document.getElementById("Amount");
            Currency = document.getElementById("Currency");
            CVV = document.getElementById("CVV");
            Email = document.getElementById("Email");
            var emailRegexStr = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            var isvalid = emailRegexStr.test(Email.value);
            if (!isvalid) {
                alert('Invalid email address!');
                document.getElementById("Email").focus();
                return false;
            }

            BillingAddress1 = document.getElementById("BillingAddress1");
            BillingCity = document.getElementById("BillingCity");
            BillingZipCode = document.getElementById("BillingZipCode");
            BillingState = document.getElementById("BillingState");
            BillingCountry = document.getElementById("BillingCountry");
            PhoneNum0 = document.getElementById("txtPhoneNum0");
            PhoneNum1 = document.getElementById("txtPhoneNum1");
            PhoneNum2 = document.getElementById("txtPhoneNum2");
            if (PhoneNum0.value != "" && PhoneNum1.value != "" && PhoneNum2.value != "") {
                PhoneNumber = PhoneNum0.value + "" + PhoneNum1.value + "" + PhoneNum2.value;
            }
            else {
                alert("* Indicate Mandiatory Field Please Fill all the details");
                return false;
            }

            if (LName.value != "" && CompanyNum.value != "" && TransType.value != "" && CardNum.value != "" && ExpMonth.value != "" && ExpYear.value != "" && Member.value != "" && TypeCredit.value != "" && Payments.value != "" && Amount.value != "" && Currency.value != "" && CVV.value != "" && Email.value != "" && PhoneNumber.value != "" && BillingAddress1.value != "" && BillingCity.value != "" && BillingZipCode.value != "" && BillingState.value != "" && BillingCountry.value != "") {
                alert("Success");
                return true;
                debugger;
            }
            else {
                alert("* Indicate Mandiatory Field Please Fill all the details");
                return false;
            }


        }


   

</script>
</head>
<body>
    <form action="https://process.netpay-intl.com/member/remote_charge.asp" method="post"
    name="formName1" onsubmit="alert('hello')">
    <script type="text/javascript">

        //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
        window.onload = function () {
            populatedropdown("ExpMonth", "ExpYear")

        }
    </script>
    <div id="example" class="k-content" style="height: 550px">
        <div style="width: 100%; text-align: center">
            <label style="font-size: xx-large; font-weight: bold; color: #1c3360">
                Net Pay GateWay</label>
        </div>
        <table style="width: 100%; margin-top: 50px">
            <tr style="margin-top: 10px">
                <td style="width: 50%" align="center">
                    <table cellspacing="2px" cellpadding="4px">
                        <tr>
                            <td align="left">
                                First Name
                            </td>
                            <td align="left">
                                <input type="text" id="txtFirstName" title="Enter your first name" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Last Name<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="txtLastName" title="Enter your last Name" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Email<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="Email" title="Enter Your Email" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Phone Number<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <table>
                                    <tr>
                                        <td>
                                            <input type="text" id="txtPhoneNum0" title="Enter Your Phone Number" maxlength="3"
                                                class="txtPhoneWidth" />
                                        </td>
                                        <td>
                                            <input type="text" id="txtPhoneNum1" title="Enter Your Phone Number" maxlength="3"
                                                class="txtPhoneWidth" />
                                        </td>
                                        <td>
                                            <input type="text" id="txtPhoneNum2" title="Enter Your Phone Number" maxlength="4"
                                                class="txtPhoneWidth2" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <b>Billing Address</b>
                            </td>
                            <td>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Address<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input id="BillingAddress1" title="Enter address" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                City&nbsp;Name<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <div id="CityName" class="ui-widget">
                                    <label for="Cities">
                                    </label>
                                    <input id="BillingCity" title="Enter City" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                State<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <div id="stateName" class="ui-widget">
                                    <label for="State">
                                    </label>
                                    <input id="BillingState" title="Enter State" />
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Country<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <div id="Country" class="ui-widget">
                                    <label for="Country">
                                    </label>
                                    <input id="BillingCountry" title="Enter Country" maxlength="2">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Pincode<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="BillingZipCode" title="Enter pincode" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Amount<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="Amount" title="Enter Amount" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Currency<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <select id="Currency" title="Select Currency">
                                    <option>Select</option>
                                    <option value="0">ILS (Israel New Shekel)</option>
                                    <option value="1">USD (US Dollar)</option>
                                    <option value="2">EUR (Euro)</option>
                                    <option value="3">GBP (UK Pound Sterling)</option>
                                    <option value="4">AUD (Australian Dollar)</option>
                                    <option value="5">CAD (Canadian Dollar)</option>
                                    <option value="6">JPY (Japanese Yen)</option>
                                    <option value="7">NOK (Norwegian Krone)</option>
                                    <option value="8">PLN (Polski zloty)</option>
                                    <option value="9">MXN (Mexican Peso)</option>
                                    <option value="10">ZAR (South African Rand)</option>
                                    <option value="11">RUB (Russian Ruble </option>
                                    <option value="12">TRY (Turkish lira)</option>
                                    <option value="13">CHF (Swiss franc) </option>
                                    <option value="14">INR (Indian rupee)</option>
                                    <option value="15">DKK (Danish krone)</option>
                                    <option value="16">SEK (Swedish krona)</option>
                                    <option value="17">CNY (Chinese yuan)</option>
                                    <option value="18">HUF (Hungarian forint)</option>
                                    <option value="19">NZD (New Zealand dollar) </option>
                                    <option value="20">HKD (Hong Kong dollar)</option>
                                    <option value="21">KRW (South Korean won) </option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="width: 50%;" valign="vertical" align="left">
                    <table cellspacing="2px" cellpadding="4px">
                        <tr>
                            <td colspan="2">
                                <b>Credit Card Details</b>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Name on Credit Card <span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="Member" title="Enter Name on Credit Card" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Card Number<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="CardNum" title="Enter Credit Card Number" />
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Expiration <span style="color: Red">*</span>
                            </td>
                            <td>
                                <table>
                                    <tr>
                                        <td>
                                            <select id="ExpMonth" class="txtExpWidth">
                                            </select>
                                        </td>
                                        <td>
                                            <select id="ExpYear" class="txtExpWidth2">
                                            </select>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td align="left">
                                Enter CVV<span style="color: Red">*</span>
                            </td>
                            <td align="left">
                                <input type="text" id="CVV" title="Enter CVV Number" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                            </td>
                            <td align="right">
                                <input class="offline-button" type="submit" value="submit" onclick="return Validation();">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <input type="hidden" name="CompanyNum" value="3409473" id="CompanyNum" />
        <input type="hidden" name="TransType" value="1" id="TransType" />
        <input type="hidden" name="TypeCredit" value="1" id="TypeCredit" />
        <input type="hidden" name="Payments" value="1" id="Payments" />
        <input type="hidden" name="PhoneNumber" id="PhoneNumber" />
        <style scoped>
            #example h2
            {
                font-weight: normal;
            }
            #email-settings
            {
                height: 135px;
                width: 395px;
                margin: 30px auto;
                padding: 110px 0 0 30px;
                background: url('../../content/web/datepicker/mailSettings.png') transparent no-repeat 0 0;
            }
        </style>
    </div>
    </form>
</body>
</html>

Tuesday 14 May 2013

Embed Video in HTML


<object width="300" height="260">
        <param name="movie" value="Wildlife.wmv"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="Wildlife.wmv" type="application/x-shockwave-flash" allowscriptaccess="always" autostart="false"
            allowfullscreen="true" width="425" height="344">
  </embed>
    </object>



html - embed attributes

To customize the functionality of the embedded media player, be sure to set any of the following attributes.
  • autostart - Controls the media's ability to start without prompting (values are "true" or "false")
  • hidden - Controls whether or not the play/stop/pause embedded object is hidden or not (values are "true" or "false"; hide your embeded media if you just want background noise)
  • loop - Controls the ability of the media to continuously play (values are "true" and "false")
  • playcount - Sets a playcount which means the media will repeat itself x number of times, instead of continuously as with the loop attribute above (a playcount of "2" will repeat the video twice)
  • volumn - Sets a numeric value for the loudness of your media (values are "0" through "100")