funkcja z formularzem i zmienną

Odpowiedz Nowy wątek
2019-08-16 09:34
0

Cześć,
Mam taki formularz:

<DIV id=srodek> 

    <form method="post"  name="takietam">
    <div id="ST">
    <table border="0" align="center" cellpadding="4" cellspacing="4">
        <tr> 
          <td><input type="checkbox" name="ST_A" value="ON" onclick="st_radio();" > dostęp do A</td>
          <td><input type="radio" name="ST_A_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_A_R" value="k" disabled> opcja k</td>
        </tr>
        <tr> 
          <td><input type="checkbox" name="ST_B" value="ON" onclick="st_rad('B')" > dostęp do B</td>
          <td><input type="radio" name="ST_B_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_B_R" value="k" disabled> opcja k</td>
        </tr>
                <tr> 
          <td><input type="checkbox" name="ST_C" value="ON"> dostęp do C</td>
          <td><input type="radio" name="ST_C_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_C_R" value="k" disabled> opcja k</td>
        </tr>
                <tr> 
          <td><input type="checkbox" name="ST_D" value="ON"> dostęp do D</td>
          <td><input type="radio" name="ST_D_R" value="o" disabled> opcja o</td>
          <td><input type="radio" name="ST_D_R" value="k" disabled> opcja k</td>
        </tr> 
    </table>
    </div>
    </form>
  </DIV>

W którym chcę, aby aktywność dwóch opcji radio zależała od checkboxa, który je poprzedza.
Udało mi się to zrobić "na sztywno" (część A) za pomocą funkcji st_radio(), ale nie chciałbym tworzyć kolejnych niemal takich samych funkcji tylko chciałabym wywoływać taka funkcję z parametrem. Tyle tylko że coś robię źle (czyżby typ zmiennych?) i funkcja st_rad(zmienna) nie działa jakbym sobie tego życzyła.

    function st_radio()
    {
        var checkbox = document.forms[0].ST_A;
        var sta = document.forms[0].ST_A_R;

        if(checkbox.checked) {
            for (var i = 0; i < sta.length; i++) {
            sta[i].disabled = false;    }
        } 
        else {
            for (var i = 0; i < sta.length; i++) {
            sta[i].disabled = true;
            sta[i].checked = false;         };
        }
    }

    function st_rad(zmienna)
    { 
        var p = 'ST_'+zmienna;
        var radi = 'ST_'+zmienna+'_R';

        alert (zmienna);
        alert (p);
        alert (radi);

        /*var checkboxr = document.getElementById(p);
        alert (checkboxr); */

        var checkboxr = document.forms[0].p;
        alert (checkboxr); 

        var STc = document.forms[0].radi;
        alert (STc); 

        if(checkboxr.checked) {
            for (var i = 0; i < STc.length; i++) {
            STc[i].disabled = false;    }
        } 
        else {
            for (var i = 0; i < STc.length; i++) {
            STc[i].disabled = true;
            STc[i].checked = false; };
        }   
    }

Pierwsze trzy alerty wyświetlają właściwy ciąg znaków, natowmiast alert (checkboxr) i alert (STc) wyśiwetlają "undefined".
Zaznaczam że te alerty nie są mi do niczego potrzebne oprócz sprawdzania działania funkcji ;)
Bardzo proszę o pomoc :)

edytowany 1x, ostatnio: cerrato, 2019-08-16 09:57

Pozostało 580 znaków

2019-08-16 10:15
1

Nie wiem skąd wziąłeś to .p oraz .radi, ale nie tak się to robi.

Dopisz sobie pod tymi altertami taki kod

console.log(document.forms[0]);

W konsoli developerskiej zobaczysz wszystko czego potrzebujesz :)


edytowany 1x, ostatnio: TomRiddle, 2019-08-16 10:15

Pozostało 580 znaków

2019-08-16 10:28
0
TomRiddle napisał(a):

Nie wiem skąd wziąłeś to .p oraz .radi, ale nie tak się to robi.

To napisz mi proszę jak, bo właśnie nie wiem ;) A zaznaczam, że zanim wysłałam tego posta sprawdziłam różne opcje których już tutaj nie przytoczę, ale żadna nie była właściwa.
Informacja zwrócona przez konsole" SCRIPT5007: Nie można pobrać właściwości „checked” dla niezdefiniowanego lub pustego odwołania" też mi nie pomaga bo to że jest źle wiem, ale nie wiem jak zrobić żeby było dobrze ;)

Pozostało 580 znaków

2019-08-16 10:43
0
Vesna77 napisał(a):
TomRiddle napisał(a):

Nie wiem skąd wziąłeś to .p oraz .radi, ale nie tak się to robi.

To napisz mi proszę jak, bo właśnie nie wiem ;) A zaznaczam, że zanim wysłałam tego posta sprawdziłam różne opcje których już tutaj nie przytoczę, ale żadna nie była właściwa.

Myślałem że dam Ci wędkę, i Cię nakieruję.

Otóż sposobów żeby dobrać się do jakiś elementów (takich jak <input/> u Ciebie) jest kilka, najpopularniejszymi jest document.getElementById(), ale z document.forms[0] (jeśli faktycznie formularz jest pierwszy od góry) też jest okej. API do obsługi modelu DOM w JS, jest tak zbudowane, że elementy (np <input name="foo"/>) są reprezentowane w obiekcie form (jednym forms, np forms[0]) właśnie pod name tego obiektu.

Więc jeśli wsadzisz do formularza input <input type="check" name="test"/>, to powinieneś się do niego odnieść document.forms[0].test.


Pozostało 580 znaków

2019-08-16 11:21
0

@TomRiddle: ależ ja lubię wędki tylko w tym momencie właśnie brakuje mi pomysłu jak się nia posłużyć ;)
Jak widzisz w pierwszej funkcji st_radio() sposób o którym piszesz już znam. Problemem dla mnie jest to że ja chcę aby ten "test" się zmieniał zgodnie z parametrem z którym wywołam funkcję :)
document.getElementById() też już próbowałam co nawet widać w linii 26 która zapomniałam usunąć zanim przekopiowałam tutaj treść ;)

Pozostało 580 znaków

2019-08-16 11:43
2
Vesna77 napisał(a):

Problemem dla mnie jest to że ja chcę aby ten "test" się zmieniał zgodnie z parametrem z którym wywołam funkcję :)

Jesli chcesz żeby kilka elementów na raz było zablokowanych, to może lepiej byłoby użyć klasy?

<form>
  <input class="one"/>
  <input class="one"/>
  <input class="one"/>
  <input class="two"/>
  <input class="two"/>
  <input class="two"/>
</form>
function disableMany(className) {
  const elements = document.getElementsByClassName(className);
  for (let key in elements) {
    if (elements.hasOwnProperty(key)) {
      const element = elements[key];
      // tutaj zrób z nim co chcesz, np element.disabled = true;
    }
  }
}

I możesz tego użyć tak

disableMany("one"); // blockuje te o klasie "one"
disableMany("two"); // blockuje te o klasie "two"

Pozostało 580 znaków

2019-08-16 13:18
0

Ok, a da się bez klas?

Pozostało 580 znaków

2019-08-16 13:20
1
Vesna77 napisał(a):

Ok, a da się bez klas?

Da się, możesz ustawić różne id lub różne name dla elementów, np a1, a2, a3 dla jednych, i np b1, b2 i b3 dla innych, ale to będzie się wiazało z tym że te id i name będą różne, podczas gdy z klasami byłoby to ta sama nazwa.

Ale oczywiście z id i name może zrobić to samo - tylko pamiętaj że te name oraz id muszą być unikatowe dla każdego elementu.


Pozostało 580 znaków

2019-08-19 08:38
0
TomRiddle napisał(a):

Jesli chcesz żeby kilka elementów na raz było zablokowanych, to może lepiej byłoby użyć klasy?
function disableMany(className) {

Spróbowałam użyć tej funkcji którą mi tutaj napisałeś:

    function disableMany(className) {
 const elements = document.getElementsByClassName(className);  //SCRIPT1002: Błąd składni
  for (let key in elements) {
    if (elements.hasOwnProperty(key)) {
      const element = elements[key];
      // tutaj zrób z nim co chcesz, np 
      element.disabled = true;
    }
  }
}

z wywołaniem:

  <td><input type="checkbox" name="ST_C" value="ON" onclick="disableMany('C');"> dostęp do C</td> //Wartość właściwości „disableMany” jest pusta lub niezdefiniowana, nie jest obiektem Function

I mam takie komunikaty jak wyżej zaznaczyłam.
Przepraszam, jesli moje pytania wydają się głupie i trywialne, a ja leniwa, ale ja dopiero raczkuje w temacie i to co zapewne dla Was jest łatwe i od razu widoczne dla mnie jest często czarną magią...

edytowany 2x, ostatnio: cerrato, 2019-08-19 09:00

Pozostało 580 znaków

2019-08-19 08:59

Już nieaktualne. Znalazłam to czego szukałam :)

Zamiast

var checkboxr = document.forms[0].p;

Miało być

var checkboxr = document.forms[0].elements[p];

i analogicznie do zmiennej radi :)

Pozostało 580 znaków

2019-08-19 09:22
0
Vesna77 napisał(a):
TomRiddle napisał(a):

Jesli chcesz żeby kilka elementów na raz było zablokowanych, to może lepiej byłoby użyć klasy?
function disableMany(className) {

Spróbowałam użyć tej funkcji którą mi tutaj napisałeś:

  function disableMany(className) {
 const elements = document.getElementsByClassName(className);  //SCRIPT1002: Błąd składni

być może wynikało to z tego że użyłem const, zamiast var, a Ty uruchomiłeś to na środowisku ES5?

Zamień const na var i będzie ok.


Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0