想要使用 JQUERY 来发布单个选定的表单值

Posted 2023-05-08

【中文标题】想要使用 JQUERY 来发布单个选定的表单值

【英文标题】：Want to use JQUERY to cause post of a single selected form value

【发布时间】：2020-12-24 00:31:10

【问题描述】：

我正在生成一个键/值数组并在其中滚动以在表单中生成一组“a”标签。 我希望 JQuery 检测单击了哪个“a”标签，并提交表单，以便发布 KEY，而不是值。 JQuery 函数似乎在我构建的 test.php 文件中不起作用。

<?php if(isset($_GET['id'])) 
    echo '<h2>URL parameter passed by $_GET</h2>' ;
    echo '<pre>' ;
        echo print_r($_GET) ;
    echo '</pre>' ; 
 elseif(isset($_POST['id'])) 
    echo '<h2>URL parameter passed by $_POST</h2>' ;
    echo '<pre>' ;
        echo print_r($_POST) ;
    echo '</pre>' ; 


?>
<style>
    table 
        width:50%;
    
    td 
        width:25%;
        border:1pt solid black;
        margin:0px;
    
</style>
<?php 
    // Build Indexed Array
    $fruit[0] = 'Orange' ;
    $fruit[1] = 'Apple' ;
    $fruit[2] = 'Banana' ;

    echo '<pre>' ;
        echo print_r($fruit) ;
    echo '</pre>' ; 

    // Form definition
    echo '<form name="groupform" id="groupform" action="test.php" method="post">' ;
    echo '<table>' ;
    echo '<tr><td>Array values</td><td>Simple A tag</td><td>Regular submit button</td><td>A tag with class submit</td></tr>' ;
    for($key = 0; $key < count($fruit); $key++) 
      echo '<tr>' ;
      // Array Values
      echo '<td>Index is ' . $key . ', value is ' . $fruit[$key] . '</td>' ;
      // Simple A tag
      echo '<td><a href="?id=' . $key . '">' . $fruit[$key] . '</a></td>' ;
      // Regular submit button
      echo '<td><input type="submit" name="id" id="id" value="' . $fruit[$key] . '"></td>' ;
      // A tag with class submit
      echo '<td><a href="" class="submit" name="id" id="id" value="' . $key . '">' . $fruit[$key] . '</a></td>' ;
      echo '</tr>' ;
    
    echo '<tr><td></td><td>Functions correctly, but don&apos;t want to use a URL parameter to send the key</td><td>Can&apos;t get this to post the key instead of the value</td><td>Ideally want to style it as an a tag, but post the key</td></tr>' ;
    echo '</table>' ;
    echo '</form>' ;
 ?>
<script src="/scripts/jquery-3.3.1.js"></script>
<script>
  $(function()
    // when clicking the submit button
    $('.submit').click(function()
        // Get the value of the clicked a tag
        var usethisID = $(this).val();
        alert(usethisID);
        // submit the form
        // BUT POST the value of usethisID as id
        $('#groupform').submit();
        );
    );
</script>

【问题讨论】：

你没有在这个 sn-p 中包含 jQuery 库，并且$ 不会被识别为对 jQuery 的引用，除非你明确设置它。

谢谢丹，菜鸟错误！我已经在 J​​Query 函数之前添加了它，但这似乎并没有解决问题。我认为问题出在函数本身 - 这肯定是说“如果用户点击一个带有类提交的元素，然后提交表单。但它不会'读取'实际点击的 a 标签的值并制作它是表单提交的那个。我在正确的区域打猎吗？

抱歉，它现在正在将一个值读入 usethisID，但它看起来是空的，我还没有指示 JQuery 将此值作为帖子的一部分发送。

【参考方案1】：

var usethisID = $(this).attr("value");

小心，在 DOM 中，不能有具有相同 'id' 的标签！！！ 每个 id='' 必须有一个唯一的值！ https://developer.mozilla.org/en-US/docs/Web/API/Element/id

所以我建议用 $key 来构造每个'id'：id_XXXX

echo '<td><a href="" class="submit" name="id" id="id_'.$key.'" value="' . $key . '">' . $fruit[$key] . '</a></td>' ;

在 jQuery 中，您从 id 中提取 $key ：

<script>
  $(function()
    // when clicking the submit button
    $('.submit').click(function()
        // Get the value of the clicked a tag
        var index = $(this).attr("id");
        var usethisID = index.substring(index.indexOf("_")+1 );

        alert(usethisID);

        // submit the form
        // BUT POST the value of usethisID as id
        $('#groupform').submit();
        );
    );
</script>

很好的延续。

_泰迪_

【讨论】：

谢谢泰迪。效果很好，useThisID 现在肯定设置正确。我的函数仍然没有正确发布值，但我会解决这个问题......