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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Johannes davidian

johannes davidian

22/07/2022 16:06:06
Quote Anchor link
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.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
Gewijzigd op 25/07/2022 14:04:42 door - Ariën -
 
PHP hulp

PHP hulp

19/03/2024 05:11:07
 
- Ariën  -
Beheerder

- Ariën -

22/07/2022 18:26:45
Quote Anchor link
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.
 
Johannes davidian

johannes davidian

22/07/2022 21:23:56
Quote Anchor link
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 :
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<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

Ozzie PHP

22/07/2022 22:14:33
Quote Anchor link
Lees hier eens wat ik een maand geleden al tegen je gezegd heb ... ;-)
 
Johannes davidian

johannes davidian

23/07/2022 16:11:11
Quote Anchor link
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

Ozzie PHP

23/07/2022 17:01:38
Quote Anchor link
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

Jan Koehoorn

23/07/2022 17:15:11
Quote Anchor link
Het hoeft niet met JavaScript, het kan net zo goed met een CSS animatie.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?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>
 
Johannes davidian

johannes davidian

23/07/2022 19:25:34
Quote Anchor link
** knip **


Toevoeging op 23/07/2022 20:38:02:

dank u wel Jan ,
hartelijke bedankt ik ga u advies morgen proberen voor inzicht.
de probleem is opgelost ik heb de jquery code gevonden.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script>
$(document).ready(function () {
  setTimeout(function () {
      $('#success').hide();
  }, 10000);
});
</script>


plus deze code toegevoegd in php:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?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
Gewijzigd op 25/07/2022 14:04:12 door - Ariën -
 
Adoptive Solution

Adoptive Solution

23/07/2022 21:37:37
Quote Anchor link
Na 10 seconden verdwijnt de submit knop.

Flink doortypen dus.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script>
$(document).ready(function () {
  setTimeout(function () {
      $('#submit').hide();
  }, 10000);
});
</script>
 
- Ariën  -
Beheerder

- Ariën -

25/07/2022 14:04:56
Quote Anchor link
Topic schoongemaakt en heropend.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.