I am making my first website and I want to implement a contact form using ajax and php, but it wont work. This question might seem preety dumb but please dont hate me for beeing a beginner in programming.
Do you guys have an Idea what could be wrong?
Here is my HTML Code:
<div class="col-lg-9 col-md-9 col-xs-12">
<div class="contact-block">
<form id="contactForm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Ihr Name" required data-error="Bitte geben Sie Ihren Namen ein">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Ihre E-Mail" id="email" class="form-control" name="name" required data-error="Bitte geben Sie Ihre E-Mail Adresse ein">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" placeholder="Betreff" id="msg_subject" class="form-control" required data-error="Please enter your subjectBitte fügen Sie einen Betreff hinzu">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="Ihre Nachricht" rows="7" data-error="Schreiben Sie eine Nachricht" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-button">
<button class="btn btn-common btn-effect" id="submit" type="submit">Nachricht senden</button>
<div id="msgSubmit" class="h3 hidden"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
</div>
</div>
This is my js Code:
function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var msg_subject = $("#msg_subject").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/form-process.php",
data: "name=" + name + "&email=" + email + "&msg_subject=" + msg_subject + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
submitMSG(false,text);
}
}
});}
This is my php file in which I want to send the Mail:
<?php
if($_POST){
$name = $_POST['name'];
$email = $_POST['email'];
$msg_subject = $_POST['msg_subject']
$message = $_POST['message'];
//send email
mail("email@gmail.com", "This is an email from:" .$email, $msg_subject, $message);}?>
If you need further information, please feel free to ask.
There could be a few things going on here. Hard to tell without seeing more. Have you attached the submitForm() function to the button?
Some possible reasons:
Try by including jQuery library:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Put your jQuery code in .ready():
$( document ).ready(function() {
// Handler for .ready() called.
});
You need to call JS function submitForm() on form submit event:
$("#contactForm").on( 'submit', function(){
submitForm();
return false;
});
Make sure following url exists:
php/form-process.php
Fix your mail function params:
mail ( string $to , string $subject , string $message [, mixed $additional_headers [, string $additional_parameters ]] )
i was using ajax with nodeJs but i don't think this should be valid url: "php/form-process.php",
try instead adding route you are using for handling request like
/form-process.php
or /php/form-process.php
or whatever route you are using
if you haven't added jquery to your html that would cause this too