Untitled

<HTML>

<HEAD>

    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js"></script>

    <STYLE>
        #formularz {
            width: 60%;
            margin: auto;
            text-align: center;
        }

        header {
            text-align: center;

        }

        footer {
            text-align: center;
        }

        .rameczka {
            border: thin black solid;
            margin: 20px auto;
            width: 800px;
            visibility: hidden;
        }

        th {
            text-align: left;
        }

        #przedmioty table {
            width: 100%;
        }

    </STYLE>

    <script>

    $(document).ready(function(){
        $('#dodajButton').click(function(){
            $('div').css('visibility', 'visible');
            var a=$('#towar').val();
            var b=$('#kod').val();
            var c=$('#netto').val();
            var d=$('#vat').val();
            var e=$('#brutto').val();
            var f=$('#kat').val();
            var g=$('#opcje').val();
            var h=$('#ocena').val();
            var z= Number($('#przedmioty table tr:last td:first').html())+1;
            $('#przedmioty table').append('<tr><td>' + z +'</td><td>' + a + '</td><td>' + b + '</td><td>' + c + '</td><td>' + d + '</td><td>' + e + '</td><td>' + f + '</td><td>' + g + '</td><td>' + h + '</td></tr>')
        })
    });

</script>


</HEAD>

<BODY>
    <SCRIPT>
        function walidacja(formularz) {
            var towar = formularz.towar.value;
            var regTowar = /^[A-Z]{0,10}$/;

            var kod = formularz.kod.value;
            var regKod = /^[A-Za-z0-9]{2}\-[A-Za-z0-9]{2}$/;

            var netto = formularz.netto.value;
            var regNetto = /^[0-9]{1,}\.[0-9]{2}$/;

            var vat = formularz.vat.value;
            var regVat = /^[0-9]{1,}$/;

            var kat = formularz.kat.value;


            var opcje = formularz.opcje.value;


            var ocena = formularz.ocena.value;


            if (towar == "")
                document.getElementById('id1').innerHTML = 'Pole wymagane';
            else
            if (!regTowar.test(towar))
                document.getElementById('id1').innerHTML = 'Wpisz poprawny towar';
            else document.getElementById('id1').innerHTML = '';

            if (kod == "")
                document.getElementById('id2').innerHTML = 'Pole wymagane';
            else
            if (!regKod.test(kod))
                document.getElementById('id2').innerHTML = 'Wpisz poprawny kod';
            else document.getElementById('id2').innerHTML = '';

            if (netto == "")
                document.getElementById('id3').innerHTML = 'Pole wymagane';
            else
            if (!regNetto.test(netto))
                document.getElementById('id3').innerHTML = 'Wpisz poprawną cenę';
            else document.getElementById('id3').innerHTML = '';

            if (vat == "")
                document.getElementById('id4').innerHTML = 'Pole wymagane';
            else
            if (!regVat.test(vat))
                document.getElementById('id4').innerHTML = 'Wpisz poprawny vat';
            else document.getElementById('id4').innerHTML = '';

            if (kat == "")
                document.getElementById('id6').innerHTML = 'Pole wymagane';

            if (opcje == "")
                document.getElementById('id7').innerHTML = 'Pole wymagane';

            if (ocena == "")
                document.getElementById('id6').innerHTML = 'Pole wymagane';

        }

    </SCRIPT>

    <header> Projekt JavaScript i jQuery </header>

    <form id="formularz">

        <p> Nazwa towaru: <input type="text" name="towar" id="towar" />
            <p id='id1'></p>

        </p>

        <p> Kod towaru: <input type="text" name="kod" id="kod" />
            <p id='id2'></p>
        </p>

        <p> Cena natto: <input type="text" name="netto" id="netto" />
            <p id='id3'></p>
        </p>

        <p> Stawka VAT: <input type="text" name="vat" id="vat" />
            <p id='id4'></p>
        </p>

        <p> Cena brutto: <input type="text" name="brutto" id="brutto" />
            <p id='id5'></p>
        </p>

        <p> Kategoria towarowa: <select name="kat">

            <option value="">Kategorie</option>
            <option value="1" id="1">Kat 1</option>
            <option value="2" id="2">Kat 2</option>
            <option value="3" id="3">Kat 3</option>

        </select>
            <p id='id6'></p>

        </p>

        <p> Opcje towaru:<br>
            Opcja 1 <input type="checkbox" name="opcje" id="opcje"/><br>
            Opcja 2 <input type="checkbox" name="opcje" id="opcje"/><br>
            Opcja 3 <input type="checkbox" name="opcje" id="opcje"/><br>
            Opcja 4 <input type="checkbox" name="opcje" id="opcje"/><br>
            Opcja 5 <input type="checkbox" name="opcje" id="opcje"/><br>
            <p id='id7'></p>
        </p>

        <p> Ocena towaru:<br>
            1 <input type="radio" name="ocena" id="ocena" /><br>
            2 <input type="radio" name="ocena" id="ocena"/><br>
            3 <input type="radio" name="ocena" id="ocena"/><br>
            4 <input type="radio" name="ocena" id="ocena"/><br>
            5 <input type="radio" name="ocena" id="ocena"/><br>
            <p id='id8'></p>
        </p>

        <p>
            <input type="button" value="Dodaj" onClick='walidacja(this.form)' id="dodajButton" />
            <input type="reset" value="Anuluj" />
        </p>

    </form>


<div id="przedmioty" class="rameczka">
 <table>
 <tr><th>Lp.</th><th>Nazwa towaru</th><th>Kod towaru</th><th>Cena netto</th><th>Stawka VAT</th><th>Cena brutto</th><th>Kategoria</th><th>Opcja towaru</th><th>Ocena</th></tr>
 <tr></tr>

 </table>
 </div>

    <footer> Rower</footer>

</BODY>

</HTML>