Javascript load and post

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?

Solution

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