Bootstrap modal ajax form submit returns empty $_POST

Question

I'd like to submit my modal form with ajax. First I fill the form with some pre-defined data. This part works. However when I click the submit button I do get a hit on my form.php script but within the script, the $_POST is empty. What am I doing wrong here?

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Edit MAC alias</h4>
            </div>
            <div class="modal-body">
                <form class="macalias" name="macalias" id="macalias">
                    <input type="hidden" class="form-control" id="valmac" name="valmac">
                    <div class="form-group">
                        <label for="message-text" class="control-label">Alias:</label>
                        <input type="text" class="form-control" id="valalias" name="valalias">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-default" data-dismiss="modal">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    $(function ()
    {
    // fill the form with data (this part works)
    $('#exampleModal').on
    ('show.bs.modal', function (event)
        {
            var button = $(event.relatedTarget)
            var valmac = button.data('valmac')
            var valalias = button.data('valalias')
            var modal = $(this)
            modal.find('.modal-title').text('Edit alias for ' + valmac)
            modal.find('.modal-body input[id=valmac]').val(valmac)
            modal.find('.modal-body input[id=valalias]').val(valalias)
        }
    )

    $( ".macalias" ).submit(function( event ) {
      //cancel the default submit action by calling
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "form.php",
            data: $('form#macalias').serialize(),
            success: function(msg){
                $('#exampleModal').modal('hide')
            },
            error: function(){
                alert("failure");
            }
        });
    });
});
</script>

Edited: code works now

Answer 1

your form has a class named macalias so it should be

data: $('form.macalias').serialize()

EDIT!

You can listen for keypress (Enter) but then I think it's better to attach an event handler for the form submission. Replace

$("input#submit").click(function(){...});

with

$( ".macalias" ).submit(function( event ) {
  //cancel the default submit action by calling
  event.preventDefault();

  //Your ajax stuff
});

and change to a submit button

<button type="submit" class="btn btn-default" data-dismiss="modal" >Close</button>