Question

I have script which allows the user to choose an image and write something about it…they choose the image from a JQuery slideviewer.

Now, choosing the image is easy..but how can I take the chosen image with the other form data? Each image is currently in a LI element

Code snippet:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/js/jquery.slideviewer.1.2.js" type="text/javascript"></script>

UPDATE I have now added this as suggested below but still not working:

<script type="text/javascript">
$( "#wl_add" ).submit( function ( event ) {

$( this ).find( "input[name='item_pic_url']" )
.val( $( "#mygalthree img" ).attr( 'src' ) );

} );
</script>

<div id="mygalthree" class="svw"><ul>
<?PHP

foreach($html->find('img') as $e){ // from simple_html_dom

$image = $e->src;

echo '<li><img src="'.$image.'" width=300 alt="" /></li>';
echo '<input type="hidden" name="item_pic_url" value="'.$image.'" />';

?>

</ul></div>

The hidden field in there now currently stores the last image added to the UL

Is there someoway to make a hidden field dynamic and then be changed depending on the image chosen – ideally i need the img src in the hidden field

Answer 1

1. Add another hidden field, current_item_url or whatever you want to call it.

2. Add a submit listener for the form.

3. In the submit listener, copy the src of the current image to the hidden field.

E.g. something like:

$( "#whatever-form" ).submit( function ( event ) {

  $( this ).find( "input[name='current_item_url']" )
    .val( $( "#mygalthree img" ).attr( 'src' ) );

} );

Alternatively, if the slideviewer fires an event or provides a callback you can hook into, you could update the value of the hidden field when the slide changes if you want.