如何将数据从HTML表单传递到处理AJAX调用的JavaScript文件

Question

How can I go about passing data from a HTML form to a JavaScript file that handles AJAX calls?

submission_form.php

<?php echo elgg_view("input/file", array("name" => "icon", "class" => "icon")); ?>

<p>
    <?= elgg_view('input/text', ["name" => 'title', "class" => "title"]); ?>
</p>

submit.js

function myajax_function(){
    var Ajax = require('elgg/Ajax');
    var ajax = new Ajax();

    ajax.action('service_comments/add_service_comment', {
        data: {
            picture: 1,
            description: 2
        },
    }).done(function (output, statusText, jqXHR) {
        if (jqXHR.AjaxData.status == -1) {
            return;
        }
        alert(output.sum);
        alert(output.product);
    });
}

action file : submission_form.php

// Not working
$title = get_input('title');

// I'm not sure how to go about extracting the file from input/file and text from input/text

Thank you all in advance.

I'm working with Elgg version 2.X, and following this tutorial: Ajax Actions but I think this would be standadised (data exchange from HTML to Javascript to PHP for AJAX persistence)

Answer 1

add a class or ID to the form tag.

echo elgg_view_form('submission_form', array('class' => 'elgg-form-submission_form'), array());

then in your JS file

$(".elgg-form-submission_form").submit(function( event ) {
    $.post("service_comments/add_service_comment", $(this).serialize(), function(result) {

}