Question

所以，现在我有这个小的无序列表。

   <ul id="sortable2" class="connectedSortable">
        <li id="litem1" class="ui-state-highlight">A Comfortable Life</li>
        <li id="litem2" class="ui-state-highlight">An Exciting Life</li>
   </ul>

然后，我在表单中有一系列隐藏输入，用于将信息发送到下一页。

   <form action="Instrumental_Values1.php" method="POST"> 
    <input type="hidden" name="item1" value="<script getElementById('litem1').innerhtml();></script>"/> 
    <input type="hidden" name="item2" value="<script getElementById('litem2').innerhtml();></script>"/>
   </form>

我的问题是我尝试按ID获取列表项值并使它们等于隐藏输入中的“值”的代码不起作用。我需要传输这些列表项并使它们成为隐藏输入中的“值”。

基本上，下一页是一个只回显这些值的php文件，如下所示：

   <?php

   $val1=$_POST['item1'];
   $val2=$_POST['item2'];

   echo $val1.' '.$val2;
   ?>

有谁知道我做错了什么或有一个例子可以分享？我必须使用PHP来做到这一点，Javascript解决方案是不可行的。

Answer 1

这应该有效。

我使用过.val()。参考：jQuery Documentation

将id添加到输入中：

<form action="Instrumental_Values1.php" method="POST">
  <input type="hidden" id="item1" name="item1" value="" />
  <input type="hidden" id="item2" name="item2" value="" />
</form>

将此脚本添加到您的页面：

<script>
  $("#item1").val($("#litem1").text());
  $("#item2").val($("#litem2").text());
</script>

Answer 2

看起来你在这里使用的是经典的javascript，所以遵循这种风格可能会有效：

<ul id="sortable2" class="connectedSortable">
  <li id="litem1" class="ui-state-highlight">A Comfortable Life</li>
  <li id="litem2" class="ui-state-highlight">An Exciting Life</li>
</ul>

<form id="theForm" action="Instrumental_Values1.php" method="POST">
  <input type="hidden" id="formItem1" name="item1" value="" />
  <input type="hidden" id="formItem2" name="item2" value="" />
</form>


<script>
//Set Form Value 1
var formItem1 = document.getElementById("formItem1");
formItem1.value = document.getElementById("litem1").innerHTML;

//Set Form Value 2
var formItem2 = document.getElementById("formItem2");
formItem2.value = document.getElementById("litem2").innerHTML;

//Auto submit the form
document.getElementById("theForm").submit();
</script>

这里的想法是在脚本标记中设置表单值，而不是尝试内联JavaScript。从原始代码看，表单中的值看起来像是'<script getElementById('litem1').innerhtml();></script>'形式的字符串，而不是实际的列表值。另外，我不知道您在何处发送表单，因此脚本标记中的最后一行将自动发送表单。

Answer 3

您不需要将id或name添加到元素中，您只需要一个ul。该脚本将为您完成此操作。

工作原理
它只是在订单更改时将li项的内容写入数组，然后将内容写入隐藏的输入。

<body>
    <ul id="sortable" class="connectedSortable">
        <li class="ui-state-highlight">A Comfortable Life</li>
        <li class="ui-state-highlight">An Exciting Life</li>
        <li class="ui-state-highlight">A Sense of Accomplishment</li>
    </ul>
    <form id="sortable-form" action="test.php" method="POST">
        <input type="hidden" value="" />
        <input type="hidden" value="" />
        <input type="hidden" value="" />
        <br />
        <input type = "submit" value = "Next Page">
    </form>
</html>
<script>
$(document).ready(function() {

        // ADD IDS TO LI
        var litem_id = 1;
        $("#sortable li").each(function(){

            $(this).attr('id', "litem" + litem_id);
            litem_id++;
        });

        // ADD IDS AND NAMES TO INPUTS
        var item_id = 1;
        $("#sortable-form input[type='hidden']").each(function(){
            $(this).attr('id', "item" + item_id);
            $(this).attr('name', "item" + item_id);
            item_id++;
        });


        $( "#sortable" ).sortable({
            connectWith: "#shopping-cart"
        });

         $( "#sortable" ).sortable({
           stop: function( event, ui ) {

               var values = [];

               $("#sortable li").each(function(){

                   // SAVE ITEMS IN ARRAY
                   values.push($(this).text());

               });

               var i = 0;

               $("#sortable-form input[type='hidden']").each(function(){

                  // WRITE ITEMS TO INPUTS
                  $(this).val( $(values).get(i) );
                  i++;

               });

           }
         });

});
</script>

如何从网页的另一部分填写值=表格部分？

3 个答案: