expanding a quoted string within another string

Question

I have two variables containing some html code, and another variable containing code for a html form. I am trying to expand a string within the second to pass it as a parameter to a function, however this causes some errors.

My make popup function is very simple:

function popup(htmlcode){
child1 = window.open ("about:blank");
child1.document.write(htmlcode);
child1.document.close(); 
}

The code that uses the above function

<?php
$blah = "<h1>Well</h1>"; $test = "<h2>Done</h2>";
echo '<script type="text/javascript" src="fetchlayers.js"></script>';
$formcode = "<form action=\"process.php\" method=\"post\" enctype=\"multipart/form-data \">
<label for=\"file\">Filename:</label>
<input type=\"file\" name=\"file\" id=\"file\"/> 
<br />
<input type=\"submit\" name=\"submit\" value=\"Submit\" onclick=\"setTimeout(function() { sendInfo(\"".$blah."\", \"".$test."\"); } ),1250);\" />
</form>";

echo "<h1>hello</h1>
<div id='form'>
<a href='#' onclick=\"popup('" . htmlentities($formcode) . "'); return false;\">
click here</a>
</div>";

This produces decent enough html code, however firebug gives me an error that I have an unterminated string lateral. I cannot find where this is. I understand the way I have done this is not ideal, but I am learning and do not know a better way at present. I appreciate any input

edit: OK, so the problem was that I had unterminated string literals, which were \n characters. I made the string into one line and it called the function correctly.

Is it not possible to break one echo statement into multiple lines?

Now the problem is with the html generated in the popupwindow. Some of the code is actually printed to the screen, why is this?

<form action="process.php" method="post" enctype="multipart/form-data "><label for="file">Filename:</label><input name="file" id="file" type="file"> <br><input name="submit" value="Submit" onclick="setTimeout(function() { sendInfo(" type="submit"><h1>Well</h1>", "<h2>Done</h2>"); },1250);" /></form>

See the image here:

Answer 1

A better way to do this is to open an HTML or PHP page that already has the form code in it, instead of opening about:blank and passing it dynamically.

There is no reason you should ever have to pass HTML into a Javascript function just so it can be directly written to document.

Answer 2

If you absolutely have to keep the popup function as is, I found a solution with help from this answer to "How do I escape a string inside javascript inside an onClick handler?".

<?php
$blah = "<h1>Well</h1>"; $test = "<h2>Done</h2>";
echo '<script type="text/javascript" src="fetchlayers.js"></script>';
$formcode = '<form action="process.php" method="post" enctype="multipart/form-data ">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"/> 
<br />
<input type="submit" name="submit" value="Submit" onclick="setTimeout(function() { sendInfo(\\x27'.$blah.'\\x27, \\x27'.$test.'\\x27); }, 1250);" />
</form>';

echo "<h1>hello</h1>
<div id='form'>
<a href='#' onclick='popup(\"" . addslashes(str_replace("\n", ' ', $formcode)) . "\"); return false;'>
click here</a>
</div>";
?>

---

Before edit:

Maybe you can do it differently.

Javascript functions:

function popup(id, params){
    var html = document.getElementById(id).innerHTML;

    if (params != undefined) {
        html = findAndReplaceStrings(html, params);
    }

    var child1 = window.open ("about:blank");
    child1.document.write(html);
    child1.document.close();
}

function findAndReplaceStrings(text, json) {
    for (var x in json) { 
        text = text.replace(x, json[x]);
    }
    return text;
}

HTML hidden code:

<div style="display:none;" id="process">
<form action="process.php" method="post" enctype="multipart/form-data ">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"/> 
<br />
<input id="submit" type="submit" name="submit" value="Submit" onclick="setTimeout(function() { sendInfo('{param1}', '{param2}'); } ), 1250);" />
</form>
</div>

HTML link with json:

<a href="#" onclick="popup('process', {'{param1}':'<h1>Well</h1>', '{param2}':'<h2>Done</h2>'}); return false;">
click here</a>

Answer 3

You must escape the carriage returns (\n) by doing

$formcode = str_replace("\n", "\\n", $formcode);

You also have to escape the quotes

$formcode = str_replace("'", "\\'", $formcode);

You can combines those two lines into a single one:

$formcode = str_replace(array("\n", "'"), array("\\n", "\\'"), $formcode);

Answer 4

The submit button has an extra ) which closes the setTimeout function too early. The specific spot is inside:

} ),1250

you should also probably think about using single quotes inside the php string to make it all easier to read. And because you're using double quotes you don't have to break out of the string to insert the content of the variables $blah and $test.

something like this should work:

$formcode = "...
<input type='submit' name='submit' value='Submit' 
onclick='setTimeout(function() { sendInfo(\"$blah\", \"$test\"); },1250);' />
...

";

EDIT:

looks like it's closing the onclick too early now. Matching these as the start and end quotes:

onclick=\"setTimeout(function() { sendInfo(\"

I changed the sendInfo line to the following, ran it and looks like it's working. The single quote is escaped here so it doesn't prematurely close the call to popup().

sendInfo(\'".$blah."\', \'".$test."\');