HTML şi jQuery: citirea şi scrierea formularelor


Admit din start că titlul nu este corect, dar nu am găsit o formă scurtă mai bună. Practic doresc să semnalez mai jos cât de uşor poţi să „citeşti” (get) valorile dintr-un formular, dar şi cum poţi să le scrii (mai corect set). Se poate întâmpla adesea să ai nevoie de aşa ceva, aşa că mă gândesc că un scurt cod demonstrativ poate să ajute ca referinţă. Important: metoda de mai jos nu este unică. În jQuery ai adesea alternative pentru a seta elementele. Oricum, e un cod funcţional, după cum puteţi testa chiar Dvs. Apăsaţi pe primul buton (Verifica), apoi pe al doilea (Schimba) – şi iar primul ca să vedeţi efectul. Apoi modificaţi valorile din formular manual şi daţi click pe primul buton. Va „citi” ce aţi indicat.

Şi acum codul. Nu prea cred că se cer explicaţii. Pur şi simplu puteţi vedea cum se „citesc” şi cum se „scriu” valorile.

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<title>Formulare</title>
</head>
<body>
<script>
    $(function() {
        $("#trimitere").click(function () {
            textul="A fost indicat numele "+$("[name=nume]").val();
            textul+=" şi sexul "+$("[name=sex]").val()+".<br>";
            textul+="Îi place să se îmbrace în "+$("[name=culoare]:checked").val()+". ";
            if($("[name=ciuperci]:checked").val()=="on")
                textul+="Îi plac ciupercile.";
            else
                textul+="Nu suportă ciupercile. ";
            textul+="<br>Citat favorit: "+$("[name=citat]").val();
            $("#rezultate").html(textul);
        });
        $("#schimbare").click(function () {
            $("[name=nume]").val("Maria");
            $("[name=sex]").val(1);
            $("[name=culoare]")[2].checked=true;
            $("[name=ciuperci]").attr('checked',false);
            $("[name=citat]").val("Cip cirip, cip cirip.");
        });
    });
</script>
<form method="post" action="javascript:;">
    <input type="text" name="nume" value="Ionel">
    <select size="1" name="sex">
        <option value="feminin">feminin</option>
        <option value="masculin" selected>masculin</option>
    </select><br />
    <input type="radio" name="culoare" value="negru" checked> negru
    <input type="radio" name="culoare" value="roşu"> roşu
    <input type="radio" name="culoare" value="verde"> verde
    <input type="radio" name="culoare" value="galben"> galben<br />
    <input type="checkbox" name="ciuperci" checked> îi plac ciupercile<br />
    <textarea cols="30" rows="2" name="citat">Cine fură azi un ou, mâine va ajunge bou.</textarea><br />
    <input type="submit" id="trimitere" value="Verifica">
    <input type="button" id="schimbare" value="Schimba">
</form>
<div id="rezultate"></div>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

5 comentarii

  1. Ionut Staicu spune:

    $(„[name=nume]”) e recomandat să-l scrii $(‘input[name=”nume”]’). E mai rapid dacă specifici elementul (se folosește de getElementsBytTagName) decât să specifici doar un atribut (se parsează tot DOM-ul)

  2. radu.capan spune:

    Mulţumesc de completare. Într-un context mai complex e perfect adevărat.

  3. Andrei spune:

    Cat de sigure sunt verificarile prin js?
    Se poate trece de o verificare facuta in js printr-o modificare din browser.
    Deci, sa ne bazam doar pe js?

  4. Mihai Baboi spune:

    @Andrei Eu pot sa-ti spun parerea mea. Niciodata nu m-as baza doar pe js. Mai ales daca lucrezi cu date sensibile. JS-ul poate fi dezactivat din cateva click-uri si devine inutil. Este bine intotdeauna sa ai si o validare server-side.

    Acestea fiind spuse, asta nu inseamna ca js e rau. Ofera o metoda eleganta de validare pentru cea mai mare parte din useri. Server side-ul este pentru cei care incearca intentionat sa-ti strice aplicatia… :)

  5. radu.capan spune:

    Corect. Validarea server-side e pentru siguranta aplicatiei, iar validarea client-side e pentru frumusetea aplicatiei, in special ca sa il ajute pe cel ce navigheaza (ii spune daca a gresit, ii usureaza munca facand intuitiv procesul s.a.).


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *