Obliczanie wartości w zależności od dwóch wartości w formularzu

Question

Dzień dobry

proszę o pomoc zwłaszcza tych co ogarniają JS, mi do Was bardzo daleko. Naczytałem się i nadal nie wiem jak to ogarnąć

Mam taki formularz

<form id="testInput">
<div>
  <input type="radio" id="okres" name="okres" value="1" >
  <label for="huey">Huey</label>

  <input type="radio" id="okres" name="okres" value="2" >
  <label for="dewey">Dewey</label>

  <input type="radio" id="okres" name="okres" value="3" >
  <label for="louie">Louie</label>
</div>

    <label for="start">Start date:</label>
<?php echo date("Y-m-d"); ?>
    <input type="date" id="start" name="start"
           value="<?php date('Y-m-d'); ?>"
           min="<?php date("Y-m-d"); ?>" max="2022-04-31"
>

</div>
</form>
<div id="efekt">55</div>

Chodzi o następujący efekt działania:

zaznaczenie  lub zmiana pola "okres" powoduje pobranie wartości wybranego pola (tu w zakresie od 1 do 3)

następnie sprawdzenie czy pole "start" jest określone (wybrana data) czy nie. Jeśli nie to nic się nie dzieje, jeśli jest określona, wówczas do wybranej daty dodaję wybraną wartość pola "okres"

to samo się dzieje w przypadku wyboru, określenia daty w polu "start". Sprawdzenie czy jest wybrana wartość "Okres", jeśli nie to nic się nie dzieje, jeśli jest wybrana, wówczas następuje zwiększenie daty o wybraną wartość pola "okres".

W obu przypadkach chodzi o wyświetlenie daty w div ID=efekt

Już dziękuje za pomoc, nie raz dzięki Wam znalazłem rozwiązanie.

 

 

Comments

BTW, w liniach 16 i 17 brakuje polecenia echo.

<form id="testInput">
<div>
  <input type="radio" id="okres" name="okres" value="1" >
  <label for="huey">Huey</label>
 
  <input type="radio" id="okres" name="okres" value="2" >
  <label for="dewey">Dewey</label>
 
  <input type="radio" id="okres" name="okres" value="3" >
  <label for="louie">Louie</label>
</div>
 
    <label for="start">Start date:</label>
<?php echo date("Y-m-d"); ?>
    <input type="date" id="start" name="start"
           value="<?php echo date('Y-m-d'); ?>"
           min="<?php echo date("Y-m-d"); ?>" max="2022-04-31"
>
 
</div>
</form>
<div id="efekt">55</div>

no i w linii 20 masz div-a "domykającego" (</div>)  bez podanego wcześniej "otwierającego" (<div>)

 

czy nie chodziło Tobie czasem o taki zapis?

<form id="testInput">
  <div>
    <input type="radio" id="okres" name="okres" value="1" >
    <label for="huey">Huey</label>
 
    <input type="radio" id="okres" name="okres" value="2" >
    <label for="dewey">Dewey</label>
 
    <input type="radio" id="okres" name="okres" value="3" >
    <label for="louie">Louie</label>
  </div>
  
  <div>
    <label for="start">Start date: <?php echo date('Y-m-d'); ?></label>
    <input type="date" id="start" name="start"
         value="<?php echo date('Y-m-d'); ?>"
         min="<?php echo date('Y-m-d'); ?>" max="2022-04-31"
    > 
  </div>
</form>
<div id="efekt">55</div>

 

skoro w min="<?php echo date("Y-m-d"); ?>" ustalasz datę z poziomu php-a to raczej dobrze by było ustawić też max="2022-04-31" z poziomu php-a a nie "ręcznie"

przykład

  <div>
    <label for="start">Start date: <?php echo date('Y-m-d'); ?></label>
    <input type="date" id="start" name="start"
           value="<?php echo date('Y-m-d'); ?>"
           min="<?php echo date('Y-m-d'); ?>" 
           max="<?php echo date('Y-m-d', strtotime(date('Y-m-d').'+ 1 week')); ?>"
    > 
  </div>

 

[ UPDATE ]

żeby atrybut for elementu label spełnił swoje zadanie to id wybranego elementu input, muszą "wskazywać" na tę samą nazwę, np.

<input type="radio" id="huey" name="okres" value="1" >
<label for="huey">Huey</label>

 

---

Dzięki bardzo za podpowiedzi, ten kod był bardzo roboczy i masz rację, że nie do końca dopracowany.

Chodzi szczególnie o cel całości czyli to wszystko co jest po stronie JS

Answer 1

W przykładzie "skorzystałem" z Event Delegation ( [ 1 ]  [ 2 ] )

 

dla przykładowego kodu php

<form id="testInput">
  <div>
    <input type="radio" id="huey" name="okres" value="1">
    <label for="huey">Huey</label>

    <input type="radio" id="dewey" name="okres" value="2">
    <label for="dewey">Dewey</label>

    <input type="radio" id="louie" name="okres" value="3">
    <label for="louie">Louie</label>
  </div>

  <div>
    <label for="start">Start date: <?php echo date('Y-m-d'); ?></label>
    <input type="date" id="start" name="start"
           value="<?php echo date('Y-m-d'); ?>"
           min="<?php echo date('Y-m-d'); ?>"
           max="<?php echo date('Y-m-d', strtotime(date('Y-m-d').'+ 1 week')); ?>"
    > 
  </div>
</form>
<div id="efekt">0</div>

 

otrzymujemy np. taki kod html

<form id="testInput">
  <div>
    <input type="radio" id="huey" name="okres" value="1" >
    <label for="huey">Huey</label>

    <input type="radio" id="dewey" name="okres" value="2" >
    <label for="dewey">Dewey</label>

    <input type="radio" id="louie" name="okres" value="3" >
    <label for="louie">Louie</label>
  </div>

  <div>
    <label for="start">Start date: 2022-04-19</label>
    <input type="date" id="start" name="start"
           value="2022-04-19"
           min="2022-04-19"
           max="2022-04-26"
    > 
  </div>
</form>
<div id="efekt">0</div>

 

i propozycja

window.onload = load;

function load() {
  const form = document.querySelector('form'),
        datepicker = form.querySelector('[type="date"][name="start"]'),
        efekt = document.querySelector('#efekt');

  form.addEventListener('click', checkPeriod);
  datepicker.addEventListener('change', checkPeriod);

  function checkPeriod(e) {
    if (e.target.nodeName == 'INPUT') {
      const radio_value = form.querySelector('[type="radio"][name="okres"]:checked') || null;
      if (radio_value) {
        const date = new Date(datepicker.value);
        date.setDate(date.getDate() + parseInt(radio_value.value));
        efekt.textContent = date.getFullYear() + '-'
          + ("0" + (date.getMonth() + 1)).slice(-2) + '-'
          + ("0" + date.getDate()).slice(-2);
      }
    }
  }
}

 

Comments

Rewelacja, dziękuję bardzo za pomoc.