如何填写值=从网页的另一部分的形式部分 - How to Fill value= section of form from another section of webpage?

现在我有一个小的无序列表。

   <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解决方案是站不住脚的。

应该可以。

我用了.val()。参考:jQuery文档

将id s加入输入:

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

看起来你在这里使用的是经典的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>'的形式，而不是实际的列表值。此外，我不知道你在哪里发送你的表单，所以最后一行在脚本标签将自动发送表单。

您不需要添加id s或name s到元素中，您只需要一个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>