Question

The following code should update a hidden field on form submit but it simply does not and I’m struggling as to know why?

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 changed the code as suggested, see below, but, still no joy – also tried img:first as suggested but no different

<script type="text/javascript">
  $(document).ready(function(){
        $( "#wl_add" ).submit( function ( event ) { /* form name wl_add */
          $( 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>

Answer 1

You should setup event handlers inside document.ready.

<script type="text/javascript">
$(function(){
     $( "#wl_add" ).submit( function ( event ) { /* form name wl_add */
     $( this ).find( "input[name='item_pic_url']" )
     .val( $( "#mygalthree img" ).attr( 'src' ) );

     } );
});
</script>

Otherwise, script will try to bind submit to form that does not yet exist, so you do not get submit handler bound and executed.