P.S. edited to remove unnecessary code
Can you tell me what I'm doing wrong here? The error log doesn't show a thing.
Here's my html, js, and php.
sample.js
// this is to prevent page refresh, right?
stepsForm.prototype.options = {
onSubmit : function() { return false; }
};
// submits the form, but i add some js in sample.html, so this one will not work.
stepsForm.prototype._submit = function() {
this.options.onSubmit( this.el );
}sample.html
<div class="container">
<section>
<form id="theForm" class="simform" autocomplete="off" action="form-process.php">
<div class="simform-inner">
<ol class="questions">
<li>
<span><label for="q1">What's your name / full name?</label></span>
<input id="q1" name="q1" type="text" />
</li>
<li>
<span><label for="q2">What's your email address?</label></span>
<input id="q2" name="q2" type="text" data-validate="email" />
</li>
<li>
<span><label for="q3">What's your phone number?</label></span>
<input id="q3" name="q3" type="text" data-validate="phone" />
</li>
<li>
<span><label for="q4">Type your question below?</label></span>
<input id="q4" name="q4" type="text" />
</li>
</ol>
<!-- /questions -->
<button class="submit" type="submit">Send answers</button>
<div class="controls">
<button class="next"></button>
<div class="progress"></div>
<span class="number">
<span class="number-current"></span>
<span class="number-total"></span>
</span>
<span class="error-message"></span>
</div>
<!-- / controls -->
</div>
<!-- /simform-inner -->
<span class="final-message"></span>
</form>
<!-- /simform -->
</section>
</div>
<!-- /container -->
<script src="js/classie.js"></script>
<script src="js/stepsForm.js"></script>
<!-- this is the script that will replace the one in the sample.js -->
<script>
var theForm = document.getElementById('theForm');
new stepsForm(theForm, {
onSubmit: function(form) {
classie.addClass(theForm.querySelector('.simform-inner'), 'hide');
var name = $("#q1").val();
var email = $("#q2").val();
var number = $("#q3").val();
var message = $("#q4").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "form-process.php",
data: JSON.stringify({
name: name,
email: email,
number: number,
message: message
}),
success: function(response) {
var data = response.d;
var messageEl = theForm.querySelector('.final-message');
messageEl.innerHTML = 'Thank you! We\'ll be in touch.';
classie.addClass(messageEl, 'show');
}
});
}
});
</script>sample.php
$EmailTo = "mail@mail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Phone Number: ";
$Body .= $number;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success pageso the step for this process is get the input from html, process it with ajax (js), then send it to sample.php to mail it, right? but I cant seem to pass the ajax process or sample.php. my code result in blank page and no outgoing email.
Since I'm new to php and js, I mostly reverse engineer the source to make it suitable for me. This time I have taken the "minimalist form interface" from codrops.
and this is also my first post in SO, so please be gentle :)
