RadioButton per JS aktivieren: Logikfehler?


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

tklustig

Erfahrenes Mitglied
#1
Hallo Leute,
folgender Code soll über JS erwirken, dass immer derjenige Radiobutton nach dem Request aktiviert bleibt, der bereits aktivert war. Macht der Code aber nicht. Der aktivert immer nur den letzten der Beiden. Wo liegt der Fehler? Wie geht's richtig?
Javascript:
    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
        <center>
            <div id="dropdown">
                <?php
                require_once 'inc/anzeigen.php';
                echo auswahlStep(48, 48, 500);
                ?>
            </div>
            <div id="submitDropDown">
                <label>DropDown</label>
                <input class="button3" type="submit" name="submit0" value="Submit">
            </div>
            <div>
                <input type="radio" name="rad" id="active1" value="frontOf">vor
                <input type="radio" name="rad" id="active2" value="back">zurück
            </div>
            <br>
        </center>
        <script>
            if (document.getElementById('active1').checked == false) {
                document.getElementById('active2').checked = true;
                alert("Activated RB2");
            } else if (document.getElementById('active2').checked == false) {
                document.getElementById('active1').checked = true;
                alert("Activated RB1");
            }
        </script>
    </form>
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#3
Wo liegt der Fehler?
Das Problem ist, dass nach dem Neuladen der Seite durch Abschicken des Formulars keiner der Radiobuttons mehr gesetzt ist. Daher ergibt deine Abfrage im Javascript immer true und der zweite RB wird gecheckt.
Wie geht's richtig?
Wie Basti es schon vorgeschlagen hat, bei dem richtigen Radiotbutton das Attrribut "checked" mit PHP hinzu fügen. Nach dem Abschicken des Formulars steht der Wert der Gruppe ja in $_POST['rad'] zur Verfügung und Du kannst daraus ableiten, wo das "checked"Attribut gesetzt werden muss.
 

Sempervivum

Erfahrenes Mitglied
#5
Du kannst jederzeit HTML-Text komplett oder einzelne Bestandteile mit PHP generieren, z. B. in diesem Fall etwa so:
Code:
<?php
$valrad = $_POST['rad'];
if ($valrad == 'frontOf') {
    $checked1 = " checked";
    $checked2 = "";
} else {
    $checked1 = "";
    $checked2 = " checked";
}
?>

                <input type="radio" name="rad" id="active1" value="frontOf"<?php echo $checked1;?>>vor
                <input type="radio" name="rad" id="active2" value="back"<?php echo $checked2;?>>zurück
 

basti1012

Erfahrenes Mitglied
#6
Ist vieleicht nicht optimal, aber du siehst wie es gemeint ist
Code:
<?php
        if($_POST['rad1']=='frontOf'){
           $eins='checked';
           $zwei='';
        }else{
           $zwei='checked';
           $eins='';
        }
?>
<form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<center>
    <div id="dropdown">
        </div>
        <div id="submitDropDown">
                <label>DropDown</label>
                <input class="button3" type="submit" name="submit0" value="Submit">
        </div>
        <div>
                <input type="radio" name="rad1" id="active1" value="frontOf" <?php echo $eins; ?>>vor
                <input type="radio" name="rad1" id="active2" value="back" <?php echo $zwei; ?>>zurück
        </div>
        <br>
</center>
</form>
 

basti1012

Erfahrenes Mitglied
#7
ha:) . Da lag ich ja doch nicht so falsch.
Das finde ich ja in dem anderen Forum gut.Wenn man einen Beitrag schreibt und in der Zeit einer Antwortet dann steht das da. Das würde solche doppelte Posts verhindern.
 

tklustig

Erfahrenes Mitglied
#9
Okay. Dass das nur mit PHP geht, leuchtet mir zwar noch nicht ganz ein, da der Server eigentlich nix mit dem zu tun hat, was der User im Browser angibt-dachte ich zumindest-, aber gut, da wurde ich wohl eines Besseren belehrt. So habe ich es jetzt letztlich umgesetzt:
PHP:
  <?php
            $checked1 = "checked";
            $checked2 = "";
            if (!empty($_REQUEST['submit0'])) {
                $radioBReq = $_REQUEST['rad'];
                if ($radioBReq == 'frontOf') {
                    $checked1 = 'checked';
                    $checked2 = '';
                } else {
                    $checked1 = '';
                    $checked2 = 'checked';
                }
            }
            ?>
            <div>
                <input type="radio" name="rad" value="frontOf" <?php if (!empty($checked1))  ?> <?= $checked1; ?>>vor
                <input type="radio" name="rad" value="back"<?php if (!empty($checked2))  ?> <?= $checked2; ?>>zurück
            </div>
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#10
Dass das nur mit PHP geht, leuchtet mir zwar noch nicht ganz ein, da der Server eigentlich nix mit dem zu tun hat, was der User im Browser angibt-dachte ich zumindest-
Die Sache ist ja die, dass beim Abschicken das Formular an den Server geschickt wird und dann hat dieser die Karten, d. h. die Info, welcher Radiobutton gedrückt wurde. Anschließend schickt der Server die neue Seite wieder an den Client und muss diese Info in irgend einer Form wieder mitliefern. Man könnte das auch in Form einer Variablen tun und abhängig davon auf dem Client wieder den richtigen Radiobutton auf checked setzen.
Und man kann meistens alles auch ganz anders machen, z. B. die Info im Localstorage speichern und wieder auslesen.
 

tklustig

Erfahrenes Mitglied
#11
also in etwa so:
Javascript:
$(document).ready(function() {
        
    restoreContents();
    
    $('#edit').bind('click', toggleEditContent);
    $('#clear').bind('click', resetContent);
    
    function saveContents() {
        var rbIsClicked = $('#rbIsClicked').html();
        localStorage['rbIsClicked'] = rbIsClicked;
    }
    
    function restoreContents() {
        var myrbIsClicked = localStorage['rbIsClicked'];
        if (myrbIsClicked != undefined) {
            $('#rbIsClicked').html(myrbIsClicked);
        }
    }
    
    function toggleEditContent(e) {
        if ($('#rbIsClicked').attr('contenteditable') == 'false') {
            $('#rbIsClicked').attr('contenteditable', 'true');
            $('#edit').val('Speichern');
            $('#rbIsClicked').focus();
        } else {
            $('#rbIsClicked').attr('contenteditable', 'false');
            $('#edit').val('Bearbeiten');
            saveContents();
        }
    }
    
    function resetContent(e) {
        localStorage.clear();
        window.location.reload();
    }   
});
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#12
Hast Du das getestet? Einiges leuchtet mir nämlich nicht ein.
Ich stelle mir das Speichern und Einlesen eher so vor:
Code:
        function saveContents() {
            var rbIsClicked = $("input[type='radio'][name='rad']:checked");
            if (rbIsClicked.length != 0) localStorage['rbIsClicked'] = rbIsClicked.attr("id");
        }
        function restoreContents() {
            var rbIsClicked = localStorage['rbIsClicked'];
            if (rbIsClicked != undefined) {
                $('#' + rbIsClicked).attr('checked', true);
            }
        }
        $("input[type='radio'][name='rad']").on("change", saveContents);
        restoreContents();
 

tklustig

Erfahrenes Mitglied
#13
Na ja, damit wollte ich eigentlich nur das Prinzip von Local Storages aufzeigen, ohne direkt den Kontext auf die Radio Buttons zu legen. Im übrigen habe ich mich dafür entschieden, Deine local Storage Lösung zu nehmen, da sie meinem Grundverständnis entspricht: PHP ist für den Server zuständig, JS für den Client;)
Javascript:
 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
.
.
<div>
  <input type="radio" name="rad" id="dummy1" value="frontOf">vor
  <input type="radio" name="rad" id="dummy2" value="back">zurück
</div>
.
.
<script>
        function saveContents() {
            var rbIsClicked = $("input[type='radio'][name='rad']:checked");
            if (rbIsClicked.length != 0)
                localStorage['rbIsClicked'] = rbIsClicked.attr("id");
        }
        function restoreContents() {
            var rbIsClicked = localStorage['rbIsClicked'];
            if (rbIsClicked != undefined) {
                $('#' + rbIsClicked).attr('checked', true);
            }
        }
        $("input[type='radio'][name='rad']").on("change", saveContents);
        restoreContents();
</script>
 
Zuletzt bearbeitet:
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…