javascript - Uncaught TypeError: action.serialize is not a function - Stack Overflow

admin管理员组

文章数量:1406924

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.

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.

• javascript
• php
• jquery
• ajax
• forms

Share Improve this question Follow edited Nov 14, 2016 at 8:21 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Nov 14, 2016 at 8:10 CarlCarl 3311 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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);
        }
    });
});

本文标签： javascriptUncaught TypeError actionserialize is not a functionStack Overflow