Ajax post values from parent form and modal

Question

I'm sure this is possible but struggling to get this to work. My modal div sits above the form within my parent page and contains form elements for title, publish and date. On clicking postpages button, it only posts the values within my parent form 'pagesform'. I need this to post the form elements in my modal as well.

If I do console.log it does bring up the title and publish etc as it should so I know the values are correct, they just don't post.

HTML

<div id="mymodal" role="dialog">

title + publish + date are here

</div>

<form id="pagesform" method="post">
..etc
</form>

AJAX

$('#postpages').click(function(){

    // values in modal
    $title = $('#title').val();
    $publish = $('#publish').val();
    $date = $('#date_time').val();

    // post parent form vars
    var form = $('#pagesform').serialize();
        $.ajax({
            url: '{{ url("api/processpages")}}',
            method: 'post',
            data: form,
            success: function(data){
                $('#showpages').append(data);
            },
            error: function(){},
    });
});

Answer 1

Maybe you can use:

$('#pagesform').append($('#title'));
...
var form = $('#pagesform').serialize();
...

Answer 2

You may have to restructure your markup so that the modal form elements are descendants of the form element:

<form id="pagesform" method="post">

    <div id="mymodal" role="dialog">

    title + publish + date are here

    </div>

..etc

</form>

Answer 3

You can append your values to form data:

var form = $('#pagesform').serialize() + '&title=' + $title + ...

Don't forget to url-encode your values if they contain special characters.