更新隱藏字段 - jquery

Question

好的，試着正確地解釋這一點，因爲我認爲這就是爲什麼一個答案逃避我和一些用戶給我的否定答覆，因爲他們認爲我沒有嘗試過研究解決這個問題。

我有一個頁面，用戶在幻燈片查看器中呈現圖像。幻燈片查看器中的每個項目都在LI元素內。

當用戶選擇幻燈片，然後提交表單時，我需要腳本來更新隱藏字段，以便我們可以將他們選擇的幻燈片放入表單中。無論是通過更新onclick還是表單提交時，都不重要。隱藏字段包含當時顯示的圖像的URL。

所以，我目前擁有的代碼是：

<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> 

<!-- this is the slideviewer code --> 
<script src="/js/jquery.slideviewer.1.2.js" type="text/javascript"></script> 

<!-- this is what I have been trying to update the hidden field --> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#wl_add").submit(function (event) { /* form name and id = wl_add */ 
$('input[name="item_pic_url"]').val($('#mygalthree img').attr('src')); 
}); 
}); 
</script> 

<!-- the div containing the slide viewer --> 
<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>'; 

} 

// the hidden field to be updated - i am presuming needs to be after the loop which feeds the LI elements 
echo '<input type="hidden" name="item_pic_url" value="'.$image.'" />'; 

?> 

</ul></div> 

或者，它會更容易每次選擇一個幻燈片的時間來更新隱藏字段？下面你可以看到代碼爲slideviewer - 我本來以爲我也許能增加

$（ '輸入[名稱= 「item_pic_url」]'）VAL（$（ '＃mygalthree IMG'） .attr（ 'SRC'））;

當用戶點擊？但是我找不到要添加這個的地方，而且我已經嘗試過幾乎每一行！ Slideviewer code：

jQuery(function(){ 
    jQuery("div.svw").prepend("<img src='/images/spinner.gif' class='ldrgif' alt='loading...'/ >"); 
}); 
var j = 0; 
var quantofamo = 0; 
jQuery.fn.slideView = function(settings) { 
    settings = jQuery.extend({ 
     easeFunc: "easeInOutExpo", 
     easeTime: 750, 
     uiBefore: false, 
     toolTip: false, 
     ttOpacity: 0.9 
    }, settings); 
    return this.each(function(){ 
     var container = jQuery(this); 
     container.find("img.ldrgif").remove(); 
     container.removeClass("svw").addClass("stripViewer");  
     var pictWidth = container.find("img").width(); 
     var pictHeight = container.find("img").height(); 
     var pictEls = container.find("li").size(); 
     var stripViewerWidth = pictWidth*pictEls; 
     container.find("ul").css("width" , stripViewerWidth); 
     container.css("width" , pictWidth); 
     container.css("height" , pictHeight); 
     container.each(function(i) { 
    (!settings.uiBefore) ? jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>") : jQuery(this).before("<div class='stripTransmitter' id='stripTransmitter" + (j) + "'><ul><\/ul><\/div>");    
     jQuery(this).find("li").each(function(n) { 
     jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"<\/a><\/li>");            
     }); 
     jQuery("div#stripTransmitter" + j + " a").each(function(z) { 
     jQuery(this).bind("click", function(){ 
     jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow! 
     var cnt = -(pictWidth*z); 
     container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc); 
     return false; 
     }); 
     }); 


     container.bind("click", function(e){ 
      var ui = (!settings.uiBefore) ? jQuery(this).next().find("a.current") : jQuery(this).prev().find("a.current"); 
      var bTotal = parseFloat(jQuery(this).css('borderLeftWidth').replace("px", "")) + parseFloat(jQuery(this).css('borderRightWidth').replace("px", "")); 
      var dOs = jQuery(this).offset(); 
      var zeroLeft = (bTotal/2 + pictWidth) - (e.pageX - dOs.left); 

      if(zeroLeft >= pictWidth/2) { 
       var uiprev = ui.parent().prev().find("a"); 
       (jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click");       
      } 
      else { 
       var uinext = ui.parent().next().find("a"); 
       (jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click"); 
      } 
     }); 


     jQuery("div#stripTransmitter" + j).css("width" , pictWidth); 
     jQuery("div#stripTransmitter" + j + " a:first").addClass("current"); 
     jQuery('body').append('<div class="tooltip" style="display:none;"><\/div>'); 


     if(settings.toolTip){ 
     var aref = jQuery("div#stripTransmitter" + j + " a"); 

     aref.live('mousemove', function(e) { 
     var att = jQuery(this).attr('title'); 
     posX=e.pageX+10; 
     posY=e.pageY+10; 
     jQuery('.tooltip').html(att).css({'position': 'absolute', 'top': posY+'px', 'left': posX+'px', 'display': 'block', 'opacity': settings.ttOpacity}); 
     }); 
     aref.live('mouseout', function() { 
     jQuery('.tooltip').hide(); 
     });    
     } 
     }); 
     j++; 
    }); 
}; 

Answer 1

OK，這已經讓我瘋狂，但現在問題解決了......在實際slideviewer代碼，當用戶選擇的圖像的數量，我添加了一個簡單的onclick寫的價值隱藏的領域。

jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#' onClick=\"document.wl_add.item_pic_url.value='" + jQuery(this).find("img").attr("src") + "'\" >"+(n+1)+"<\/a><\/li>"); 

感謝您的建議。

Answer 2

我會做的，而不是更新隱藏的領域，是分配每個圖像作爲一個單選按鈕的標籤。然後，當您提交表單時，它將提交該單選按鈕的值。您需要將單選按鈕定位在-9999或其他位置，以便實際的按鈕不顯示。

<label> 
    <img src="imagelocation.jpg" /> 
    <input type="radio" name="coolName" value="image_1" style="margin-left:-99999px;> 
</label> 

當點擊圖片時，會選擇該單選按鈕，該值將與表單一起提交。

Answer 3

我建議跟Josh V.K.一樣。但沒有這種可笑的定位黑客。

<label> 
    <img src="imagelocation.jpg" /> 
    <input type="radio" name="coolName" value="image_1" style="display: none;" /> 
</label>