3

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 !

Frederico Martins
  • 1,081
  • 1
  • 12
  • 25
  • is jQuery ok to use? – online Thomas Jan 15 '16 at 10:50
  • 3
    Why do you use document.write() an php echo? you can directly echo in html: . You can use Ajax to submit different requests and process result in javascript or if you don't need multiple interactions you can simply group your form variables in different arrays and process them with php after. – Yuri Blanc Jan 15 '16 at 10:50
  • @YuriBlanc, well it does get much easier to understand – Frederico Martins Jan 15 '16 at 11:09
  • that way it would be ` $('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 }); });` – online Thomas Jan 15 '16 at 11:09
  • 1
    It's not much easier to understand, it's exactly the opposite. And `document.write()` is a bad practice, and bad idea, for this purposes. You can crash completely your application with that sentence. It's better `appendChild` or `innerHTML` to paint with javascript. But I think that @YuriBlanc said is the best you can do. – Marcos Pérez Gude Jan 15 '16 at 11:10
  • @MarcosPérezGude, what i meant was: "with the `echo`, it get's much easier to understand" – Frederico Martins Jan 15 '16 at 11:20
  • Ah OK! Sorry for the misunderstanding :( – Marcos Pérez Gude Jan 15 '16 at 11:21
  • @Flippy you should consider thinking about your js and php separately when trying a proof of concept or debugging; they invoke at different times on different machines and thus work independently to eachother – Paul S. Jan 15 '16 at 11:25
  • @PaulS., how would you advise in this situation ? – Frederico Martins Jan 15 '16 at 11:32
  • 1
    You create a php script that is the server side logic and you use ajax request to fullfill your needs. So you can also use json and make your js application dynamic and easy to mantain. WIth php you can json_encode/jsoc_decode and json is == to javascript objects. – Yuri Blanc Jan 15 '16 at 11:35
  • It's a good advice and i will keep that in mind, but i'm editing files that were already written and since i don't know most of the logic behind the platform, i thought this were the easiest solution – Frederico Martins Jan 15 '16 at 11:54

1 Answers1

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);
online Thomas
  • 8,864
  • 6
  • 44
  • 85