使用JavaScript提交HTML格式的多个表单

Question

I'm relatively new to HTML and JavaScript and i'm currently modifying a company osTicket.

I'm trying to submit 2 forms in the same page (i'm aware that HTML does not support this) through delaying the second submission with JavaScript, but i think there's something wrong with my code or way of thinking.

Here is the code:

<script type="text/javascript">
    function x() {
        setTimeout(function() {
            <?php // Just normal validation, checking if has administrator privileges or not
            if(!defined('OSTSCPINC') || !$thisstaff || !$thisstaff->canEditTickets() || !$ticket) die('Access Denied');

            $info=Format::htmlchars(($errors && $_POST)?$_POST:$ticket->getUpdateInfo());
            if ($_POST)
                $info['duedate'] = Format::date($cfg->getDateFormat(),
                strtotime($info['duedate']));

            echo '<form id="reply" action="tickets.php?id=' . $ticket->getId() . '#reply" name="reply1" method="post" enctype="multipart/form-data">';
            csrf_token();

            echo '<input type="hidden" name="do" value="update">'; // Fields that are mandatory for the form but don't want them to show
            echo '<input type="hidden" name="a" value="edit">';
            echo '<input type="hidden" name="id" value="' . $ticket->getId() . '">';
            echo '<input type="hidden" name="user_id" id="user_id" value="' . $info['user_id'] . '">';
            echo '<input type="hidden" name="source" value="' . $info['source'] . '">';
            echo '<input type="hidden" name="topicId" value="' . $info['topicId'] . '">';
            echo '<input type="hidden" name="slaId" value="' . $info['slaId']  . '">';
            echo '</form>';?>
            document.forms['reply1'].submit(); // The second form
        }, 2000);
    }
</script>

<form id="reply" action="tickets.php?id=<?php echo $ticket->getId();?>#reply" name="reply" method="post" enctype="multipart/form-data">
    <!-- a lot of code that it is working properly -->

    <input class="btn_sm" type='submit' value="<?php echo __('Post Reply');?>" onclick="x()">
</form>

The first if in PHP is just to prevent normal users from submitting this form, i'm logged in with administration access. All of the HTML and PHP is code that was already written and should work normally (except for syntax erros) and i also tested by submitting each form individually and works as expected.

Also, the first form submits normally with no errors, but the second seems like it doesn't get executed. I'm open to improvement in the code and advises, thanks !

Answer 1

In jQuery

$('form').submit(function(e){ // on a form submit
    e.preventDefault(); //do not submit
    serializedData = $("form").serialize(); //serialise all forms to JSON
    $.ajax({
        type: "POST",
        url: tickets.php,
        data: serializedData,
        success: function(){
            // do on success
        },
        dataType: json
    });
});

without:

var request = new XMLHttpRequest();
request.open('POST', 'tickets.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var forms = document.getElementsByTagName('form');
var data = JSON.stringify([].slice.call(forms));
request.send(data);