jquery: jQuery multiple textbox values bind single textbox

mardi 14 juin 2016
jQuery multiple textbox values bind single textbox

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            $('.textbox1').keyup(function () {
                $('.txtfkey').val($(this).val());
            });

            $('.textbox2').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $(this).val());
            });
            $('.textbox3').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $(this).val());
            });
            $('.textbox4').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $(this).val());
            });
            $('.textbox5').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $(this).val());
            });
            $('.textbox6').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $(this).val());
            });
            $('.textbox7').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $(this).val());
            });
            $('.textbox8').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $(this).val());
            });
            $('.textbox9').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $(this).val());
            });
            $('.textbox10').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $('.textbox9').val() + '-' + $(this).val());
            });
            $('.textbox11').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $('.textbox9').val() + '-' + $('.textbox10').val() + '-' + $(this).val());
            });
            $('.textbox12').keyup(function () {
                $('.txtfkey').val($('.textbox1').val() + '-' + $('.textbox2').val() + '-' + $('.textbox3').val() + '-' + $('.textbox4').val() + '-' + $('.textbox5').val() + '-' + $('.textbox6').val() + '-' + $('.textbox7').val() + '-' + $('.textbox8').val() + '-' + $('.textbox9').val() + '-' + $('.textbox10').val() + '-' + $('.textbox11').val() + '-' + $(this).val());
            });
        });
    </script>
    <style type="text/css">
        .textbox1 {width: 20px;margin-left: 50px;}

        .textbox2 {width: 20px;margin-left: 10px;}

        .textbox3 {width: 20px;margin-left: 10px;}

        .textbox4 {width: 20px;margin-left: 10px;}

        .textbox5 {width: 20px;margin-left: 10px;}

        .textbox6 {width: 20px;margin-left: 10px;}

        .textbox7 {width: 30px;margin-left: 10px;}

        .textbox8 {width: 50px;margin-left:100px;}

        .textbox9 {width: 50px;margin-left: 10px;}

        .textbox10 {width: 50px;margin-left: 10px;}

        .textbox11 {width: 50px;margin-left: 10px;}

        .textbox12 {width: 50px;margin-left: 10px;}

        .txtfkey {width: 250px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            KEY   :
            <input type='text' class='textbox1' />
            <input type='text' class='textbox2' />
            <input type='text' class='textbox3' />
            <input type='text' class='textbox4' />
            <input type='text' class='textbox5' />
            <input type='text' class='textbox6' />
            <input type='text' class='textbox7' />
            <br />
            <br />
            <input type='text' class='textbox8' /><input type='text' class='textbox9' /><input type='text' class='textbox10' /><input type='text' class='textbox11' /><br />
            <br />
        </div>
        <div>
            Formatted Key:   
            <input type='text' class='txtfkey' />
        </div>
    </form>
</body>
</html>
and also first 6 text boxes allow only single digit and next 6 text boxes allow only two digits.
and all text boxes values required
jquery

mardi 14 juin 2016

jQuery multiple textbox values bind single textbox

Aucun commentaire:

Enregistrer un commentaire
