Question

I have several forms on a single page, which all consist of 2 hidden elements and a checkbox. Upon changing the checkbox I want to submit the form via ajax and write to my database.

Form:

<form method="post" id="deadline_form<?php echo $aid; ?>" action="" style="width: 20px;" class="pull-left" >
    <input type="hidden" name="aid" value="<?php echo $act_array['activity']['aid']; ?>">
    <input type="hidden" name="uid" value="<?php echo $uid; ?>">
    <input class="deadline_on" type="checkbox" name="deadline_on" id="deadline_on" value="1" <?php if($deadline_checked){ echo "checked='checked'"; } ?> >
</form>

JQuery:

$('.deadline_on').on('change', function(){
    var id=$(this).parent("form").attr('id');
        console.log(id);
        var id_complete = '#'+id;
    $(id_complete).submit(function(){
        console.log(id_complete);
        dataString = $(id_complete).serialize();
        $.ajax({
            type: "POST",
            url: "/activities/edit_deadline_preference",
            data: dataString,
            success: function(data){

            }
            });
        return false; //stop the actual form post !important!
    });
});

The everything until L5 of the JQuery (the submit) works, nothing works afterwards. Any help is appreciated.

Was it helpful?

Solution

I hope you don't need:$(id_complete).submit(function(){

This is enough:

$('.deadline_on').on('change', function(){        
    dataString = $(this).parent("form").serialize();
    $.ajax({
            type: "POST",
            url: "/activities/edit_deadline_preference",
            data: dataString,
            success: function(data){    
            }
    });            
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top