I've created a dynamic website with an index page that has a container with class 'dynamic_content' in which javascript loads contents based on user input
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css">
<!--SCRIPT-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="script/primaryScript.js"></script>
</head>
<body>
<div class="content">
<img src="images/logo.png" id="head"/>
<div class="dynamic_content">
<!--content here-->
</div>
</div>
</body>
On a certain input, dynamic_content is filled up with a form that has a specific ID registration_form, that manages user inputs by passing them to a server php page with a post action with an input submit.
What I want is that, given any php answer, the response is loaded on the same page, INSIDE dynamic_content, I have tried jQuery with AJAX but it seems that it cannot find the ID of the form, even if I use event handler, this is my jQuery code fragment (my last try with the code found in another answer here):
$(document).ready(function() {
$(".dynamic_content form").on('submit', function(event) {
//avoid default behaviour
event.preventDefault();
//getting the elements from the form
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
//sending data
$.post(url, data)
.done( function(response) {
$(".dynamic_content").html('<p id="intro">' + data + '</p>');
$(".dynamic_content").append('<a onclick="index.html"><div class="begin">VAI ALLA HOME</div></a>"');
})
.fail( function() {
alert("The AJAX request failed!");
});
}); });
This code is inside "primaryScript.js". Is there something wrong? What do I have to do?
