Form gegevens verzenden via ajax
Ik krijg de value van de input firstname niet door in mijn ajax. Dit is maar een voorbeeld. Later wil ik dit uitbreiden. De bedoeling is om zo een validatie te kunnen doen van bepaalde inputs of die wel of niet ingevuld zijn.
Of ik nu iets invul in de firstname input of niet, ik krijg altijd dezelfde alert te zien, nl: 'Please fill in ...' wat dus volledig fout is.
Hieronder mijn javascript file:
Code (php)
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
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
<script type="text/javascript">
$(document).ready(function(){
$("#submit1234").click(function(){
var firstname = $('input[name="template-contactform-firstname"]').val()
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'firstname1='+ firstname;
if(firstname=='')
{
alert("Please Fill All Fields "+firstname);
}
else
{
// AJAX Code To Submit Form.
alert("Ok "+firstname);
$.ajax({
type: "POST",
url: "cta-aut.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
</script>
$(document).ready(function(){
$("#submit1234").click(function(){
var firstname = $('input[name="template-contactform-firstname"]').val()
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'firstname1='+ firstname;
if(firstname=='')
{
alert("Please Fill All Fields "+firstname);
}
else
{
// AJAX Code To Submit Form.
alert("Ok "+firstname);
$.ajax({
type: "POST",
url: "cta-aut.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
</script>
En als laatste mijn html form (deze zit in een bootstrap modal, maar maakt volgens mij geen verschil):
Code (php)
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
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
<div class="modal fade" id="cta-aut-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Vraag uw demo aan</h4>
</div>
<div class="modal-body">
<div class="style-msg successmsg" id="contact-form-result2"></div>
<div class="style-msg errormsg" id="contact-form-result3"></div>
<form class="nobottommargin" id="template-contactform" name="template-contactform">
<div class="form-process"></div>
<div class="col_one_third">
<label for="template-contactform-firstname">Voornaam <small>*</small></label>
<input type="text" id="template-contactform-firstname" name="template-contactform-firstname" value="" class="sm-form-control " />
</div>
<div class="col_one_third">
<label for="template-contactform-lastname">Achternaam <small>*</small></label>
<input type="text" id="template-contactform-lastname" name="template-contactform-lastname" value="" class=" sm-form-control " />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-email">Email <small>*</small></label>
<input type="text" id="template-contactform-email" name="template-contactform-email" value="" class=" sm-form-control" />
</div>
<div class="clear"></div>
<div class="col_one_third">
<label for="template-contactform-website">Website URL <small>*</small></label>
<input type="text" id="template-contactform-website" name="template-contactform-website" value="" class="sm-form-control " />
</div>
<div class="col_one_third">
<label for="template-contactform-phone">Telefoon <small>*</small></label>
<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control " />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-role">Uw functie <small>*</small></label>
<input type="text" id="template-contactform-role" name="template-contactform-role" value="" class=" sm-form-control" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-contactform-message">Wat is uw belangrijkste uitdaging op het vlak van marketing en verkoop?</label>
<textarea class="sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
</div>
<div class="col_full hidden">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
<button class="btn btn-success" id="submit1234">Verzenden</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Vraag uw demo aan</h4>
</div>
<div class="modal-body">
<div class="style-msg successmsg" id="contact-form-result2"></div>
<div class="style-msg errormsg" id="contact-form-result3"></div>
<form class="nobottommargin" id="template-contactform" name="template-contactform">
<div class="form-process"></div>
<div class="col_one_third">
<label for="template-contactform-firstname">Voornaam <small>*</small></label>
<input type="text" id="template-contactform-firstname" name="template-contactform-firstname" value="" class="sm-form-control " />
</div>
<div class="col_one_third">
<label for="template-contactform-lastname">Achternaam <small>*</small></label>
<input type="text" id="template-contactform-lastname" name="template-contactform-lastname" value="" class=" sm-form-control " />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-email">Email <small>*</small></label>
<input type="text" id="template-contactform-email" name="template-contactform-email" value="" class=" sm-form-control" />
</div>
<div class="clear"></div>
<div class="col_one_third">
<label for="template-contactform-website">Website URL <small>*</small></label>
<input type="text" id="template-contactform-website" name="template-contactform-website" value="" class="sm-form-control " />
</div>
<div class="col_one_third">
<label for="template-contactform-phone">Telefoon <small>*</small></label>
<input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control " />
</div>
<div class="col_one_third col_last">
<label for="template-contactform-role">Uw functie <small>*</small></label>
<input type="text" id="template-contactform-role" name="template-contactform-role" value="" class=" sm-form-control" />
</div>
<div class="clear"></div>
<div class="col_full">
<label for="template-contactform-message">Wat is uw belangrijkste uitdaging op het vlak van marketing en verkoop?</label>
<textarea class="sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
</div>
<div class="col_full hidden">
<input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
<button class="btn btn-success" id="submit1234">Verzenden</button>
</div>
</div>
</div>
</div>
</div>
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt![/modedit]
Gewijzigd op 15/11/2014 15:22:37 door Brecht S
Gewijzigd op 15/11/2014 15:12:13 door - Ariën -
Ik krijg de value van de input firstname niet door in mijn ajax. Dit is maar een voorbeeld. Later wil ik dit uitbreiden. De bedoeling is om zo een validatie te kunnen doen van bepaalde inputs of die wel of niet ingevuld zijn.
Of ik nu iets invul in de firstname input of niet, ik krijg altijd dezelfde alert te zien, nl: 'Please fill in ...' wat dus volledig fout is.
Gewijzigd op 15/11/2014 15:22:08 door Brecht S
Ik plaats die in de alert maar krijg niks te zien. Ik vermoed dat het daardoor is dat ik telkens de foutmelding krijg in de alert (Please fill...) ipv de ok-alert. Dus ik denk dat die waarde die je daar invult niet meegestuurd is. Of je dat veld nu invult of niet krijg ik toch telkens dezelfde alert te zien wat ook al niet juist is => bevestiging van mijn vermoeden dat de waarde van firstname niet meegestuurd is.
Code (php)
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
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
function sendFormByAjax()
{
alert('sendFormByAjax');
}
function validateContactform()
{
var valid = true;
var firstname = $('input[name="template-contactform-firstname"]').val();
if(firstname.length < 2) {
alert('Vul aub uw voornaam in.');
valid = false;
}
return valid;
}
$(document).ready(function(){
$("#submit1234").click(function(){
if(validateContactform()) {
sendFormByAjax();
}
return false;
});
});
{
alert('sendFormByAjax');
}
function validateContactform()
{
var valid = true;
var firstname = $('input[name="template-contactform-firstname"]').val();
if(firstname.length < 2) {
alert('Vul aub uw voornaam in.');
valid = false;
}
return valid;
}
$(document).ready(function(){
$("#submit1234").click(function(){
if(validateContactform()) {
sendFormByAjax();
}
return false;
});
});
Wat er wel raar is is dat jouw voorbeeld op codepen wel werkt. Waaraan kan het dan nog liggen?
Gewijzigd op 15/11/2014 15:44:42 door Brecht S
Gewijzigd op 15/11/2014 15:46:21 door Brecht S
Hier werkt het dus ook. Ik heb nogthans net hetzelfde gedaan op mijn website.
Gewijzigd op 15/11/2014 15:59:12 door Brecht S
Toevoeging op 15/11/2014 16:06:20:
Ik werk zelf met Chrome. In de console kun je vaak ook foutmeldingen achterhalen ( F12 en dan op Console klikken)
Maar ik heb het probleem gevonden ;-)
Ik had nog een form op dezelfde pagina staan met dezelfde id waarden en hij heeft deze waarde gebruikt om mijn value te vullen => vandaar geen resultaat want dat form werd niet ingevuld. Ik heb de id's veranderd.
Nu nog juist een vraagje ivm de messages die hij moet laten zien. Ik heb de alerts vervangen door iets anders maar nu krijg ik die boven elkaar te zien. Dus eerst vul je niks in en krijg je een foutmelding (voornaam niet ingevuld) en dat blijft staan. Daarna vul je het wel in en krijg je erboven de andere melding te zien (form is verzonden). Hoe kan ik dit aanpassen dat de meldingen verdwijnen achter bepaalde tijd? Of is er een andere mogelijkheid?
Gewijzigd op 15/11/2014 18:31:48 door Brecht S
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
$("#contactForm").submit(function(){
event.preventDefault();
$('.formErrors').hide(); // <-- DEZE, ALLE FOUTMELDINGEN VERBERGEN AANGEZIEN WE OPNIEUW GAAN CONTROLEREN
if(validateContactform()) {
sendFormByAjax();
}
return false;
});
});
$("#contactForm").submit(function(){
event.preventDefault();
$('.formErrors').hide(); // <-- DEZE, ALLE FOUTMELDINGEN VERBERGEN AANGEZIEN WE OPNIEUW GAAN CONTROLEREN
if(validateContactform()) {
sendFormByAjax();
}
return false;
});
});
Nu ga ik beginnen aan de url waarnaar dat gestuurd is. Ik vermoed dat ik met serialize er wel ga aan uit geraken? Kan ik dan $_POST['']; gebruiken om de values uit de form te halen?
Gewijzigd op 16/11/2014 11:45:04 door Brecht S
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$.ajax({
url: "script.php",
type: "POST",
data: {
firstname : $('#firstname').val(),
lastname : $('#lastname').val()
}
});
url: "script.php",
type: "POST",
data: {
firstname : $('#firstname').val(),
lastname : $('#lastname').val()
}
});
Gewijzigd op 16/11/2014 17:17:27 door Frank Nietbelangrijk