Hide Show div in Javascript

Status
Niet open voor verdere reacties.
P

pieter53

Gebruiker
Lid geworden
1 jan 2007
Berichten
297
Even wat anders.
Klopt het dat een simpele Hide-Show div (zie hier onder) niet werkt in een formulier?
Code: 
<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>


mod. Javascript in
Code: 
[/noparse] gezet met # knopje (knoppenbalk)[/COLOR]
 
Laatst bewerkt door een moderator:
Waarom zou het niet werken?

- Roep je de functie wel aan?
- Klopt de trigger (#myDIV) wel?
 
Het lijkt op deze function . Heb je de button + div in je html staan?
Code: 
<button onclick="myFunction()">Open en sluit div</button>

<div id="myDIV">
  Dit is het Div element.
</div>
 
Sorry voor de late reactie.
Ik zag het bericht niet meer waar ik het geplaatst had
en dacht dat ik iets doms had gedaan.
Maar het blijkt verplaatst te zijn.

Goed, hide-show div.
Het is een script wat ik al heel lang gebruik, maar toen ik het in een HTML form plaatste,
wilde het niet werken. Ik heb van alles geprobeerd, maar het wilde niet lukken.
Ik zal het zo meteen nog eens proberen. Misschien heb ik toch wat over het hoofd gezien.
 
Ik heb maar even een proefdocument gemaakt.
Ik hoop dat het leesbaar is.
Volgens mij klopt alles, maar het functioneert niet!
Ik zal dus wel wat over het hoofd zien :-(
Ik gebruik Win10 Home met Firefox93

HTML: 
<!DOCTYPE html> 
<html lang="nl"> 
<head>
<meta charset="utf-8">
<title>Database input</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<link rel="stylesheet" type="text/css" href="../extra-filesvb/algemeen.css">
<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</head>
<body>

<?php
$xxx = "x00x";
?>
<div class="tekst" >

		<form id=<?php echo $xxx;?> action="" method="get" >
		  
		<br>
		<input type="text" id="voornaam<?php echo $xxx;?>" name="voornaam" value="<?php echo $xxx; ?>" size="10"> 
		<label for="index">Index:</label>
		<br>

<button onclick="myFunction()">Click Me</button>		
		<br>

	<div id="myDIV">
			<label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
			<textarea id="omschrijving<?php echo $xxx;?>" name="omschrijving" rows="8" cols="60"> <?php echo $xxx; ?> </textarea>

			<br>
			<br>

			<label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
			Van <input type="text" id="periode0<?php echo $xxx;?>" name="periode0" value="<?php echo $xxx; ?>" size="5"> 
			Tot <input type="text" id="periode1<?php echo $xxx;?>" name="periode1" value="<?php echo $xxx; ?>" size="4">
	</div>
		<br>
		<br>

		
		<input type="submit" value="Bewerken"> 
		<input type="button" name="cancel" value="cancel" onclick="Terug()" >

		
		</form>
</div>
 
Probeer het eens minimalistischer, en check de console.
 
Laatst bewerkt:
Minimalistischer????

Je bedoelt ook
PHP: 
<?php echo $xxx; ?>
weglaten?

Dan heeft het geen zin meer dit script te gebruiken, want dan zit ik met een ander probleem.
 
Een testcase over een JS-probleem kan prima zonder PHP, en kan zelfs veel compacter. Kijk ook eens naar je stylesheet. Heb je daar geen properties instaan die conflicteren?

Begin minimalistisch en bouw het steeds verder uit.
 
Laatst bewerkt:
Het navolgende werkt NIET!

HTML: 
<head>
<meta charset="utf-8">
<title>Database input</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<link rel="stylesheet" type="text/css" href="../extra-filesvb/algemeen.css">
<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</head>
<body>


		<form id="123" action="" method="get" >
		  
		<br>
		<input type="text" id="voornaam123" name="voornaam" size="10"> 
		<label for="index">Index:</label>
		<br>

<button onclick="myFunction()">Click Me</button>		
		<br>

	<div id="myDIV">
			<label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
			<textarea id="omschrijving124" name="omschrijving" rows="8" cols="60"> 124 </textarea>

			<br>
			<br>

			<label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
			Van <input type="text" id="periode0125" name="periode0" value="125" size="5"> 
			Tot <input type="text" id="periode1125" name="periode1" value="126" size="4">
	</div>
		<br>
		<br>

		
		<input type="submit" value="Bewerken"> 
		<input type="button" name="cancel" value="cancel" onclick="Terug()" >

		
		</form>

Ook niet als je <input type="button" name="cancel" value="cancel" onclick="Terug()" > weghaalt
 
Laatst bewerkt:
Aar zei:
Kijk ook eens naar je stylesheet. Heb je daar geen properties instaan die conflicteren?
Klik om te vergroten...
Als ik ergens op vastloop en de fout niet in één oogopslag vind, dan debug ik altijd vanaf zeer minimalistisch punt. In dit geval zou het een simpele div met als inhoud "Boe" zijn, of iets wat lekker simpel is. Stukje bij beetje bouw je het uit, en dan zal je zien dat het wel werkt.

Ik vermoed dat het aan je CSS ligt...
Dit werkt prima:
https://jsfiddle.net/8kpx79be/ (ik heb wel de form weggelaten, omdat dit een redirect in JSfiddle triggert)

Persoonlijk zou ik de knop buiten het formulier houden, omdat de knop bedoeld is voor visuele interactie, en niet als formulier zijnde.
 
Laatst bewerkt:
Het lijkt erop dat de "Click Me" een submit als gevolg heeft en de pagina opnieuw laadt.
Waar alles inderdaad gewoon weer zichtbaar is.

Als de "Click Me", zoals Aar stelt, buiten de form staat werkt het wel gewoon.

Hoop dat je er wat aan hebt.

Frank.
 
Laatst bewerkt:
Iedereen natuurlijk heel erg bedankt voor de hulp.

Bij de oorspronkelijke vraag: "Klopt het dat een simpele Hide-Show div niet werkt in een formulier?"
was het echter mijn bedoeling op een makkelijke manier te weten te komen of ik "Hide-Show div" wel of niet voor mijn doel kon gebruiken.
Niets is namelijk zo irritant uren ergens mee bezig te zijn om uiteindelijk tot de conclusie te komen dat het niet kan.
Met deze code:
HTML: 
<!DOCTYPE html> 
<html lang="nl"> 
<head>
<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</head>
<body>


<form id="123" action="../index.php" method="get" >

<br>
U mag reageren op berichten<br>
<button onclick="myFunction()">Click Me</button><br>
<br>

<div id="myDIV">
U mag uw berichten bewerken..<br>
<br>
</div>

<input type="submit" value="Bewerken"> 	<br>

</form>
Werkt het script eigenlijk wel, maar als men op "Click me" klikt, dan is dat meteen ook een "submit".

Wanneer men <button onclick="myFunction()">Click Me</button><br> buiten <form>....</form> plaatst, werkt het inderdaad correct.
De knop is dan met CSS misschien wel naar de juiste positie te verplaatsen, maar ergens zint me dat niet.
Nog maar eens een nachtje over slapen en dan een keuze maken.
 
het topic blijkt verplaatst te zijn.
Klik om te vergroten...
Nieuwe vraag, nieuw topic ;)

Geef de "click me" een type=button, dan werkt het.
En het voorbeeld van w3schools vraagt om (niet zo netjes) een inline style="display:none".

Code: 
<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<style>
/* www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show */
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
</style>

</head>
<body>
<?php $xxx = "Piet"; ?>

<div class="tekst" >
  <form id=<?php echo $xxx; ?> action="" method="get" >
    
    <br>
    <input type="text" id="voornaam<?php echo $xxx;?>" name="voornaam" value="<?php echo $xxx; ?>" size="10"> 
    <label for="index">Index:</label>
    <br>
    <button type="button" onclick="myFunction()">Toon meer...</button>        
    <br>
    
    <div id="myDIV" style="display:none">
      <label for="omschrijving"><b>Korte omschrijving van de inhoud</b>:</label><br>
      <textarea id="omschrijving<?php echo $xxx; ?>" name="omschrijving" rows="8" cols="60"> <?php echo $xxx; ?> </textarea>
      <br>
      <br>
      <label for="periode"><b>Periode</b> die in het bestand behandeld wordt.</label><br>
      Van <input type="text" id="periode0<?php echo $xxx; ?>" name="periode0" value="<?php echo $xxx; ?>" size="5"> 
      Tot <input type="text" id="periode1<?php echo $xxx; ?>" name="periode1" value="<?php echo $xxx; ?>" size="4">
    </div>
    
    <br><br>
    <input type="submit" value="Bewerken"> 
    <input type="button" name="cancel" value="cancel" onclick="Terug()" >
  </form>
</div>

Je hebt in dit script een probleem als iemand de voornaam Pieter Jan invult.
Overal waar dit in de id wordt gebruikt werkt het niet en zou je de hele id beter weg kunnen halen.
Code: 
id="voornaam<?php echo $xxx;?>"
wordt in html   :  id="voornaamPieter Jan"
wordt voor css  :  id="voornaamPieter"
 
Bedankt voor de reactie.
Inderdaad werkt de getoonde oplossing perfect.
Zelfs als je
HTML: 
<style>
#myDIV { 
}
</style>
gebruikt.

Je hebt in dit script een probleem als iemand de voornaam Pieter Jan invult.
Klik om te vergroten...
Daar heb je gelijk in.
In het voorbeeld staat $xxx echter voor de index van de tabel waarin de voornaam opgeslagen is.

Nogmaals dank.
 
Het is netter om met een class te werken zodat er geen javascript en css in de html komt te staan.
Code: 
- Voeg deze class toe aan de css

.hide {
  display: none;
}

- Verander de knop en div in de html

<button id="toggle_button" type="button">Toon meer</button>
<div id="toggle_div" class="hide">
  ( ... inhoud van div ... )
</div>

- Vervang het script door dit script
- Zet scripts onderaan vlak boven </body> !

<script>
let ToonDivKnop = document.getElementById("toggle_button");
ToonDivKnop.addEventListener("click", function(Event) {
  document.getElementById("toggle_div").classList.toggle("hide");
});
</script>

Uitleg script
regel 1: zet id="toggle_button" in variabele ToonDivKnop.
regel 2: bij een "click" op de knop wordt alles wat in de function staat uitgevoerd.
regel 3: toggle class "hide" van id "toggle_div" (verwijder 'hide' als die er is, voeg 'hide' toe als die er niet is).

Als je javascript wilt toevoegen aan bijvoorbeeld <input type="submit" ....> maar je wilt niet dat het formulier wordt verstuurd dan kan dat met preventDefault()
Code: 
<input id="bewerken" type="submit" value="Bewerken">

<script>
let BewerkenKnop = document.getElementById("bewerken");
BewerkenKnop.addEventListener("click", function(Event) {
  Event.preventDefault();
  // doe iets als op knop bewerken is geclickt
});
</script>
 
Laatst bewerkt:
Nog een aanvulling. Hetzelfde kan natuurlijk ook met bijvoorbeeld de name="cancel" knop.
Uit de functie onclick="Terug() begrijp ik dat je naar de vorige pagina wilt, denk ik.
De input in de html krijgt een id die je dan in de javascript kan opvragen.
Code: 
<input id="terug" type="button" name="cancel" value="cancel">
Code: 
let TerugKnop = document.getElementById("terug");
TerugKnop.addEventListener("click", function(Event) {
  window.history.back();
});

// regel 1 + 2 kan je samenvoegen, vervang de regels hierboven door

document.getElementById("terug").addEventListener("click", function(Event) {
  window.history.back();
});
 
Laatst bewerkt:
Bedankt voor alle waardevolle bijdragen.
Ik zit nog een beetje in een ontwerpfase.
Ik moet eigenlijk nog uitzoeken wat het beste bij de behoeften zal passen.
Daarbij wil ik het niet al te ingewikkeld maken, want dat kan in de toekomst
weer voor een hoop extra werk zorgen. Het is dus een kwestie van wikken en wegen.
 
Lees niet dit hele artikel (klik) maar alleen de 1e zin.

We like to keep languages separate, we like to keep the behavior side of things in our JavaScript, and the structural or presentational elements in our HTML.
Klik om te vergroten...

Vrij vertaald: structuur apart (html), vormgeving apart (css), en functionaliteit apart (javascript).

Voordelen
1) Achteraf geen zoekplaatje wat invloed heeft op wat.
2) Eén stukje code kan je overal op de website gebruiken
 
Bedankt voor de tip.
Ik hou mij (dacht ik) aan dergelijke regels.
Alleen testbestanden vallen daar natuurlijk niet onder.

Ik heb echter wel eens de indruk dat het met CSS zoveel wordt,
dat je het overzicht begint te verliezen.
 
Ik heb echter wel eens de indruk dat het met CSS zoveel wordt,
dat je het overzicht begint te verliezen.
Klik om te vergroten...
Yep, bij veel verschillende onderdelen op een website zou 1000+ regels zo maar kunnen.
Het css bestand opdelen in blokken is dan de beste manier.. In jouw voorbeeld, houdt alles over het formulier bij elkaar in het css bestand.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan