Javascript uruchamiany kiedy skrypt PHP prześle odpowiednią wartość do HTML

0

Cześć. Jestem osobą początkującą. Nigdy nie programowałem w Javascript. Stworzyłem quiz. Wszystko składa się z czterech plików; 1. index.php, 2. quiz_script.php, 3. script.js, 4. style.css.

  1. index.php - strona którą widzi użytkownik
  2. quiz_script.php - skrypt PHP odpowiadający za przesyłanie danych do bazy danych, sprawdza też czy wszystkie pola są zaznaczone, (ew. wpisane imię). Jeżeli czegoś brakuje wyrzuca błędy. Jeżeli wyrzuca błędy to znaczy, że po każdej próbie wysłania odpowiedzi do bazy danych, skrypt kontroluje czy wszystkie pola zostały wypełnione/zaznaczone. Oczywiście po kliknięciu przycisku "Wyślij" w celu przesłania kompletnego quizu do bazy danych, strona odświeża się. Dlatego też użyłem skrypty JS do zachowywania wartości z radio inputów w local storage, żeby zapobiec po raz kolejny wypełniania quizu jeżeli coś pójdzie nie tak i w którymś polu jest luka. Problem jest taki, że po tym jak skrypt puści dane do bazy danych bo kryteria zostały spełnione to wartości w radio inputach pozostają. Chciałbym zrobić jedną z dwóch rzeczy:

a) usunąć local storage przy pomocy skryptu JS, ale tylko wtedy kiedy skrypt PHP prześle odpowiednią wartość do index.php - pierwsze rozwiązanie
b) po sukcesywnym wysłaniu zablokować po stronie użytkownika w plikach lokalnych możliwość wypełniania pól w quizie/formularzu. - drugie rozwiązanie

  1. script.js - skrypt który pobiera wartości z radio inputów i zapisuje w lokalnej pamięci przeglądarki.

  2. style.css - w tym przypadku w ogóle nie istotny plik, dodany dla formalności

Jak ja to widzę:

 <h3>5. JavaScript is a/an ________ language.</h3>
            <input type="radio" name="q5" value="a" id="q5a">a. compiled <br> 
            <input type="radio" name="q5" value="b" id="q5b">b. interpreted<br>

            <p class="error"><?= $q5_error ?></p>

            <br><br>
            <button type="submit" name="insert" value="Submit" onclick="<?= $onclick; ?>">Submit</button>

$onclick pobrany ze skryptu PHP (PONIŻEJ - PUNKT 2), trafia do strony głównej (index.php - POWYŻEJ - PUNKT 1)

    if($query_run)
    {
      $onclick = "true";
      $success = "Sent!";
      $name = $email = $q1 = $q2 = $q3 = $q4 = $q5 = "";
    }
    else
    {
      $onclick = "false";
      $denied = "Something went wrong!";
    }

Jeśli $onclick = "true" w skrypcie PHP (POWYŻEJ - PUNKT 2) to JavaScript (PONIŻEJ - PUNKT 3) uruchamia się i czyści local storage.

Skrypt JS do zapisywania wartości radio inputów w local storage - W PEŁNI DZIAŁA!

$(document).ready(function(){
  var radios = document.getElementsByName("q5");
  var val = localStorage.getItem('q5');
  for(var i=0;i<radios.length;i++){
    if(radios[i].value == val){
      radios[i].checked = true;
    }
  }
  $('input[name="q5"]').on('change', function(){
    localStorage.setItem('q5', $(this).val());

  });
});

Skrypt JS do czyszczenia radio inputów, NIEZAIMPLEMENTOWANY I NIE WIEM JAK RUSZYĆ.

function clearStorage(){
localStorage.removeItem('q5');
}

Czy takie coś w ogóle jest wykonalne? Jeżeli tak to jak zaimplementować ten JavaScript, żeby uruchamiał się po otrzymaniu wartości true przez przycisk submit. Przycisk dostaje tą wartość, tylko że JavaScript się nie uruchamia bo nie ma jak - bo nie potrafię tego zaprogramować, żeby JavaScript reagował na tą wartość.

1

Plus za znalezienie działającego rozwiązania, ale nie jest ono odpowiednie w tej sytuacji, bo Ci komplikuje sprawę. Możesz to zrobić kompletnie bez użycia localStorage :) Słowo klucz, to sesja. Jeżeli całość dzieje się z przeładowaniem strony (synchronicznie), a nie za pomocą ajax (asynchronicznie), to możesz zrobić +- coś takiego:

<?php
// plik quiz_script.php
session_start();

$_SESSION['myForm'] = $_POST;

// reszta kodu po staremu

if ($success) { // jeżeli udało się zapisać, bo formularz poprawny, to
    unset($_SESSION['myForm']);
}
<?php
// plik index.php
session_start();

$myForm = [];
if (isset($_SESSION['myForm']) {
    $myForm = $_SESSION['myForm'];
}

?>

<input type="radio" name="q5" value="a" id="q5a" checked="<?= $myForm['q5'] === true ? 'checked' : '' ?>">a. compiled <br> 

Nie pamiętam, czy jak zaznaczysz checkbox, to wartość w PHP $myForm['q5'] będzie zawierała true, czy coś innego, ale po prostu sobie do tego przyrównaj ;) Gdyby odwołanie do $myForm['q5'] sypało Ci błędami, to po prostu zainicjalizuj tablicę domyślnymi wartościami, zamiast [].

Tutaj masz jakiś tutorial

1

Nie wystarczą zwykłe "sticky form fields"? Nawet sesja nie jest potrzebna.

0

Wydaje mi się, że ciężko będzie mi to zrealizować.

0

Zrealizowałem po swojemu, problem solved.

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