</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> <a href="/posts/25552779/edit">Update the question</a> so it's <a href="/help/on-topic">on-topic</a> for Stack Overflow.
</p>
<p class="mb0 mt6">Closed <span title="2014-08-29 00:51:03Z" class="relativetime">5 years ago</span>.</p>
</div>
</div>
</aside>
Can someone please help me with this code by looking over it for something obvious? The problem seems to be that the embedded JavaScript code is not being executed and, therefore, the PHP code is also skipped. Both, the HTML and the PHP files are in the root directory.
html/js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX test form</title>
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Contacts -->
<div id="contacts">
<div class="row">
<!-- Alignment -->
<div class="col-sm-offset-3 col-sm-6">
<p> </p>
<p>Some header message here</p>
<p> </p>
<form name="contact" class="well" id="contact">
<legend>Contact Form</legend>
<div class="control-group">
<div class="controls">
<input type="text" class="form-control" placeholder="Name" id="name" />
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="email" class="form-control" placeholder="Email" id="email" required/>
</div>
</div>
<div class="control-group">
<div class="controls">
<textarea rows="10" cols="100" class="form-control" placeholder="Message" id="message" style="resize:none"></textarea>
</div>
</div>
<div id="success"> </div>
<button type="submit" class="btn btn-primary pull-right" id="submit">Send</button>
<button type="reset" class="btn btn-default pull-right" id="res">Reset</button>
<br />
</form>
</div>
</div>
</div>
</div>
<script>
$(function() {
$("button#submit").click(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(){
alert("success");
},
error: function(){
alert("failure");
}
});
});
});
</script>
</body>
</html>
php:
<?php
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['Email']);
$message= strip_tags($_POST['message']);
echo "Name =".$name."</br>";
echo "Email =".$email."</br>";
echo "Message =".$message."</br>";
echo "<span class=\"label label-info\" >your message has been submitted .. Thank you</span>";
}
?>
</div>
The selector should be
$('form#contact')
instead of
$('form.contact')
As contact is an id.
This will work if your link is correct (process.php) and you have these two jquery library links (to be honest, I am not 100% if you need both, or only one or what, but I know between the two, the ajax works).
You have no names in your form, only placeholders so there are no inputs. That is the real problem. Example: <input type="text" id="Name" name="Name" placeholder="Name" />
If it still doesn't work, you have a problem beyond what you are displaying in your code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#contact").submit(function(){
$.ajax({
type: "POST",
url: "process.php",
data: $('#contact').serialize(),
success: function(result){
$('#contacts').html(result);
// alert("success");
},
error: function(){
alert("failure");
}
});
return false;
});
});
</script>
process.php page:
<?php print_r($_REQUEST);
// $_REQUEST['name'] has to be an input name in the form. Yours probably has $_REQUEST['Name'] (notice "name" vs "Name")
if (isset($_REQUEST['name'])) {
$name = strip_tags($_REQUEST['name']);
$email = strip_tags($_REQUEST['Email']);
$message= strip_tags($_REQUEST['message']);
echo "Name =".$name."</br>";
echo "Email =".$email."</br>";
echo "Message =".$message."</br>";
echo "<span class=\"label label-info\" >your message has been submitted .. Thank you</span>";
}
?>