I am working on a functionality where I have a text_field that contains the URL of an image. The goal is to load this URL into an img tag and update the preview image when the user changes the URL in the text field.
Below is the relevant erb code for the view:
<div class="control-group">
<%= f.label :image, :class => 'control-label' %>
<div class="controls">
<%= f.text_field :image_url, :class => 'text_field', id: "image_url" %>
</div>
</div>
Preview: <img id="preview" src="">
Additionally, here is the embedded JavaScript code:
<script type="text/javascript">
document.observe('dom:loaded', function() {
$('preview').src = $('image_url').text
$('image_url').bind("focusout",function(){
$('preview').src = this.text
)}
});
However, upon loading the page, the preview image does not display anything and the source URL doesn't change as expected.