formulier in jquery accordion open laten bij het submitten

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tim S

Tim S

30/08/2012 22:10:03
Quote Anchor link
Hallo,

Ik ben nieuw op het gebied van javascript en ben nu bezig om een formulier in een jquery accordion te zetten.
Dit alles gaat goed, maar als ik het formulier submit gaat de accordion dicht. Dit is erg onhandig omdat ook de foutmeldingen boven het formulier komen te staan en mensen graag de ingevulde gegevens blijven zien.

Heeft iemand een idee hoe ik dit zou kunnen bereiken??

Hier het script:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<script>
        $(document).ready(function(){
            $('.hoofd').click(function(e){
                e.preventDefault();
                $(this).closest('li').find('.inhoud').slideToggle();
            });
        });
    </script>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<ul>
        <li>
            <a href='#' class='hoofd'>Plaats uw eigen wens</a>
            <div class='inhoud'> EN HIER STAAT HET FORMULIER EN PHP AFHANDELING</div>
        </li>
</ul>

Ik hoop dat iemand hier iets mee kan. Alvast bedankt voor de hulp!!

Graag in het vervolg bij code, [code] [/code] tags gebruiken.[/modedit]
Gewijzigd op 31/08/2012 13:24:56 door Bas IJzelendoorn
 
PHP hulp

PHP hulp

25/11/2024 14:33:09
 
Kris Peeters

Kris Peeters

31/08/2012 11:38:57
Quote Anchor link
Wel, dan gaan we dat formulier ook met (jQuery) Ajax moeten doorsturen.

Toon eens je formulier (en eventueel een stuk afhandeling van de POST request)
 
Bas IJzelendoorn

Bas IJzelendoorn

31/08/2012 13:37:51
Quote Anchor link
Je zou hiervoor misschien wel even naar .submit() in de jquery api kunnen kijken. Die kan je wat laten uitvoeren als er op submit is geklikt.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$("form").submit(function() {
 $('.inhoud').show();
});
 
Tim S

Tim S

31/08/2012 13:38:56
Quote Anchor link
Bedankt voor de snelle reactie,

Hieronder het forulier met afhandeling, het gaat om een gastenboek:

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
59
60
<br>
        <li>
            <a href='#' class='hoofd'>Plaats uw eigen wens</a>
            <div class='inhoud'>
<?php


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Als er een veld niet ingevuld is


$query = mysql_query("SELECT id FROM gastenboek WHERE ip = '".mysql_real_escape_string($_SERVER['REMOTE_ADDR'])."' AND datum >= NOW() - INTERVAL 1 DAY");
    
    if(mysql_num_rows($query) > 0)
    {
        echo '<p11>Je mag maar een wens per dag plaatsen!</p11>';
    }
    
    elseif (empty($_POST['naam']) || empty($_POST['bericht'])) {
        echo '<p11>Je hebt niet alle velden ingevuld!</p11>';
    } elseif (strlen($_POST['naam']) > 16 || strlen($_POST['bericht']) > 500) {
        echo '<p11>De ingevulde velden hebben te veel karakters (naam maximaal 16, bericht maximaal 500)</p11>';
    } elseif ($_POST['dag'] != $dagen[date('w')]) {
        echo '<p11>De ingevulde dagnaam klopt niet!</p11>';
    }
    
    else
    {
        if(!empty($_POST['anoniem']))
        
        
        if (mysql_query("INSERT INTO gastenboek (naam, bericht, datum, ip) VALUES ('Anoniem', '".trim(mysql_real_escape_string($_POST['bericht']))."', NOW(), '".mysql_real_escape_string($_SERVER['REMOTE_ADDR'])."')")) {
            echo '<p10>Je wens is succesvol toegevoegd!</p10>';
        } else {
            echo '<p11>Er is iets fout gegaan en je wens is niet toegevoegd. Probeer het later opnieuw.</p11></span>';
        }
            
        if(empty($_POST['anoniem']))
         if (mysql_query("INSERT INTO gastenboek (naam, bericht, datum, ip) VALUES ('".trim(mysql_real_escape_string($_POST['naam']))."', '".trim(mysql_real_escape_string($_POST['bericht']))."', NOW(), '".mysql_real_escape_string($_SERVER['REMOTE_ADDR'])."')")) {
            echo '<p10>Je wens is succesvol toegevoegd!</p10>';
        } else {
            echo '<p11>Er is iets fout gegaan en je wens is niet toegevoegd. Probeer het later opnieuw.</p11>';
        }
    }
        
}
?>        
<form class="gastenboek"  method="post" action=""><p>
<p8>Naam: (maximaal 16 karakters)</p8><br />
<input type="text" name="naam" maxlength="16" /><br />
<p8>Welke dag is het vandaag:</p8><br />
<input type="text" name="dag"><br />
<p8><input type="checkbox" id="anoniem" name="anoniem" value="anoniem">Anoniem (alleen bericht wordt geplaatst)</p8><br />
<br><p8>Bericht: (maximaal 500 karakters)</p8><br />
<textarea name="bericht" maxlength="500" id="tekst" rows="6" cols="37"></textarea><br>
<input type="submit" value="Toevoegen" onClick="this.value='je wens wordt geplaatst...';" />
</p><br></form>
</div>
        </li>
        <p>


Ik hoop dat dit genoeg is, als ik meer code moet posten hoor ik het wel!?

Toevoeging op 31/08/2012 14:14:43:

@Bas IJzelendoorn

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
$("form").submit(function() {
 $('.inhoud').show();
});


Hoe kan ik deze code het best aan de huidige code toevoegen...(ben echt net begonnen met javascript)??

Ik zag net ook dat de code niet werd afgesloten , doe ik iets fout?

In ieder geval alvast bedankt voor de reactie's!!
Gewijzigd op 31/08/2012 13:40:59 door Bas IJzelendoorn
 
Kris Peeters

Kris Peeters

31/08/2012 14:42:58
Quote Anchor link
Okay, een voorbeeld. Al vrij uitgewerkt.
Je kan dit stand alone testen

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
59
60
61
62
63
64
65
66
67
68
69
70
<?php
  // zorg dat dit bovenaan je php-file staat.  Zorg juist dat dat je connectie maakt met de database.
  // het is absoluut niet toegelaten dat je eerst html naar de client stuurt, vooraleer je dit verwerkt.
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // hier verwerk je alles.
    
    // ...
    
    // Dan stuur je een bericht terug naar javascript
    echo 'gelukt';
    exit;  // zeker niet vergeten.  Het is NIET de bedoeling dat de hele pagina wordt verstuurd
  }
?>
<!doctype html>
  <html>
  ...
  <body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function($) {
    // bind een click op .hoofd aah de accordion
    $('.hoofd').click(function(e) {
      e.preventDefault();
      $(this).closest('li').find('.inhoud').slideToggle();
    });
    
    // formulier doorsturen
    $("form.gastenboek").submit(function(e) {
      e.preventDefault();  // zorgt er voor dat het formulier niet wordt verstuurd via de klassieke weg
      // Ajax verzoek starten
      $.ajax({
        url: '',
        type: 'POST',
        data: $(this).serialize(),  // "this" is hier het formulier.  serialize() leest de gegevens van het formulier en geeft het door (aan het ajax verzoek).
        success: function(message) {
          //Wanneer we hier zijn, is het ajax-verzoek verstuurd en er is een antwoord teruggekomen
          // hier kan je dan verder iets doen.  Als voorbeeld laat ik het formulier volledig verwijderen en de message posten in de plaats
          $("div.inhoud").html(message);
        }
      })
    });
    
  });
  </script>
  <style>
    div.inhoud {
      display: none;
    }
  </style>
  <ul>
    <li>
      <a href='#' class='hoofd'>Plaats uw eigen wens</a>
      <div class='inhoud'>
        <form class="gastenboek"  method="post" action=""><p>
          <p8>Naam: (maximaal 16 karakters)</p8><br />
          <input type="text" name="naam" maxlength="16" /><br />
          <p8>Welke dag is het vandaag:</p8><br />
          <input type="text" name="dag"><br />
          <p8><input type="checkbox" id="anoniem" name="anoniem" value="anoniem">Anoniem (alleen bericht wordt geplaatst)</p8><br />
          <br><p8>Bericht: (maximaal 500 karakters)</p8><br />
          <textarea name="bericht" maxlength="500" id="tekst" rows="6" cols="37"></textarea><br>
          <input type="submit" value="Toevoegen" onClick="this.value='je wens wordt geplaatst...';" />
          </p><br>
        </form>
      </div>
    </li>
  </ul>
  </body>
</html>


(EDIT, ik was wat vergeten; aangepast.)
Gewijzigd op 31/08/2012 15:16:57 door Kris Peeters
 
Tim S

Tim S

31/08/2012 17:53:49
Quote Anchor link
@kris

Er zijn wat probleempjes met het script:

-(google chrome) als ik op submit klik wordt in de accordion het bericht weergegeven, maar ook de header foto en de sidebar....

-(internet explorer) Er gebeurd niks als ik op submit druk....

Enig idee hoe dit kan??

In ieder geval bedankt voor de hulp tot nu toe!
 
Kris Peeters

Kris Peeters

31/08/2012 19:56:53
Quote Anchor link
Een paar kleine aanpassingen:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php
  // zorg dat dit bovenaan je php-file staat.  Zorg juist dat dat je connectie maakt met de database.
  // het is absoluut niet toegelaten dat je eerst html naar de client stuurt, vooraleer je dit verwerkt.
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // hier verwerk je alles.
    
    // ...
    
    // Dan stuur je een bericht terug naar javascript
    echo 'gelukt';
    exit;  // zeker niet vergeten.  Het is NIET de bedoeling dat de hele pagina wordt verstuurd
  }
?>
<!doctype html>
  <html>
  <head></head>
  <body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function($) {
    // bind een click op .hoofd aah de accordion
    $('.hoofd').click(function(e) {
      e.preventDefault();
      $(this).closest('li').find('.inhoud').slideToggle();
    });
    
    // formulier doorsturen
    $("form.gastenboek").submit(function(e) {
      e.preventDefault();  // zorgt er voor dat het formulier niet wordt verstuurd via de klassieke weg
      $(".submit").val("je wens wordt geplaatst...;");
      // Ajax verzoek starten
      $.ajax({
        //url: '',  // IE heeft hier precies moeite mee
        type: 'POST',
        data: $(this).serialize(),  // "this" is hier het formulier.  serialize() leest de gegevens van het formulier en geeft het door (aan het ajax verzoek).
        success: function(message) {
          //Wanneer we hier zijn, is het ajax-verzoek verstuurd en er is een antwoord teruggekomen
          // hier kan je dan verder iets doen.  Als voorbeeld laat ik het formulier volledig verwijderen en de message posten in de plaats
          $("div.inhoud").html(message);
        }
      })
    });
    
  });
  </script>
  <style>
    div.inhoud {
      display: none;
    }
  </style>
  <ul>
    <li>
      <a href='#' class='hoofd'>Plaats uw eigen wens</a>
      <div class='inhoud'>
        <form class="gastenboek"  method="post" action=""><p>
          <p8>Naam: (maximaal 16 karakters)</p8><br />
          <input type="text" name="naam" maxlength="16" /><br />
          <p8>Welke dag is het vandaag:</p8><br />
          <input type="text" name="dag"><br />
          <p8><input type="checkbox" id="anoniem" name="anoniem" value="anoniem">Anoniem (alleen bericht wordt geplaatst)</p8><br />
          <br><p8>Bericht: (maximaal 500 karakters)</p8><br />
          <textarea name="bericht" maxlength="500" id="tekst" rows="6" cols="37"></textarea><br>
          <input type="submit" class="submit" value="Toevoegen"/>
          </p><br>
        </form>
      </div>
    </li>
  </ul>
  </body>
</html>


Nu, één ding is heel belangrijk: je mag niet je php-logica laten uitvoeren tussen je html.
Maak een duidelijk onderscheid:
bovenaan je php-file php logica
onderaan html

Vooral een Ajax request moet uitgevoerd worden vooraleer het eerste karakter html naar de client is gestuurd.
Dat is trouwens inclusief include files. Include files zorgen er soms voor dat karakters naar de client worden gestuurd; dit moet je absoluut vermijden.
 
Tim S

Tim S

31/08/2012 20:51:43
Quote Anchor link
Het werkt nu ook in internet explorer, maar ik blijf een headerfoto, het menu en de side-bar in de accordion zien. Ik denk zelf dat het komt doordat ik werk met een include systeem. De structuur van de hele website staat in de index.php, hier worden de sidebar en de pagina's geinclude. Mag ik in de index.php ook geen php gebruiken in body gedeelte, zoals include etc? of is er iets anders aan de hand. De footer krijg ik niet te zien.

Voor de duidelijkheid, ik gebruik dus php in me html, maar niet op deze pagina maar op de index.php!

Wederom bedankt, ik hoop dat je hier een oplossing voor heb?!!
 
Eddy E

Eddy E

31/08/2012 21:02:16
Quote Anchor link
Dat moet gewoon werken.

Waarschijnlijk is je HTML of je CSS niet kloppend. Gooi de (geparsde) code eens door een validator.
 
Tim S

Tim S

31/08/2012 22:14:56
Quote Anchor link
Als ik de <ul> en </ul> weghaal staat de accordion altijd open, en haal ik deze weg dan staat hij altijd dicht. Misschien dat iemand er nog een keer naar kan kijken??


Dit is de code die ik nu heb staan:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<?php
//verbinding databse
....



if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Als er een veld niet ingevuld is


$query = mysql_query("SELECT id FROM gastenboek WHERE ip = '".mysql_real_escape_string($_SERVER['REMOTE_ADDR'])."' AND datum >= NOW() - INTERVAL 2 MINUTE");
    
    if(mysql_num_rows($query) > 0)
    {
        echo '<p11>Je mag maar een wens per 2!! minuut plaatsen!</p11>';
    }
    
    elseif (empty($_POST['naam']) || empty($_POST['bericht'])) {
        echo '<p11>Je hebt niet alle velden ingevuld!</p11>';
    } elseif (strlen($_POST['naam']) > 16 || strlen($_POST['bericht']) > 500) {
        echo '<p11>De ingevulde velden hebben te veel karakters (naam maximaal 16, bericht maximaal 500)</p11>';
    } elseif ($_POST['dag'] != $dagen[date('w')]) {
        echo '<p11>De ingevulde dagnaam klopt niet!</p11>';
    }
    
    else
    {
        if(!empty($_POST['anoniem']))
        
        
        if (mysql_query("INSERT INTO gastenboek (naam, bericht, datum, ip) VALUES ('Anoniem', '".trim(mysql_real_escape_string($_POST['bericht']))."', NOW(), '".mysql_real_escape_string($_SERVER['REMOTE_ADDR'])."')")) {
            echo '<p10>Je wens is succesvol toegevoegd!</p10>';
        } else {
            echo '<p11>Er is iets fout gegaan en je wens is niet toegevoegd. Probeer het later opnieuw.</p11></span>';
        }
            
        if(empty($_POST['anoniem']))
         if (mysql_query("INSERT INTO gastenboek (naam, bericht, datum, ip) VALUES ('".trim(mysql_real_escape_string($_POST['naam']))."', '".trim(mysql_real_escape_string($_POST['bericht']))."', NOW(), '".mysql_real_escape_string($_SERVER['REMOTE_ADDR'])."')")) {
            echo '<p10>Je wens is succesvol toegevoegd!</p10>';
        } else {
            echo '<p11>Er is iets fout gegaan en je wens is niet toegevoegd. Probeer het later opnieuw.</p11>';
        }
    }// Dan stuur je een bericht terug naar javascript
    echo 'gelukt';
    exit;  // zeker niet vergeten.  Het is NIET de bedoeling dat de hele pagina wordt verstuurd
}

?>
<head>
<title>Gastenboek</title>

<link href="../css_stylesheet.css" rel="stylesheet" type="text/css">

<style>
         ul {list-style: none;}
        .hoofd, li, h2 { margin-bottom:10px;}
        li {list-style: none;
        }
        .inhoud { display:none; }
        .hoofd {
                list-style:none;
                display: block;
                width: 645px;
                padding: 2px;
                font-family:Verdana, Geneva, sans-serif;
                font-size:12px;
                background:#ccc;
                color:#309;
                text-decoration: none;
                font-weight:700;
                border: 1px solid #ccc;
                height: 20px;
                margin-bottom: 6px;
                text-align: center;
 }
 </style>
    
 </head>
 
  <body>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function($) {
    // bind een click op .hoofd aah de accordion
    $('.hoofd').click(function(e) {
      e.preventDefault();
      $(this).closest('li').find('.inhoud').slideToggle();
    });
    
    // formulier doorsturen
    $("form.gastenboek").submit(function(e) {
      e.preventDefault();  // zorgt er voor dat het formulier niet wordt verstuurd via de klassieke weg
      $(".submit").val("je wens wordt geplaatst...;");
      // Ajax verzoek starten
      $.ajax({
        //url: '',  // IE heeft hier precies moeite mee
        type: 'POST',
        data: $(this).serialize(),  // "this" is hier het formulier.  serialize() leest de gegevens van het formulier en geeft het door (aan het ajax verzoek).
        success: function(message) {
          //Wanneer we hier zijn, is het ajax-verzoek verstuurd en er is een antwoord teruggekomen
          // hier kan je dan verder iets doen.  Als voorbeeld laat ik het formulier volledig verwijderen en de message posten in de plaats
          $("div.inhoud").(message);
        }
      })
    });
    
  });
  </script>
  <style>
    div.inhoud {
      display: none;
    }
  </style>
<h1>test</h1>
<ul>
    <li>
      <a href='#' class='hoofd'>Plaats uw eigen wens(2)</a>
      <div class='inhoud'>
        <form class="gastenboek"  method="post" action=""><p>
          <p8>Naam: (maximaal 16 karakters)</p8><br />
          <input type="text" name="naam" maxlength="16" /><br />
          <p8>Welke dag is het vandaag:</p8><br />
          <input type="text" name="dag"><br />
          <p8><input type="checkbox" id="anoniem" name="anoniem" value="anoniem">Anoniem (alleen bericht wordt geplaatst)</p8><br />
          <br><p8>Bericht: (maximaal 500 karakters)</p8><br />
          <textarea name="bericht" maxlength="500" id="tekst" rows="6" cols="37"></textarea><br>
          <input type="submit" class="submit" value="Toevoegen"/>
          </p><br>
        </form>
      </div>
    </li>
</ul>

  </body>
</html>
Gewijzigd op 31/08/2012 22:16:51 door Tim S
 
Tim S

Tim S

02/09/2012 23:57:41
Quote Anchor link
Ik heb de hele website nog even doorgelopen, en kan het probleem nog niet vinden.
Bovenstaande code zou inderdaad moeten werken volgens http://api.jquery.com/html/.

Nou wil ik graag oplossen dat ik niet de hele webpagina in de accordion te zien krijg, en eigenlijk wil ik ook het formulier weer terug zien. Misschien dat iemand een goede online cursus/tutorial hiervoor weet??

Suggesties zijn altijd welkom!!! Alvast bedankt!
 
Erwin H

Erwin H

03/09/2012 00:09:12
Quote Anchor link
Tim Slootweg op 31/08/2012 22:14:56:
<p8>Naam: (maximaal 16 karakters)</p8>

Heb je uberhaupt wel door dat je custom tags aan het gebruiken bent? Is dat echt nodig? Volgens mij niet.
Wil je het toch, lees dan dit artikel eens door: http://cherianajay.hubpages.com/hub/extented-HTML-tags
 
Tim S

Tim S

03/09/2012 00:40:23
Quote Anchor link
Nee dit had ik inderdaad niet door, ik kan dus beter een class gebruiken....
Ik neem aan dit dit niet de oorzaak van het probleem is...?

Iniedergeval bedankt!
 
Erwin H

Erwin H

03/09/2012 00:51:28
Quote Anchor link
Het kan best de oorzaak van het probleem in IE zijn. Zodra er fouten in de HTML zitten wordt het gedrag van browsers namelijk onvoorspelbaar. Die hebben allemaal hun eigen manier om de fouten op te lossen. De een zal er gewoon overheen kijken, de ander zal het mogelijk gewoon uit de DOM houden.
 
Tim S

Tim S

03/09/2012 01:11:41
Quote Anchor link
Ik heb zojuist de pagina aangepast een de custom tags vervangen. Dit had helaas geen effect op bovenstaande problemen, we blijven verder zoeken.....
 



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.