logo标签列表

jQuery获取动态值并填充隐藏表单字段

javascriptjqueryhtml
3
我有一系列的div，每个div都有一个基于数据库结果的动态id名称。
每个div中都有几个隐藏的输入文本字段，它们都具有相同的名称和id。
用户点击一个href，这是从数据库动态生成的，以启动colorbox。例如()。
在打开的div上有一个按钮。当用户点击此按钮时，它会提交一个表单。
现在它只提交字段第一个实例的值（例如黄色，digital-world，数字革命）。
它应该提交活动url的值。例如，如果用户点击“>”，则应提交蓝色、抽象、抽象面板的值，而不是黄色、digital-world、数字革命的值。
此外，colorbox上有滚动按钮，例如用户可以单击下一个按钮来加载下一组值。即，如果他在()上，并单击下一个按钮，则突然进入()，因此如果他在这里单击按钮，则应提交正确的值，即蓝色、抽象、抽象面板。
这有意义吗？
让我展示一下...
<div class="doneit">
<div style="float:left;"><a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></a></div>
div class="doit"><a href="http://www.url.com/folder/212.htm" class="playvideo"></a></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>          

<div class="doneit">
<div style="float:left;"><a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></a></div>
<div class="doit"><a href="http://www.url.com/folder/349.htm" class="playvideo"></a></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">  
</div>          

<div class="doneit">
<div style="float:left;"><a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></a></div>
<div class="doit"><a href="http://www.url.com/folder/353.htm" class="playvideo"></a></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">  
</div>          

<div class="doneit">
<div style="float:left;"><a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></a></div>
<div class="doit"><a href="http://www.url.com/folder/129.htm" class="playvideo"></a></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">       
</div>

<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">

<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>

<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">

<button class="addtobutton addtocart" onclick="submitMyForm();"></button>

</form>

</div></div>
</div>

感谢所有的帮助！
抱歉...一些解释代码在文本中丢失了...它应该提交当前活动的URL的值。例如，如果用户单击包含的div，则应该提交Blue、abstract和Abstract Panel的值，而不是我的代码中正在执行的Yellow、digital-world和Digital Revolution的值。 - Dave
1个回答
2
你有多个元素共享相同的ID，这是错误的，可能会导致很多问题。
其中一个问题就是你现在面临的问题。
因为你没有为元素设置唯一的ID，代码只会考虑第一个匹配项（在你的情况下是“黄色的”）。
要解决这个问题？让我们尽可能多地使用jQuery，使它变得简单。另外，让我们修正一下HTML标记，请参考注释。
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
            <img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/212.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Yellow" />
    <input type="hidden" name="Product_Dir_1" value="digital-world" />
    <input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
            <img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/349.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Blue" />
    <input type="hidden" name="Product_Dir_1" value="abstract" />
    <input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
            <img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/353.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Red" />
    <input type="hidden" name="Product_Dir_1" value="abstract" />
    <input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>

<div class="doneit">
    <div style="float:left;">
        <a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
            <img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
        </a>
    </div>
    <div class="doit">
        <a href="http://www.url.com/folder/129.htm" class="playvideo"></a>
    </div>
    <div style="height:70px;"></div>
    <input type="hidden" name="Product_Vid_1" value="Purple" />
    <input type="hidden" name="Product_Dir_1" value="electric-effect" />
    <input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>

<div style="display:none">
    <div id="container">
        <div id="video"></div>
        <div id="doesit">
            <form name="myform" action="/thisurl.asp" method="post">
                <input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
                <input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
                <input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />

                <!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->

                <button class="addtobutton addtocart" type="submit"></button>
            </form>
        </div>
    </div>
</div>

jQuery（JavaScript）：

// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.

var setFormValues = function(div) {

    // Getting the inputs values. The ones within the clicked div.
    // We look for the inputs which name starts with Product_...
    // Let's use .prop() instead of .val() because IE sometimes doesn's like it.

    var div = $(div);
    var productVid = $("input[name^='Product_Vid_']", div).prop("value");
    var productDir = $("input[name^='Product_Dir_']", div).prop("value");
    var productName = $("input[name^='Product_Name_']", div).prop("value");

    // Setting the form inputs values.

    $("#Product_color_16").prop("value", productVid);
    $("#Product_Dir_16").prop("value", productDir);
    $("#Product_Name_16").prop("value", productName);     
}

$(function () {

    // When the user clicks on one of the divs.

    $(".doneit").on("click", function () {
        setFormValues($(this));    

        return true;        
    });   

    // When the user clicks the cart button, on the video window.

    $(".addtocart").on("click", function() {

        // Here we need a bit of native Javascript.

        var videoPlaying = document.getElementById("video_video");

        if (typeof videoPlaying != "undefined") {
           var videoSource = videoPlaying.currentSrc;

           if (typeof videoSource != "undefined") {

               var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];

               // Check which div has an image which src 
               // matches the video filename.

               var image = $(document).find("img[src*='" + videoSourceFilename + "']");

               if (typeof image != "undefined") {
                   var divContainer = $(image).parent().parent().parent();

                   if (typeof divContainer != "undefined")
                       setFormValues($(divContainer));
               }
           }
        }

        return true;
    });     
});
尝试将类向上移动到父类，但仍无法提交。Melancia - Dave
当然可以。 :) 让我们再试一次。 - emerson.marini
你能在你的代码中看到 video_video id 的 video 元素吗？我只需要知道这个以便继续。 - emerson.marini
我其实早有预料。现在需要采用不同的方法。你需要检查答案并切换到另一个脚本。在你的页面上找到它并进行更改并不难。然后，也要更改我们一直在努力解决的那个脚本。 - emerson.marini
刚才那里只是一个打字错误。我输入了“/com”而不是“com/”。请再试一次... - emerson.marini
显示剩余68条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接