Javascript load and post - ajax

Question

I have this function in javascript
function save(){
//$("#complex").submit();
//Complex List
$(document).ready(function(){
var proofer_filter = document.getElementById('proofer').value;
var proofer_filter = proofer_filter.split(' ').join('_')
var status_filter = document.getElementById('status_filter').value;
var status_filter = status_filter.split(' ').join('_');
var cstart = document.getElementById('cstart').value;
var cstart = cstart.split(' ').join('_');
var cend = document.getElementById('cend').value;
var cend = cend.split(' ').join('_');
$("#complex_list").load("pages/complexlist.php?proofer="+proofer_filter+"&status_filter="+status_filter+"&start="+cstart+"&end="+cend+"&dept=<?php echo str_replace(" ","_",$department)?>");
}
);
//Complex Form
var account_type = document.getElementById('account_type').value;
var account_type = account_type.split(' ').join('_');
var log_id = document.getElementById('complexid').value;
$(document).ready(function(){
$("#show_form").load("pages/complexform.php?refno="+log_id+"&dept="+account_type+"&user=<?php echo str_replace(" ","_",$user)?>&save=y");
}
);
}
It is a page with two divs wherein each div loads a remote page. One of this divs is a form which has a submit button. When clicking it the form values does not post. Thus I could not use it as a php variable. Can anyone help?

Answer 1

split out your javascript into 2 sections
<script>
$(document).ready(function(){
$("#complex_list").load("pages/complexlist.php?proofer="+proofer_filter+"&status_filter="+status_filter+"&start="+cstart+"&end="+cend+"&dept=<?php echo str_replace(" ","_",$department)?>");
$("#show_form").load("pages/complexform.php?refno="+log_id+"&dept="+account_type+"&user=<?php echo str_replace(" ","_",$user)?>&save=y");
saveForm.init();
});
you will also need to create the function to save the form and an event listener for when someone clicks on your save button.
var saveForm= {
init: function () {
$('#submit-button').on('click', function () {
//only set all of your values if you are planning to submit an ajax form otherwise just submit the form with the last line of the event listener.
var proofer_filter = document.getElementById('proofer').value;
var proofer_filter = proofer_filter.split(' ').join('_')
var status_filter = document.getElementById('status_filter').value;
....
etc
//make sure to put your submit form in here too.
$( "#form" ).submit();
//if you are using ajax to submit the form, use the variables above to pass into the ajax call.
});
}
}
</script>
If you do not know where you are going wrong, use the Developer tools (F12) in Chrome when you are developing