Carl Nettelblad Carl Nettelblad - 26 days ago 21
jQuery Question

Uncaught TypeError: action.serialize is not a function

This is my code looks like:

<form id="form1" method="post">
<div class="row top-buffer">
<div class="col-cs-6 col-md-8">
<input type="param" id="name2" name="value" class="form-control" value="test2">
</div>
<div class="col-cxs-6 col-md-4">
<button type='submit' value='test' class='send button btn btn-danger'>Lägg till</button> <!-- changed -->
</div>
</div>
</form>
<form id="form2" method="post">
<div class="row top-buffer">
<div class="col-cs-6 col-md-8">
<input type="param" id="name2" name="value" class="form-control" value="test">
</div>
<div class="col-cxs-6 col-md-4">
<button type='submit' value='delist' class='send button btn btn-danger'>Ta bort</button> <!-- changed -->
</div>
</div>
</form>


$(".send").click(function() {
var myform = $(this).closest("form");
var sForm = myform.serialize();
var action = $(this).val();
var sAction = $(this).val().serialize();;

$.ajax({
type: "POST",
url: "ajax.php",
data: sForm, sAction,
success: function(data) {
$('#response').html(data);
}
});
return false;
});


Currently I receive the following error:


whitelist.php:67 Uncaught TypeError: action.serialize is not a function(…)


If I change the
data
to the following, I don't get any errors but, the array is broken.

data: { mySform, 'Param': action },


The array ends up looking like this:

Array
(
[mySform] => value=test2
[Param] => test
)


To clarify a few things, what I want is the array to look like this:

Array ( [Param] => value [Action] => value )


and I need my jQuery to be able to work with more than 3 forms. Any help would be greatly appreciated, as I'm very new to jQuery and AJAX.

Answer

Firstly, you're getting the serialize is not a function error because you're calling it on a string. It's intended to be called on a form element contained within a jQuery object.

Secondly, you need to append the value of the clicked button to the querystring which is generated from the serialize() method.

Lastly, to stop the form submission in the correct manner you should hook the event to the form element itself. Try this:

$("form").submit(function(e) {
    e.preventDefault();
    var $form = $(this);
    var action = $form.find('.send').val();

    $.ajax({
        type: "POST",
        url: "ajax.php",
        data: $form.serialize() + '&action=' + action,
        // data: $form.serialize() + '&' + $.param({ action: action }) // alternative
        success: function(data) {
            $('#response').html(data);
        }
    });
});