De waarde die ik daarin invul word direct zichtbaar gemaakt met dit.:
<script>
$(document).ready(function(){
$("#myInput").on("input", function(){
// Print entered value in a div box
$("#result").text($(this).val());
});
});
</script>
Ik heb nu een 4 cellen naast elkaar, zie onderstaande code.:
Nu vraag ik jullie hulp hierbij omdat ik het niet weet en krijg.
Tis de bedoeling dat ik die 4 regels terug breng naar 1 regel, maar dat hij zich aanpast op het geen dat ingevuld word in de input box.
Dus type ik 1 in moet direct 1 cell getoond worden, type ik 3 moet direct 3 cellen getoond worden, uiteraard zonder refresh page of submit button.
Is dit mogelijk? Zou mij iemand kunnen helpen hiermee?
//Add new cells based on input value.
for (let i = 0; i < numberOfCells; i++) {
$('.row').append(`<div class="cell"><input type="text" name="hallo${i}" size="10" style="text-align:center;"></div>`);
}
});
});
</script>
Dit werkt maar hier gaan helaas de div's opeens onder elkaar ipv naast elkaar weer zoals het hoort.
terwijl ik toch eigenlijk zeg van laat zien wel of nee, dus vind het vreemd dat ze onder elkaar komen.
Het lijkt mij makkelijker om een soort van "container" (omvattend element) aan te maken waar je deze cellen in plaatst. Op die manier kun je ze makkelijker beheren.
Aangezien je waarschijnlijk maar een gelimiteerd aantal velden wilt tonen (maximaal 4?) zou je ook kunnen overwegen om hier een soort van "knoppen" voor te maken? Dat is minder (klik)acties voor de gebruiker lijkt mij? En je zou in een hidden veld bij kunnen houden welke hoeveelheid je hebt geselecteerd als dat voor de verdere verwerking relevant is.
Het is trouwens niet vreemd dat de divs onder elkaar verschijnen, want je maakt hier zelf block level elementen van.
Gezien de dynamische aard van deze velden is het misschien ook handiger om hier namen aan te hangen, in plaats van id's. Je kunt hier toch al makkelijk aan refereren via het containerelement. Op die manier heb je maar één id nodig. En dan zou je deze in arrayvorm kunnen opslaan, de structuur wordt dan dus zoiets:
Oke zal het eens uitzoeken.
Even een vraag nog.
Ik heb gelezen ergens dat je via javascript je document kunt doorlopen op het zelfde element.
Ik gebruik nu als test op diverse plaatsen dezelfde getElementById.
Dus over het gehele document 4 maal
Misschien is het makkelijker om de container gewoon leeg te gooien en deze opnieuw te vullen met velden? Of komt het voor dat je waarden invult in deze velden, en dan het aantal zichtbare velden op ening moment verandert, oftewel is het belangrijk dat eventueel ingevulde data op een of andere manier bewaard wordt? Want dan moet je mogelijk wel pielen met visibility maar anders kun je toch alles weggooien en opnieuw opbouwen?
Daar het een zoekformulier betreft was ik eigenlijk in de veronderstelling dat al die data die je daar invult maar van tijdelijke aard is?
Aan de andere kant, als je dan eenmaal op de zoek-knop drukt is het ook zaak dat op de resultaatpagina je zoekopdracht weer terug ingevuld wordt misschien? Heb je daar al over nagedacht?
Even om het geheel iets duidelijker te maken.
Afdeling krijgt een pagina voor zich waar data word ingevuld.
Ze kunnen kiezen hoeveel kolommen ze willen gebruiken , kan 1 t/m 25 zijn.
De data wat ze invullen word gedropt in een sql database, dat is ook geen probleem.
Momenteel ben ik sinds vanmorgen zover gekomen dat alles zeer verkort is gemaakt i.c.m. for lussen, werkt ook super.
Het enigste wat ik nu nog zoek , is iets wat de gehele pagina doorzoekt en de kolommen visible of hide maakt.
In onderstaand stukje , als 1 kolom kies.:
Dat houd in dat op kolom 1 de andere 24 kolommen hidden zijn.
Echter omdat 1 kolom 97 rijen bevat, kun je indenken dat de code op deze manier super lang word.
Hoe maak ik die lus zo , dat ik 2 t/m 25 in korte lus hidden krijg?
in php heb ik dit door het formulier heen op deze manier gedaan.:
for ($x = 1; $x <= 25; $x++) {
//echo "The number is: $x <br>";
echo "<div class='cell' id='showSearchDiv$x'>PP Uitgebreid</div> ";}
Voorzie alle divs ook van een class. Bijvoorbeeld <div id="showSearchDiv1" class="showSearchDiv">...</div>
Vervolgens kun je als eerste alle div's hidden maken.
$(".showSearchDiv").hide();
en vervolgens zet je één div weer als visible
$("#showSearchDiv1").show();
Dit gaat vervolgens zo snel achter elkaar dat je niet ziet dat showSearchDiv1 heel even onzichtbaar was.
[size=xsmall]Toevoeging op 07/11/2019 15:12:40:[/size]
Met dit soort kunstjes kunnen data attributen ook vaak uitkomst bieden. data attributen mogen namelijk wel een numerieke waarde hebben maar het "id" attribuut niet.
Je maakt al gebruik van jQuery, dus waarom maak je hier geen gebruik van?
Weg met die aantal knop, laat mensen gewoon typen! Als je op enter drukt: voeg een veld toe. Als je een veld leegveegt met de backspace: verwijder deze weer. Minder klikacties = beter.
