I am trying to submit this form on my hosted domain, and I can figure why my php code is not working. I have included the jquery and my script code in my html.php page corectly. I do not have any javascripts errors, still the form is not submited, can not figure that out.
Php code
$name = filter_var($_POST['q1'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['q2'], FILTER_SANITIZE_EMAIL);
$priority=filter_var($_POST['q3'], FILTER_SANITIZE_EMAIL);
$message = filter_var($_POST['q4'], FILTER_SANITIZE_STRING);
$buget = filter_var($_POST['q5'], FILTER_SANITIZE_EMAIL);
$sent = email($to,$email,$name,$buget,$message);
if ($sent) {
echo 'Message sent!';
} else {
echo 'Message couldn\'t sent!';
}
}
else {
echo 'All Fields are required';
}
return;
}
/**
* email function
*
* @return bool | void
**/
function email($to,$email,$name,$buget,$message){
$header = array();
$header[] = "MIME-Version: 1.0";
$header[] = "From: {$from_name}<{$from_mail}>";
/* Set message content type HTML*/
$header[] = "Content-type:text/html; charset=iso-8859-1";
$header[] = "Content-Transfer-Encoding: 7bit";
if( mail($to, $buget, $message, implode("
", $header)) ) return true;
}
?>
Html form
<html>
<form id="myform" class="fs-form fs-form-full" action="" method='post' autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">What's your name? </label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="A name" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2" data-info="We won't send you spam, we promise...">What's your email address?</label>
<input class="fs-anim-lower" id="q2" name="q2" type="email" placeholder="name@email.com" required/>
</li>
<li data-input-trigger>
<label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">What's your priority for your new website?</label>
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
<span><input id="q3b" name="q3" type="radio" value="conversion"/> <label for="q3b" class="radio-conversion">Sell things</label></span>
<span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">Become famous</label></span>
<span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">Mobile market</label></span>
</div>
</li>
<li data-input-trigger>
<label class="fs-field-label fs-anim-upper" data-info="We'll make sure to use it all over">Choose a color for your website.</label>
<select class="cs-select cs-skin-boxes fs-anim-lower">
<option value="" disabled selected>Pick a color</option>
<option value="#588c75" data-class="color-588c75">#588c75</option>
<option value="#b0c47f" data-class="color-b0c47f">#b0c47f</option>
<option value="#f3e395" data-class="color-f3e395">#f3e395</option>
<option value="#f3ae73" data-class="color-f3ae73">#f3ae73</option>
<option value="#da645a" data-class="color-da645a">#da645a</option>
<option value="#79a38f" data-class="color-79a38f">#79a38f</option>
<option value="#c1d099" data-class="color-c1d099">#c1d099</option>
<option value="#f5eaaa" data-class="color-f5eaaa">#f5eaaa</option>
<option value="#f5be8f" data-class="color-f5be8f">#f5be8f</option>
<option value="#e1837b" data-class="color-e1837b">#e1837b</option>
<option value="#9bbaab" data-class="color-9bbaab">#9bbaab</option>
<option value="#d1dcb2" data-class="color-d1dcb2">#d1dcb2</option>
<option value="#f9eec0" data-class="color-f9eec0">#f9eec0</option>
<option value="#f7cda9" data-class="color-f7cda9">#f7cda9</option>
<option value="#e8a19b" data-class="color-e8a19b">#e8a19b</option>
<option value="#bdd1c8" data-class="color-bdd1c8">#bdd1c8</option>
<option value="#e1e7cd" data-class="color-e1e7cd">#e1e7cd</option>
<option value="#faf4d4" data-class="color-faf4d4">#faf4d4</option>
<option value="#fbdfc9" data-class="color-fbdfc9">#fbdfc9</option>
<option value="#f1c1bd" data-class="color-f1c1bd">#f1c1bd</option>
</select>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q4">Describe how you imagine your new website</label>
<textarea class="fs-anim-lower" id="q4" name="q4" placeholder="Describe here"></textarea>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q5">What's your budget?</label>
<input class="fs-mark fs-anim-lower" id="q5" name="q5" type="number" placeholder="1000" step="100" min="100"/>
</li>
</ol><!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form><!-- /fs-form -->
Javascript code
$(document).ready(function() {
var form = $('#form'); // contact form
var submit = $('#submit'); // submit button
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
// sending ajax request through jQuery
$.ajax({
url: '', // form action url
type: 'POST', // form submit method get/post
dataType: 'html', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
submit.html('Sending....'); // change submit button text
},
success: function(data) {
form.trigger('reset'); // reset form
submit.html('Send Email'); // reset submit button text
},
error: function(e) {
console.log(e)
}
});
});
});
