//index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('form.frm_details').on('submit', function(event) {
event.preventDefault();
$.ajax({
url: 'functions2.php',
type: 'post',
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
if(data.status == '1')
{
$('#info').addClass('alert alert-danger no-border').html(data.message);
}
if(data.status == '2')
{
$('#info').addClass('alert alert-danger no-border').html(data.message);
}
}
});
});
});
</script>
<script>
function get_page(){
$.ajax({
type: 'GET',
url: '/domcontent.php',
dataType: 'html'
}).done(function( data ) {
$('#get_page').html(data);
});
}
get_page();
</script>
outside the dom
<form name='frm_details' class='frm_details' id='frm_details0' action=''>
<input type='text' name='fname'>
<input type='text' name='lname'>
<input type='submit' value='Outside dome'>
</form>
<div id='get_page'></div>
//domcontent.php
inside the dom
<form name='frm_details' class='frm_details' id='frm_details1' action=''>
<input type='text' name='fname'>
<input type='text' name='lname'>
<input type='submit' value='inside dom'>
</form>
im running into an issue with the 2 pages above index.php and domcontent.php my end goal is to be able to submit forms from index.php and domcontent.php using the same piece of ajax code bare in mind these are both the same form one is new and the other is update
the issue is when submitting the form frm_details0 from index.php it sees the ajax and submits the form to functions2.php i can see this works via the chrome network developers tool but the form frm_details1 inside the dom loaded via ajax onto index.php doesn't submit or even access functions2.php how can i make the form loaded inside the dom on index.php submit using the ajax located on index.php
im new to ajax so where possible please show edits to my code
thanks in advance