Ajax form submitting - problem with ID's, etc

[kartul]

Hello.

 

The idea: Have a page with multiple forms. Each form has a two buttons - Yes and No. Form is submitted with one of the buttons and the process page takes care of that. The form disappears, text is displayed that everything went fine and after 5 seconds the text is gone, leaving me with nothing. If something went wrong - with the ajax request or the process page returns false, it does something like adds red background.

 

What I have: Page with multiple forms, all with the same class (ajaxform), one input field (no id or class) and two buttons, both with the same class (button). I used jQuery Form Plugin (http://jquery.malsup.com/form/) and the form is submitted successfully, no page reload. I used the ajaxform as selector. ($('ajaxform').ajaxForm()). But I did not managed to get the submitted form to hide or to display any messages. I tried $(this).hide(); on success but all that did was broke the thing and the form was submitted with page refresh.

Using $.ajax function, the serialize doesn't seem to work.

url = 'tools.php?action=approve';
                data = $(this).serialize(); // i used ('.ajaxform') instead of (this) too.
                alert(url + data);

returns only url part.

 

Help I need(?): I figured that I need id instead of class in form but how do I do that? Then I would need new ajax submit function for every form I have.

Or when using the form plugin, how can I get the submitted form to hide and display something there. I figured that (this) should work cause, well this is the current thing that got changed.

 

Code I have:

// it's all in while loop, the row is array from database.
echo '<form class="ajaxform" action="' . BASE_URL . 'tools.php?action=approve&id=' . $row['id'] . '" method="POST">
<b>ID:</b> 
<input type="text" value="' . $row['id'] . '" disabled size="' . (strlen($row['id']) + 1) . '" />
<button type="submit" name="approve" value="yes" class="button">Yes</button> 
<button type="submit" name="approve" value="no" class="button">No</button>
</form>';

jQuery code:

 $('.button').click(function() {
            $('.ajaxform').submit(function() {
                /*$.ajax({
                    
                });*/
                url = 'tools.php?action=approve-secrets';
                data = $(this).serialize();
                alert(url + data);
            });
        });

Only display the url part.

$('.button').click(function() {
            $('.ajaxform').submit();
        });

Doesn't work.

$(".button").click(function() {
            $(".ajaxform").submit(function() {
                $.ajax({
                    url: '<?php echo BASE_URL; ?>tools.php?action=approve',
                    type: 'GET',
                    data: $('.ajaxform').serialize(),
                    success: function() {
                        $(this).hide();
                    }
                });
            });
        });

goes to tools.php?action= ...etc. &id=5 to the form url.

var options = {
            success : function() {
                $(this).hide();
            }
        }
        $('.ajaxform').ajaxForm(options);

submits the form but doesn't hide it.

 

Any ideas?