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:
<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>
En als laatste mijn html form (deze zit in een bootstrap modal, maar maakt volgens mij geen verschil):
<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>
