TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement ajax request

Question

I REALLY hate to be the one to ask a question that's already been asked, but none of the other solutions I have found are working for me. I am trying to get the value of an input and send it with ajax.

$("#cell_number").on("change", function() {
    var cell_number = $(this).val();
});

Here's the code that sends the data through:

submitHandler: function(form) {
    var stringifyMessage = message.join(" ");
    var smsformdata = {
        action: 'handle_form_submit',
        full_message: stringifyMessage.trim(),
              cell_number: cell_number
    };

    $.post('http://***/admin-ajax.php', smsformdata, function(response) {

    })
    .complete(function() {
        $("#sms_form")[0].reset();
        myOnload();
    })

        return false;
},

I've tried putting the val() in the smsformdata array, as you can see I have put it straight on the variable, I've tried a few different "to string" methods, I've tried .attr('value'); .... Not sure where to go from here!

Answer 1

You get the error because in

cell_number: cell_number

cell_number is the HTMLInputElement with that id.

---

This should work

var smsformdata = {
    action: 'handle_form_submit',
    full_message: stringifyMessage.trim(),
    cell_number: $('#cell_number').val()
};

Note that

$("#cell_number").on("change", function() {
     var cell_number = $(this).val();
});

does not have an effect since you store the value only to local variable var cell_number .