Javascript working fine in HTML but not in PHP Heredoc - php

Question

I'm a major noob to php and I might be biting off more than I can chew here. That being said, I'm facing the following problem: I've created a form using HTML that dynamically generates additional rows for responses using javascript with the click of a button. It works fine as a stand-alone html document, however, when I try to use heredoc to put it into a php function, the buttons don't add any rows. See my code below.
Thanks in advance for any insight!
function upsmart_create_profile_form() {
global $wpdb;
$data = $wpdb->get_row($wpdb->prepare("SELECT * FROM upsmart_profile WHERE wordpress_id=%d",get_current_user_id()),ARRAY_A);
$media_url = admin_url("media-upload.php?type=image&TB_iframe=true");
$out = <<<EOHTML
<form method='post' enctype='multipart/form-data'>
<h4>Branding</h4>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#logo_upload").click(function() {
tb_show("", "{$media_url}");
window.send_to_editor = function(html) {
imgurl = jQuery("img",html).attr("src");
jQuery("#logo_field").val(imgurl);
tb_remove();
}
return false;
});
jQuery("#media1_upload").click(function() {
tb_show("", "{$media_url}");
window.send_to_editor = function(html) {
imgurl = jQuery("img",html).attr("src");
jQuery("#media1_field").val(imgurl);
tb_remove();
}
return false;
});
jQuery("#media2_upload").click(function() {
tb_show("", "{$media_url}");
window.send_to_editor = function(html) {
imgurl = jQuery("img",html).attr("src");
jQuery("#media2_field").val(imgurl);
tb_remove();
}
return false;
});
});
</script>
<table>
<tr><th>Logo</th><td><input type='text' id="logo_field" value="{$data['logo']}" name='logo'/>
<input type='button' id='logo_upload' value='Open Media Library'/></tr>
<tr><td colspan='2'>Sometext—moretext.</td></tr>
<tr><th><br/>Media</th></tr>
<tr><td colspan='2'>Now upload the "coolest" piece of media you have. This will be used on the top fold of your generated site to draw users in.
<br/>
<input type='text' id="media1_field" value="{$data['media1']}" name='media1'/>
<input type='button' id='media1_upload' value='Open Media Library'/>
<tr><td colspan='2'>While you're at it, give us the second coolest piece of media you have as well. Who knows when you might need it?
<br/>
<input type='text' id="media2_field" value="{$data['media2']}" name='media2'/>
<input type='button' id='media2_upload' value='Open Media Library'/>
</td></tr>
<tr><td colspan='2'><br/>
<ul><li>The bigger the better—don't worry, we'll scale these down for you.</li><li>The uploaded files should have solid backgrounds.</li></ul><br/></td></tr>
</table>
<h4>About</h4>
<table>
<tr><th colspan='2'>Mission Statement</th></tr>
<tr><td colspan='2'>Your mission statement should include ...</td></tr>
<tr><td colspan='2'>
EOHTML;
$out .= upsmart_get_editor($data['mission'],'mission');
$out .= <<<EOHTML
</td></tr>
<tr><th colspan='2'>"About Us"</th></tr>
<tr><td colspan='2'>A good "About Us" writeup should answer the following questions: <ul><li>Who are you?</li><li>What are you doing?</li><li>Why is what you're doing awesome?</li></ul></td></tr>
<tr><td colspan='2'>
EOHTML;
$out .= upsmart_get_editor($data['about'],'about');
$out .= <<<EOHTML
</td></tr>
<tr><th colspan='2'>Company History</th></tr>
<tr><td colspan='2'>Let us know your background. Some things to think about: ...</td></tr>
<tr><td colspan='2'>
EOHTML;
$out .= upsmart_get_editor($data['history'],'history');
$out .= <<<EOHTML
</td></tr>
</table>
</table>
<h3>Company Milestones</h3>
<p>Below, share any milestone achievements of your company. These could be first-hires, funding that you've received, revenue achievements, or anything else.</p>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<TD>
<select name="month[]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="day[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year[]">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
</select>
</TD>
<TD> <INPUT type="text" name="txt[]"/> </TD>
</TR>
<tr><th colspan='2'><input type='submit' value='Save'/></th></tr>
</TABLE>
</form>
EOHTML;
return $out;
}

Answer 1

When using HEREDOC, make sure your HEREDOC line ending has NO spaces in front of it.
Example:
<?php
$myStr = <<< ENDL
Hello, World!
ENDL; // No white space in front of me!
?>

Answer 2

Alright, so I figured it out with some of Spudley's advice. I was running into a situation where the html was rendering && in the javascript as && This is due to a quirk of wordpress and its use of XHTML as described here. I tried using their suggestions but none of them did it for me. Finally I just created a separate javascript file and referenced it in the php heredoc.