hoe ik kan na submit klikken in de form ( boodschap dat u email is ontvangen ) wegdoen met JS code?

Door johannes davidian op 22-07-2022 16:06 gewijzigd op 25-07-2022 14:04

2.661 views

Hallo,
ik wil na de form is submitted de boodschap dat u email is ontvangen na paar seconden weg hebben.
ik heb deze code bestudeerd en geprobeerd van alle mogelijke sitauaties.



<script>

document.addEventListener('DOMContentLoaded', function () {

    let container = document.querySelector('.success'),
        form = document.querySelector('#contact');

    if (form != null) {
        form.addEventListener('submit', function () {       
            setTimeout(function(){
                container = document.querySelector('.succes');

                if (container == null) return; // abort if element isn't available

                container.style.display = 'none';
            }, 10000);
        });
    }
});

</script>

ik heb ook deze lijn weggedaan:



document.addEventListener('DOMContentLoaded', function () {

omdat :
The DOMContentLoaded fires when the DOM content is loaded, without waiting for images and stylesheets to finish
loading.

ik heb stap bij stap bestudeerd ik weet wat is querysellector,setTimeout,etc.

ik zie zelf geen enkele fout .
kan iemand corrigeren deze code .

mij form heeft een id (contact) en mij message heeft een klas (success)
dank u wel

- Ariën -

22-07-2022 18:26

Wordt de setTimeout() wel aangeroepen? Gooi er eens een alert() in?

Persoonlijk vind ik verdwijnende succes-berichten niet echt handig. Als als iemand even wegkijkt?
Dan ziet die niet of het bericht succesvol verstuurd is. Ik houd meer van een permanente melding totdat het wordt weggeklikt.

j johannes davidian

22-07-2022 21:23

dank u wel voor de tip.
ik ga morgen proberen.ik heb u bericht net gezien ik krijgde geen melding van mij iphone. ik zat beetje in w3school bepaalde termen bestuderen. het lijkt dat jquery is makkelijker dan javascript. maar ik hou soms van moeilijke dingen.
ik zie dat bij stackOverflow de meeste antwoorden kloppen niet.
ik heb hier jquery code :


<script type="text/javascript">
    jQuery(document).ready(function($){
        $(".success").delay(10000).fadeOut(1000); // change 5000 to number of seconds in milliseconds  
    });
</script>

maar die ook werkt niet. het is makkelijker dan JS.

Ozzie PHP

22-07-2022 22:14

Lees hier eens wat ik een maand geleden al tegen je gezegd heb ... ;-)

j johannes davidian

23-07-2022 16:11

ik zie ,
deze tekst : IJ bent de programmeur, dus JIJ moet je afvragen waarom je ergens een link plaatst. Je moet niet zomaar ergens code kopiëren en plakken. Je moet weten WAAROM je iets doet.

ik kopier van nergens iets zomaar . ik zoek in google voor soort gelijke problemen en oplossingen en dat doet iedereen.ik heb een Nederlandse vriend die is 35 jaar java programeurgeweest en hij werkte voor amerikaanse bedrijf (geponsioneerd)hij heeft weleens tegen mij gezegd ik kopier soms van internet bepaalde antwoorden.
ik zoek mensen in forums die hebben zelfde probleem gehad net als mij. ik bestudeer hun problemen en de antwoorden .
ik zoek overal voor logische uitlegging. in de youtube in de w3school in geeks for geeks,stackOverflow Wordpress etc.
de forums is bedoeld om oplossingen te zoeken en iemand die heeft meer ervaring of gespecialiseerd in bepaalde onderwerp om antwoord te geven en niet alleen adviesen !.
de forum is bedoeld om concrete antwoorden te geven net als student en mentor en niet alleen adviesen . ik heb van niemand advies nodig ik ben bijna 62 jaar en ik heb heleboel day trading gedaan in CFD ik heb geen advies nodig .als iemand wil mij beantwoorden hert is goed . wil niet beantwoorden dat is ook goed. geen probleem.
vroeger ik zat jaren in microsoft forum en altijd ik heb antwoord gehad met de juiste oplossing
ik zit hele dag te bestuderen en vooroplossing te zoeken . ik wil helemaal onafhankelijk zijn en zoveel mogelijk niemand een vraag stellen. .
ik ga geen programeur worden ik ben bezig met Wordpress . ik kan alle problemen oplossen met Wordpress maar ik wilde voor 1 keer contact form maken zelf anders ik gebruik plug in .
voor paar kleine dingen ik ga niet jacascript of php leren alleen basis kennis hebben is voldoende.en dat ik ga doen en ik ben mee bezig.
a.u.b vortaan geen aadviesen meer.heb jij geen antwoord geen probleem maar geen adviesen .

Ozzie PHP

23-07-2022 17:01

Johannes davidian op 23/07/2022 16:11:11

ik zie ,
deze tekst : IJ bent de programmeur, dus JIJ moet je afvragen waarom je ergens een link plaatst. Je moet niet zomaar ergens code kopiëren en plakken. Je moet weten WAAROM je iets doet.

Haha, precies de allerlaatste zin waar het over ging ontbreekt. Het ging niet om het bovengenoemde stukje. Het gaat om die allerlaatste zin:

"Als ik jou was, dan zou ik werken met jQuery. Dat maakt het werken met JavaScript een stuk makkelijker."

Jij schrijft hierboven:

"het lijkt dat jquery is makkelijker dan javascript"

En dat had ik je dus een maand geleden al gezegd dat dat makkelijker is. Als je jQuery gaat gebruiken kun je waarschijnlijk veel makkelijker alle dingen doen die jij wilt doen.

Jan Koehoorn

23-07-2022 17:15

Het hoeft niet met JavaScript, het kan net zo goed met een CSS animatie.


<?php
define('POSTED', 'POST' === $_SERVER['REQUEST_METHOD']);
?>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PHPHulp</title>
    <style>
        html,body { font: 14px Verdana; }
        label { cursor: pointer; }
    	input, button { font-family: inherit; padding: 8px; border-radius: 4px; }
    	.success {
    		color: blue;
    		animation: disappear 1s ease 4s forwards;
    	}

    	@keyframes disappear {
    		from: {
    			opacity: 1;
    			font-size: 14px;
    			line-height: 14px;
    		}
    		to {
    			opacity: 0;
    			font-size: 0;
    			line-height: 0;
    		}
    	}
    </style>
</head>

<body>

	<?php if (POSTED): ?>
    	<p class="success">Dankuwel. Het formulier is succesvol verzonden</p>
	<?php endif;?>

    <form id="contact" method="post" accept-charset="utf-8">

        <label>
            Naam:
            <input type="text" name="name">
        </label>
        <label>
            E-mail:
            <input type="text" name="email">
        </label>
        <input type="submit" value="submit me">

    </form>

</body>

</html>

j johannes davidian

23-07-2022 19:25 gewijzigd op 25-07-2022 14:04

** knip **

[size=xsmall]Toevoeging op 23/07/2022 20:38:02:[/size]

dank u wel Jan ,
hartelijke bedankt ik ga u advies morgen proberen voor inzicht.
de probleem is opgelost ik heb de jquery code gevonden.



<script>
$(document).ready(function () {
  setTimeout(function () {
      $('#success').hide();
  }, 10000);
});
</script>

plus deze code toegevoegd in php:


<?php
echo '<div id="success" class="success">'.$success.'</div>';

?>

als u gaat naar mij url dan kunt u zien hoe het werkt :https://webdesignleren.com/contact/

ik heb geen enkele bedoeling met mij website url toevoegen ik wil alleen laten zien dat ik lieg niet.
uiteindelijk deze website van mij zegt niets . het is alleen code test website.

hartelijk bedankt iedereen voor jullie advies en hulp

A Adoptive Solution

23-07-2022 21:37

Na 10 seconden verdwijnt de submit knop.

Flink doortypen dus.

<script>
$(document).ready(function () {
  setTimeout(function () {
      $('#submit').hide();
  }, 10000);
});
</script>

- Ariën -

25-07-2022 14:04

Topic schoongemaakt en heropend.

Reageren

Inloggen om te reageren