• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Pojawianie się/ znikanie select boxa w zależności od wpisanych danych do formularza.

VPS Starter Arubacloud
0 głosów
436 wizyt
pytanie zadane 28 czerwca 2018 w JavaScript przez michau0709 Początkujący (490 p.)
zamknięte 29 czerwca 2018 przez michau0709

Witam , chciałbym aby przy wpisaniu dwóch jednakowych liczb w pola formularza wyświetlał się wybrany selectbox.

Niestety nie za bardzo wiem z jakich atrybutów JavaScript mógłbym skorzystać. Bardzo proszę o pomoc.

Przy takim wypełnieniu formularza chciałbym aby wyświetlał się tylko pierwszy z selectboxow, reszta żeby była ukryta.

O to moj kod:

<html>

<body>
<form action="testowanie.php" method="post">
<output id = "p1">Urugwaj</output>
<input id = "p2" type="text" name="urugwaj"/>
<input id = "p3" type="text" name="portugalia"/>
<output id = "p4">portugalia</output>
<br /><br/>
<h3>Podales remis w nastepujacych meczach:</h3>
<p>Wytypuj zwyciezce po dogrywce/ karnych tych meczy!</p>
<br /><br/>
<a style= "color:green"><h3>Urugwaj-Portugalia:</h3></a>

<select  name="listbox"  size="2">
<option  value="urugwaj" selected>Urugwaj</option>
<option   value="portugalia">Portugalia</option><br /><br/>
</select>
<br /><br/>
</p>
	<?php

		echo "<p>Twoj zwyciezca : " . $_POST['listbox'] . "</p>\n";
		$values = $_POST['listmultiple'];
		
	?>
<a style= "color:green"><h3>Francja-Argentyna:</h3></a>
<select name="listbox1" size="3">
<option value="francja" selected>francja</option>
<option value="argentyna">argentyna</option><br /><br/>
</select>
<br /><br/>

</p>

	<?php

		echo "<p>Twoj zwyciezca : " . $_POST['listbox1'] . "</p>\n";
		$values1 = $_POST['listmultiple1'];
		
	?>	
<a style= "color:green"><h3>Hiszpania-Rosja:</h3></a>
<select name="listbox2" size="3">
<option value="hiszpania" selected>hiszpania</option>
<option value="rosja">rosja</option><br /><br/>
</select>
<br /><br/>

</p>

	<?php

		echo "<p>Twoj zwyciezca : " . $_POST['listbox2'] . "</p>\n";
		$values1 = $_POST['listmultiple2'];
		
	?>	
	
<a style= "color:green"><h3>Chorwacja-Dania:</h3></a>
<select name="listbox3" size="3">
<option value="chorwacja" selected>chorwacja</option>
<option value="dania">dania</option><br /><br/>
</select>
<br /><br/>

</p>

	<?php

		echo "<p>Twoj zwyciezca : " . $_POST['listbox3'] . "</p>\n";
		$values1 = $_POST['listmultiple3'];
		
	?>		

<input type="submit"value="Zatwierdz wyniki!" size="16"/></form>	

<script>
function myFunction() {
    document.getElementById("demo").style.backgroundColor = "red";
}
</script>
</body>
</html>

 

komentarz zamknięcia: Wszystko już działa.
komentarz 28 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)
Pozostawienie wyświetlonego tylko pierwszego boxa ma się wykonać na jaką akcję (nie widzę przycisku zatwierdzającego)? Co ma się stać, gdy wprowadzone liczby będą różne? Czy box, który ma pozostać wyświetlony jest wybierany na podstawie tytułów drużyn umieszczonych na górze (obok pół do wpisania wyników)?
komentarz 28 czerwca 2018 przez michau0709 Początkujący (490 p.)
edycja 28 czerwca 2018 przez michau0709
Chciałem żeby to się zmieniało dynamicznie jeżeli jest taka funkcja , jeżeli użytkownik wypełnia sobie te pola i postawi na remis jednej z drużyn to pojawi mu się selectbox ,który umożliwi mu wytypowanie wygranego po dogrywce/karnych. Gdy wprowadzone liczby beda różne to chce żeby dany selectbox się nie wyświetlał  W skrócie , użytkownik wypełnia dwa pierwsze pola na samej górze . Podaje ,że Urugwaj - Portugalia zakończy się wynikiem remisowym , wtedy skrypt wyświetla selectboxa , w innym przypadku nie wyświetla go. .Tak box do wybrania drużyn jest wyświetlany na podstawie pól do podania wyniku

1 odpowiedź

+2 głosów
odpowiedź 29 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 29 czerwca 2018 przez michau0709
 
Najlepsza

Twój HTML nie ma zbyt przyjaznej struktury do wyszukiwania w nim odpowiednich elementów DOM, więc bez modyfikacji HTMLa można rozwiązać problem poniższym (trochę "drucianym") skryptem:

const teamScoreInputs = [...document.querySelectorAll('#p2, #p3')];

document.querySelector('form').addEventListener('change', ({ target }) => {
  const searchedInput = teamScoreInputs.find((input) => input === target);

  if (searchedInput) {
    const areInputsFilledAndEqual = teamScoreInputs.every((input) => {
      return input.value !== '' && input.value === teamScoreInputs[0].value;
    });

    if (areInputsFilledAndEqual) {
      const boxToBeHidden = document.querySelectorAll(
        `option[value="${teamScoreInputs[0].name}"], option[value="${
          teamScoreInputs[1].name
        }"]`
      )[0];
      boxToBeHidden.parentNode.style.display =
        'none';
      boxToBeHidden.parentNode.previousElementSibling.style.display =
        'none';
    }
  }
});

Skrypt znajduje pola, do których wpisuje się wyniki meczu dla dwóch drużyn. Na podstawie odpowiednich atrybutów ich elementów DOM sprawdza, czy wypełnione zostały oba pola oraz czy te wartości są równe. Jeśli tak, ukrywa box i jego "etykietę" znajdując je na podstawie selektora CSS, do którego podaję nazwy państw.

komentarz 29 czerwca 2018 przez michau0709 Początkujący (490 p.)
Dziękuje  bardzo za pomoc! Chodziło mi o coś takiego tylko miało to działać w odwrotną stronę. Chce żeby pola były ukryte i dopiero po wpisaniu dwóch jednakowych wyników pokazywał się box.
komentarz 29 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)

A, przepraszam, przeoczyłem, że miało zostawić tylko wytypowane drużyny, a resztę schować. Podmień kod w if:

if (areInputsFilledAndEqual) {
      const boxNotToBeHidden = document.querySelectorAll(
        `option[value="${teamScoreInputs[0].name}"], option[value="${
          teamScoreInputs[1].name
        }"]`
      )[0].parentNode;
      
      document.querySelectorAll('select').forEach((node) => {
        if (node !== boxNotToBeHidden) {
          node.style.display = 'none';
          node.previousElementSibling.style.display =
        'none';
        }
      });
    }

 

komentarz 29 czerwca 2018 przez ScriptyChris Mędrzec (190,190 p.)

Chce żeby pola były ukryte i dopiero po wpisaniu dwóch jednakowych wyników pokazywał się box

To też przeoczyłem. Lepiej ukryć wszystkie boxy w HTMLu (czy w PHP, bo widzę, że tam go używasz) podczas generowania treści, wtedy nie trzeba JSem tego robić.

W każdym razie, to daj na początku:

document.querySelectorAll('select').forEach((node) => {
  node.style.display = 'none';
  node.previousElementSibling.style.display = 'none';
});

A to znowu podmień w if:

    if (areInputsFilledAndEqual) {
      const boxToShow = document.querySelectorAll(
        `option[value="${teamScoreInputs[0].name}"], option[value="${
          teamScoreInputs[1].name
        }"]`
      )[0].parentNode;
      boxToShow.style.display = 'block';
      boxToShow.previousElementSibling.style.display = 'block';
    }
komentarz 29 czerwca 2018 przez michau0709 Początkujący (490 p.)
edycja 29 czerwca 2018 przez michau0709

Dziękuje uprzejmie za pomoc. Wszystko działa :). Mam jeszcze jedno pytanie, jeżeli użytkownik wpisał remis(wyświetliły się pola) ,ale po chwili zmienił zdanie i wpisał wynik inny od remisu(na dana chwilę nie doprowadzi to do zniknięcia pól). To czy aby temu zapobiec i ponownie ukryć te pola wystarczy ,że będę wywoływał tą funkcję co określony czas?

Po ifie , wymyśliłem takiego elsa ,który by te pola usuwał, lecz niestety nie działa mi to.


else
{
 document.getElementsByName(listbox).style.display = 'none';


}

 

Edit:

Wystarczyło dodać takiego elsa.

const boxToBeHidden = document.querySelectorAll(
        `option[value="${teamScoreInputs[0].name}"], option[value="${
          teamScoreInputs[1].name
        }"]`
      )[0];
      boxToBeHidden.parentNode.style.display =
        'none';
      boxToBeHidden.parentNode.previousElementSibling.style.display =
        'none';

 

Podobne pytania

0 głosów
1 odpowiedź 1,115 wizyt
pytanie zadane 9 kwietnia 2016 w JavaScript przez Michał_Warmuz Mądrala (5,830 p.)
0 głosów
1 odpowiedź 178 wizyt
pytanie zadane 21 stycznia 2018 w C i C++ przez szachovy Początkujący (270 p.)
0 głosów
1 odpowiedź 524 wizyt

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...