Formulier submit met Jquery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jelle Hi

Jelle Hi

10/06/2015 11:20:55
Quote Anchor link
Hey :)

Ik ben op het moment bezig om een formulier te verzenden met JQuery/Ajax, om zo de pagina niet te hoeven herladen..
Het punt is nu alleen: de pagina herlaad wel, en er wordt niets verzonden..

Javascript
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
$(function() {
    $('.error').hide();
    $("#ideebus-submitbutton").click(function() {
      // validate and process form here
      
          $('.error').hide();
          var name = $("input#ideebus-inputName").val();
              if (name == "") {
            $("div#ideebus-inputName-group").addClass('has-error');
            $("input#ideebus-inputName").focus();
            return false;
          }
          var email = $("input#ideebus-inputEmail").val();
              if (email == "") {
            $("div#ideebus-inputEmail-group").addClass('has-error');
            $("input#ideebus-inputEmail").focus();
            return false;
          }
        var niveau = $("input#ideebus-selectNiveau").val();
              if (niveau == "") {
            $("div#ideebus-selectNiveau-group").addClass('has-error');
            $("input#ideebus-selectNiveau").focus();
            return false;
          }
        var year = $("input#ideebus-selectyear").val();
              if (year == "") {
            $("div#ideebus-selectyear-group").addClass('has-error');
            $("input#ideebus-selectyear").focus();
            return false;
          }
        var idee = $("textarea#ideebus-klacht").val();
              if (email == "") {
            $("div#ideebus-inputIdee-group").addClass('has-error');
            $("textarea#ideebus-klacht").focus();
            return false;
          }
          var dataString = 'ideebus-naam='+ naam + '&ideebus-email=' + email + '&ideebus-niveau=' + niveau + '&ideebus-leerjaar=' + year + '&ideebus-idee=' + idee;
          //alert (dataString);return false;
          $.ajax({
            type: "POST",
            url: "/core/assets/php/formprocess.php",
            data: dataString,
            success: function() {
              $('#ideeform').fadeOut();
              $('#ideeform').fadeIn(1500, function() {
                $('#message').html('<p class="lead"><strong>Yess, je idee is verzonden!</strong><br>Top dat je je idee of suggestie hebt doorgegeven aan ons, waarschijnlijk hoor je binnenkort meer van ons!</p>');
              }); // end fade
            }
          }); // end ajax
      return false;
    });
  });


HTML
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
<div class="panel-body">
              <div id="ideeform">
                <form class="form-horizontal">
                <input type="hidden" name="form_name" value="ideebus">
                  <fieldset>
                    <div class="form-group" id="ideebus-inputName-group">
                      <label for="ideebus-inputName" class="col-lg-2 control-label">Naam</label>
                      <div class="col-lg-10">
                        <input type="text" class="form-control" id="ideebus-inputName" placeholder="Pietje Jansen" name="ideebus-naam">
                        </div>
                    </div>
                    <div class="form-group" id="ideebus-inputEmail-group">
                      <label for="ideebus-inputEmail" class="col-lg-2 control-label">Email</label>
                      <div class="col-lg-10">
                        <input type="email" class="form-control" id="ideebus-inputEmail" placeholder="ik@me.com" name="ideebus-email">
                      </div>
                    </div>
                    <div class="form-group" id="ideebus-selectNiveau-group">
                      <label for="ideebus-selectNiveau" class="col-lg-2 control-label">Niveau</label>
                      <div class="col-lg-10">
                        <select class="form-control" id="ideebus-selectNiveau" onchange="yearSelect('ideebus')" name="ideebus-niveau">
                          <option disabled="" selected="">Kies je niveau...</option>
                          <option value="vmbo-bb">VMBO-BB</option>
                          <option value="vmbo-kb">VMBO-KB</option>
                          <option value="vmbo-t">VMBO-T / MAVO</option>
                          <option value="havo">HAVO</option>
                          <option value="vwo">VWO / Atheneum</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group" id="ideebus-selectYear-group" style="display: none;">
                      <label for="ideebus-selectYear" class="col-lg-2 control-label">Leerjaar</label>
                      <div class="col-lg-10">
                        <select class="form-control" id="ideebus-selectYear" name="ideebus-leerjaar">
                          <option disabled="" selected="">Kies je leerjaar...</option>
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group" id="ideebus-inputIdee-group">
                      <label for="ideebus-klacht" class="col-lg-2 control-label">Idee</label>
                      <div class="col-lg-10">
                        <textarea class="form-control" rows="3" id="ideebus-klacht" name="ideebus-idee"></textarea>
                        <span class="help-block">Het mag natuurlijk ook een suggestie of een tip zijn.</span>
                      </div>
                    </div>
                    <div class="form-group">
                      <div class="col-lg-10 col-lg-offset-2">
                        <input  type="submit" class="btn btn-primary" id="ideebus-submitbutton" value="Verstuur mijn idee!">
                      </div>
                    </div>
                  </fieldset>
                </form>
              </div>


Iemand die meer verstand heeft van dit (kan niet heel moeilijk zijn ;) en mij wat advies kan geven?
 
PHP hulp

PHP hulp

26/01/2020 22:38:29
 
Jacco Engel

Jacco Engel

10/06/2015 11:25:02
Quote Anchor link
probeer dit eens aan je form toe te voegen :
onsubmit="return false;"

Dus dat komt er dan zo uit te zien :
<form class="form-horizontal" onsubmit="return false;">

Dat zou het verversen moeten voorkomen. Dan kun je beginnen met je ajax call debuggen
 
Henk de Vriep

Henk de Vriep

10/06/2015 13:53:23
Quote Anchor link
Jacco Engel op 10/06/2015 11:25:02:
probeer dit eens aan je form toe te voegen :
onsubmit="return false;"

Dus dat komt er dan zo uit te zien :
<form class="form-horizontal" onsubmit="return false;">

Dat zou het verversen moeten voorkomen. Dan kun je beginnen met je ajax call debuggen


Dit is inderdaad een oplossing maar niet de beste oplossing. Beter gebruik je een prevent default om alles netjes bij elkaar te houden.

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
$(function() {
    $('.error').hide();
    $("#ideebus-submitbutton").click(function(e) {
      // validate and process form here
          e.preventDefault();
          $('.error').hide();
          var name = $("input#ideebus-inputName").val();
              if (name == "") {
            $("div#ideebus-inputName-group").addClass('has-error');
            $("input#ideebus-inputName").focus();
            return false;
          }
          var email = $("input#ideebus-inputEmail").val();
              if (email == "") {
            $("div#ideebus-inputEmail-group").addClass('has-error');
            $("input#ideebus-inputEmail").focus();
            return false;
          }
        var niveau = $("input#ideebus-selectNiveau").val();
              if (niveau == "") {
            $("div#ideebus-selectNiveau-group").addClass('has-error');
            $("input#ideebus-selectNiveau").focus();
            return false;
          }
        var year = $("input#ideebus-selectyear").val();
              if (year == "") {
            $("div#ideebus-selectyear-group").addClass('has-error');
            $("input#ideebus-selectyear").focus();
            return false;
          }
        var idee = $("textarea#ideebus-klacht").val();
              if (email == "") {
            $("div#ideebus-inputIdee-group").addClass('has-error');
            $("textarea#ideebus-klacht").focus();
            return false;
          }
          var dataString = 'ideebus-naam='+ naam + '&ideebus-email=' + email + '&ideebus-niveau=' + niveau + '&ideebus-leerjaar=' + year + '&ideebus-idee=' + idee;
          //alert (dataString);return false;
          $.ajax({
            type: "POST",
            url: "/core/assets/php/formprocess.php",
            data: dataString,
            success: function() {
              $('#ideeform').fadeOut();
              $('#ideeform').fadeIn(1500, function() {
                $('#message').html('<p class="lead"><strong>Yess, je idee is verzonden!</strong><br>Top dat je je idee of suggestie hebt doorgegeven aan ons, waarschijnlijk hoor je binnenkort meer van ons!</p>');
              }); // end fade
            }
          }); // end ajax
      return false;
    });
  });


zie regel 3 en 5. In de onclick voeg je e toe om het event te kunnen benaderen. Daarnaast prevent je het default gedrag met preventDefault();. Het default gedrag van de button is hier het submitten van het formulier. Dit gebeurt voordat je AJAX request wordt getriggerd dus heb je ook geen output.
 



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.