Error adding array elements to a form: Uncaught SyntaxError: missing ) after argument list

Question

I´m working on a academic php/javascript web project and I´m having some problems. In this project´s arquitecture, data is always sent to the server by POST using 'hidden forms'. This forms are built by the followings functions:

function crearform(name, method){
    var formu = document.createElement('form');
    document.body.appendChild(formu);
    formu.name = name;
    formu.method = method;
    formu.action = 'index.php';   
}


function insertacampo(form ,name, value){
    formulario = form;
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = value;
    formulario.appendChild(input);
}

function enviaform(form){
    form.submit();
}

A example use:

 <a class="btn-get-started i18n-cancelar" id="btn-cancel" type="button" onclick="
                                        crearform('formenviar','post');
                                        insertacampo(document.formenviar,'document_id', '<?php echo $this->document['document_id'] ?>');
                                        insertacampo(document.formenviar,'controller','ImpDoc');
                                        insertacampo(document.formenviar,'action','show');
                                        enviaform(document.formenviar);">
                                        Return
                                    </a>

This works perfectly fine! but for the next step I added a stack so the application can store all the POSTs received. In this way, for the return action I just have to get the last POST of the stack and I already have the params 'controller', 'action' ... availables.

And... here is the problem. The last POST stored on the stack is accessible through a php variable.

var_dump output: Last POST stored

array(2) { ["controller"]=> string(6) "Portal" ["action"]=> string(8) "_default" }

I created a javascript function that receives the array with the POST values ​​and adds them to a 'hidden form'.

function multiple_addfield(form, params) {
    for(let key in params) {
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = params[key];
        form.appendChild(input);
    }
}

And built the form like this:

<a class="btn-get-started i18n-back" type="button" onclick="
                            crearform('formenviar','post');
                            multiple_addfield(document.formenviar, <?php echo json_encode($this->previousShow); ?>);
                            enviaform(document.formenviar);">
                            Volver
                        </a>

But when I click on the button it doesn´t work. In the firefox console I receive this error:

Uncaught SyntaxError: missing ) after argument list

And in the chrome console:

Uncaught SyntaxError: Unexpected end of input

Inspecting the button element in Chrome:

<a class="btn-get-started i18n-back" type="button" onclick="
                            crearform('formenviar','post');
                            multiple_addfield(document.formenviar, {" controller":"portal","action":"_default"});="" enviaform(document.formenviar);"="">Volver</a>

Someone could help me?

Thanks!!

Answer 1

It would appear this is an issue of mixing php and JavaScript and HTML attribute content, in general when dealing with many different factors it's a good idea to test one thing at a time in order to determine where the error is

For example you are now trying to test a JavaScript function, but instead of only testing it within attribute text, from code generated from a server, maybe first test it with basic JavaScript that you can write yourself to make sure the Javascript works, then if so, try calling the same code from within the attribute manually, and see if it works, and if so then try outputting the server code to static text, then copying it manually and try entering it into the function, then if all of those individual steps work, if you put it all together and still didn't work, at least you know all of the individual parts are good, and the problem is only all together

In this case

<a class="btn-get-started i18n-back" type="button" onclick="
                            crearform('formenviar','post');
                            multiple_addfield(document.formenviar, {" controller":"portal","action":"_default"});="" enviaform(document.formenviar);"="">Volver</a>

Is simply invalid html, because it contains double quotations within other double quotations without being escaped, which is kind of hard to tell if it's all being generated from the server directly and placed within an attribute

To simply things, instead of outputting the php code into inline JavaScript, try outputting the php into a JavaScript variable that would be defined in a separate script tag, and once you've done that, you can simply reference that JavaScript variable in the inline JavaScript, or better yet, just create a completely custom function in the script tag and simply set the onclick to the name of that function

So for example on the server side you can add somewhere

<script>
var serverResponse = `<?php echo json_encode($this->previousShow); ?>`

//As a string to be safe, in case there was a problem encoding the JSON on the server side, then parse it manually (can do custom try catch here as well)

var parsed={}
try{parsed=JSON.parse(serverResponse)}
catch(e){}

function clickify (){
    crearform('formenviar','post');
                         multiple_addfield(document.formenviar, parsed)
}


</Script>
<a class="btn-get-started i18n-back" type="button" onclick="clickify">Volver</a>