Formularz z radioboxami

Question

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.

Answer 1

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.

Comments

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>

 

---

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

---

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ć.

---

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.

---

Jak mam to umieścić w swoim kodzie? Bo nie chcę go pisać od nowa.