Dynamiczne radio buttons

Dynamiczne radio buttons
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0

Mam problem. Potrzebuje sworzyc formularz z radio buttonami np.

Kopiuj
<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>

</body>
</html>

Tylko tak, po zaznaczeniu jednej z opcji powinno pojawiac sie nastepne pytanie bez przycisku "potwierdz", "submit" . W javie pewnie bedzie trzeba to zrobic. Ma ktos jakis pomysl?

edytowany 2x, ostatnio: dzek69
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
krzysiek050
krzysiek050
krzysiek050
krzysiek050
  • Rejestracja:ponad 12 lat
  • Ostatnio:ponad 4 lata
  • Postów:1272
0

W javascripcie a nie javie. Na pierwszy rzut przychodzą mi 2 rozwiąznia.

  1. Modyfikacja dom, czyli po zaznaczeniu jednej opcji tworzysz input hidden z zaznaczoną wartością i zmieniasz radiobuttony na inne.
  2. Wszystkie radiobuttony są już w dom ale ukryte w css'ie. Manipulujesz wartością visible całych grup.

Druga opcja będzie pewnie sporo szybsza.

dzek69
Pierwsza jest wręcz głupia :p
krzysiek050
jeżeli coś jest głupie ale działa to nie jest głupie :P
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Heheczek
Heheczek
Heheczek
Heheczek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 5 lat
  • Postów:148
0

Można również wykorzystać ajax, wtedy możesz do serwera Od razu zapisywać odpowiedzi jeśli potrzebujesz

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Tumeg
Tumeg
Tumeg
Tumeg
  • Rejestracja:prawie 11 lat
  • Ostatnio:ponad 8 lat
  • Postów:687
0

Na szybko naskrobałem przykład w jQuery, dostosuj do swoich potrzeb:
https://jsbin.com/cusuniqili/1/edit?html,js,console,output

edytowany 3x, ostatnio: Tumeg
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0

A mogłbyś coś więcej powiedzieć, bo nie znam się na ajaxie?

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
pavon147
pavon147
pavon147
pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
1

AJAX to metoda komunikacji z serwerem. Możesz wysłać żądanie do serwera dynamicznie tzn. bez przeładowania aplikacji i jednocześnie obsłużyć odpowiedź tego serwera. W oczekiwaniu na dane, które ma zwrócić serwer, możesz wyświetlać powiadomienia typu: "proszę czekać...".

Wszystko to możesz wygodnie obsłużyć z poziomu jQuery. Prosty przykład:

Kopiuj

$.ajax({

  url:"test.php", // plik na serwerze, który obsłuży zapytanie

  type:"POST",

  data:{
      id:1 // wysyłane dane do pliku "test.php", ten plik z kolei powinien nasłuchiwać nadejścia posta z wartością 'id'
  },

  success:function(response){
   alert(response);
   // W tym bloku dokonujesz obsługi danych, które odeśle Ci serwer
  }

});

   // Tutaj (poza obiektem) wykonujesz działania, które mają odbywać się podczas oczekiwania na odpowiedź serwera
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0

pavon147 , a dałbyś radę wrzucić jakis prosty działający przykładzik? Z góry dzięki

Próbowałem sam coś zrobić i mam na razie to:

Kopiuj
<p id="demo"></p>
<script>
var x = document.getElementById("one");
x.addEventListener("click", mySecondFunction);


function mySecondFunction() {
    document.getElementById("demo").innerHTML = "Costam";}

</script>

Gdybym mógł w miejscu "Cośtam" załadować cały plik do "demo" ,albo po prostu wrzucic kod, to byłbym uratowany, ale niestety tak sie nie da.

edytowany 1x, ostatnio: spertus07
pavon147
Nie wiem, czy dobrze rozumiem. "załadować cały plik do 'demo'", chodzi Ci o to, że do innerHTML-a miałaby być przypisana odpowiedź z serwera?
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0

Dobra znalazlem inne rozwiazanie, ale rodzi sie kolejne pytanie z tym zwiazane:

Kopiuj
<div id="div1"></div>
<script>
 $(document).ready(function(){
        $("op1").click(function(){
    $("#div1").load("question.php", {var1:2}, function(responseTxt, statusTxt, xhr){});
    });
});
</script>

Wszystko w miare dobrze dziala, bo wczytuje mi z bazy pytania itd, tylko nadpisuje się wszystko w div1 :/ Da sie jakoś inaczej uzyc funkci load, zeby nie nadpisywala, ale dodawala do div'a dolejne pytania?

dzek69
Uprzejmie proszę o wstawianie kodu w znaczniki kolorujące składnię. Popraw posty proszę.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
pavon147
pavon147
pavon147
pavon147
  • Rejestracja:ponad 13 lat
  • Ostatnio:prawie 8 lat
1

Zrezygnuj z tej metody. jQuery.load() nie da Ci oczekiwanych rezultatów. Spróbuj w taki sposób, skorzystałem z jQuery.get()

Kopiuj

<div id="div1"></div>

<script>

 $(document).ready(function(){

        $("op1").click(function(){

               $.get( "question.php", {var1:2} ).done(function(data) {
                         $("#div1").append(data);
               });

        });

});

</script>
edytowany 1x, ostatnio: pavon147
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0

Ale w takim przypadku musze zmienic tez plik php, gdzie mam wczytywanie z post'a:

Kopiuj
<?php
$idd= $_POST['var1'];
?>
edytowany 1x, ostatnio: spertus07
Zobacz pozostałe 2 komentarze
pavon147
Co dokładnie przychodzi Ci z serwera? Pytanie + odpowiedzi?
spertus07
Na razie samo pytanie, dwie odpowiedzi (stałe, nie pobierane na razie z bazy). Zależnie od wyboru pojawia sie nastepne pytanie.
pavon147
Nie wiem, dlaczego pojawiają się podwójnie, masz na myśli wyświetlanie dwa razy dokładnie tego samego pytania? Po stronie PHP musi być coś nie tak.
spertus07
A moze byc to wina, ze potem question sam siebie laduje przy nastepnych pytaniach? Ale jesli by sie zapetlilo to w ogole by sie nie wczytalo, bo by poszlo wiecej niz dwa razy
pavon147
Możesz pokazać ten question.php?
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0
Kopiuj
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Kopiuj
 <?php
                             $idd= $_POST['var1'];
                             $query = $this->db->query('SELECT id, content FROM questions');
                                foreach ($query->result_array() as $row)
                                    if($row['id']==$idd){
                                    echo $row['content'];}              
                                 ?>
Kopiuj
<div class="radio">                               
                                 <op1><label><input type="radio" name="answer1" id="one">
Kopiuj
<?php
                                $query = $this->db->query('SELECT id, content FROM answers where id=20');
                                foreach ($query->result_array() as $row)
                                   echo $row['content'];       
                                 ?>
Kopiuj
</label></op1>
                                </div>
                                <div class="radio">                       
                                <op2><label><input type="radio" name="answer1"id="">
Kopiuj
<?php
                                $query = $this->db->query('SELECT content FROM answers where id=21');
                                foreach ($query->result_array() as $row)
                                echo $row['content'];               
                                 ?>
Kopiuj
</label></op2>
                            </div> 
<div id="div1"></div>
Kopiuj
<script>
 $(document).ready(function(){
    
               $("op1").click(function(){
                $.post( "question.php", {var1:2} ).done(function(data) {
                         $("#div1").append(data);
                        });
               });
});
</script>
Kopiuj
</html>

Tak to mniej wiecej wyglada. Troche porozwalane, bo kolorowalem

spertus07
Przesunalem tagi <op1> i <op2> i dziala na razie
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
spertus07
spertus07
spertus07
spertus07
  • Rejestracja:ponad 9 lat
  • Ostatnio:około 8 lat
  • Postów:77
0

Mam nastepny problem :/ Macie pomysl jak rozwiazac problem wielokrotnego klikniecia? Chcialbym, zeby mozna bylo wybrac tylko raz, a teraz klikniesz 10 razy to sie dopisze 10 razy nowe pytanie.

spertus07
Juz rozwiazane: uzyta metoda one()
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto