Formularz z radioboxami

pytanie zadane 19 stycznia 2019 w JavaScript przez kryst.4 Początkujący (350 p.)
zamknięte 24 stycznia 2019 przez kryst.4

Link do źródła

Witam. Chciałbym, żeby zamiast textboxa "Obecność" były radioboxy "Tak, Nie i NB", a do tabeli odpowiednio do zaznaczonego radioboxa, wpisywał się tekst. Jak to zrobić? Projekt zrobiłem na podstawie czyjegoś pomysłu, bo nie do końca umiem używać javascripta.

komentarz zamknięcia: Widzę, że mój problem wygląda na prosty, ale jak się prosi, jak wykorzystać rozwiązanie, to tego już się nie dowiem.

1 odpowiedź

odpowiedź 19 stycznia 2019 przez xmentor Nałogowiec (49,520 p.)

Robisz 3 inputy typu radio, każdy z nich powinno mieć takie samo "name", ale różną wartość w atrybucie "value", pobierasz sobie te inputy np. przez querySelectorAll i sprawdzasz, który jest checked. Pobierasz wartość z atrybutu "value" i ładujesz gdzie chcesz.

komentarz 19 stycznia 2019 przez kryst.4 Początkujący (350 p.)

Mógłbyś to zrobić na przykładzie, najlepiej na tym moim? Bo niezbyt wiem, gdzie ten kod umieścić.

 <!DOCTYPE html>
<html>
    <head>
        <title>Kolęda</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    </head>
    <body>
        
        <div class="container">
            <div class="tab tab-1">
                <table id="tabela" border="1">
                    <tr>
                        <th>Numer</th>
                        <th>Obecność</th>
                    </tr>
                </table>
            </div>
            <div class="tab tab-2">
              Numer :<input type="text" name="Numer" id="Numer">
              Obecność :<input type="radio" name="Obecnosc" id="Obecnosc" value="Tak"><input type="radio" name="Obecnosc" id="Obecnosc" value="Nie"><input type="radio" name="Obecnosc" id="Obecnosc" value="NB">
                <button onclick="addj();">Dodaj</button>
                <button onclick="edit();">Edytuj</button>
                <button onclick="remove();">Usuń</button>
            </div>
        </div>
    </body>
</html>
 <script >
                  var rIndex,
                table = document.getElementById("table");
            
            // Czy formularz ma puste pola?
            function checkEmptyInput()
            {
                var isEmpty = false,
                    Numer = document.getElementById("Numer").value,
                    Obecnosc = document.getElementById("Obecnosc").value;
            
             if(Numer === ""){
                    alert("Numer nie może być pusty");
                    isEmpty = true;
                }
                else if(Obecnosc === ""){
                    alert("Obecność nie może być pusta");
                    isEmpty = true;
                }
                return isEmpty;
            }
            
            //Dodawanie wiersza
            function add()
            {
                if(!checkEmptyInput()){
                var newRow = table.insertRow(table.length),
                    cell1 = newRow.insertCell(0),
                    cell2 = newRow.insertCell(1),
                    Numer = document.getElementById("Numer").value,
                    Obecnosc = document.getElementById("Obecnosc").value;
            
                cell1.innerHTML = Numer;
                cell2.innerHTML = Obecnosc;
                selectedRowToInput();
            }
            }
            
            //Sprawdzanie zaznaczenia wiersza i wpisanie go do pól w formularzu
            function selectedRowToInput()
            {
                
                for(var i = 1; i < table.rows.length; i++)
                {
                    table.rows[i].onclick = function()
                    {
                      rIndex = this.rowIndex;
                      document.getElementById("Numer").value = this.cells[0].innerHTML;
                      document.getElementById("Obecnosc").value = this.cells[1].innerHTML;
                    };
                }
            }
            selectedRowToInput();
            
            //Wybrany wiersz
            function edit()
            {
                var Numer = document.getElementById("Numer").value,
                    Obecnosc = document.getElementById("Obecnosc").value;
               if(!checkEmptyInput()){
                table.rows[rIndex].cells[0].innerHTML = Numer;
                table.rows[rIndex].cells[1].innerHTML = Obecnosc;
              }
            }
            
            //Usunięcie zaznaczonego wiersza
            function remove()
            {
                table.deleteRow(rIndex);
                // clear input text
                document.getElementById("Numer").value = "";
                document.getElementById("Obecnosc").value = "";

            }
    </script>

komentarz 20 stycznia 2019 przez xmentor Nałogowiec (49,520 p.)

ID musibyć unikalne. Jak chcesz pobrać wszystkie inputy radio to nadaj im tę samą klasę(użyj jak wyżej napisałem querySelectorAll) i przeszukaj, który jest zaznaczony,

Jako że querySelector(i querySelectorAll) przyjmuje selektor CSS-owy jako argument, to możesz zrobić coś w ten deseń: document.querySelector('.radio:checked') -> zwrócenie null-a oznacza, że żaden input nie jest zaznaczony.

Możesz przejrzeć rozwiązania na stackoverflow

komentarz 20 stycznia 2019 przez kryst.4 Początkujący (350 p.)

Jeszcze raz powtarzam, że co do javascripta jestem kompletnie zielony, dlatego chciałbym rozwiązanie mojego problemu na jakimś przykładzie. To co piszesz, niewiele mi mówi.

Jak ktoś gdzieś napisał: "PO PROSTU NIE UMIEM" tego zrobić.

komentarz 20 stycznia 2019 przez xmentor Nałogowiec (49,520 p.)

Można to na różnorakie sposoby zrobić, jeden z nich: https://codepen.io/anon/pen/NeQoQq?editors=1011 (otwórz konsole po naciśnięciu "Send").

Wyżej dostałeś link do wątku na stackoverflow, tam też są przykłady.