When setting onclick using Javascript, the onclick code is running
<p>When clicking on a Div, it should change the text in the div (which is done using innerHTML) but I also want to change the onclick function of the div</p>

<p>Here is my JS code</p>

<pre><code>document.getElementById('select_image').onclick = document.upload.submit();
</code></pre>

<p>When clicking on the div, instead of clicking on a hide file upload div (which  it did before) it's submitting the form straight away</p>

<p>If I press back on the browser, it shows the div with the updated text</p>

<p>Thanks</p>

<p>Edit: doesn't look very clear</p>

<p>I have a div (select_image) and when clicking on it, it uses JS (.click) on a hidden input file element so you can select a file.</p>

<p>This div is using onclick="function()" to run a function that changes the text in that div, and I also want it to change the onclick event to actually submit the form this time (as opposed to clicking on the hidden file input) when a file has been selected.</p>

<p>I'm using an onchange="" event to run the following JS function on the file input</p>

<pre><code>function selected_image(image) {
    document.getElementById('select_image').innerHTML = 'click here to upload &lt;span id="selected"&gt;' + image.replace('C:\\fakepath\\', '') + '&lt;/span&gt;';
    document.getElementById('select_image').onclick = document.upload.submit();
}

&lt;div id="select_image" onclick="document.forms['upload'].elements['image'].click();"&gt;click here to select your image&lt;/div&gt;
</code></pre>

<p>Thanks</p>
