Dynamiczne radio buttons

0

Mam problem. Potrzebuje sworzyc formularz z radio buttonami np.

<!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?

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.

0

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

0

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

0

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

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:


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

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:

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

0

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

<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?

1

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


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

<script>

 $(document).ready(function(){

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

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

        });

});

</script>

0

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

<?php
$idd= $_POST['var1'];
?>
0
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <?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'];}              
                                 ?>
<div class="radio">                               
                                 <op1><label><input type="radio" name="answer1" id="one">
<?php
                                $query = $this->db->query('SELECT id, content FROM answers where id=20');
                                foreach ($query->result_array() as $row)
                                   echo $row['content'];       
                                 ?>
</label></op1>
                                </div>
                                <div class="radio">                       
                                <op2><label><input type="radio" name="answer1"id="">
<?php
                                $query = $this->db->query('SELECT content FROM answers where id=21');
                                foreach ($query->result_array() as $row)
                                echo $row['content'];               
                                 ?>
</label></op2>
                            </div> 
<div id="div1"></div>
<script>
 $(document).ready(function(){
    
               $("op1").click(function(){
                $.post( "question.php", {var1:2} ).done(function(data) {
                         $("#div1").append(data);
                        });
               });
});
</script>     
</html>

Tak to mniej wiecej wyglada. Troche porozwalane, bo kolorowalem

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.

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