如何使用 jquery 传递特定的 <li> 值 - How can I pass particular <li> value with jquery

我有一个像

HTML- 索引.php

<form name="myform" action="data.php">
  <ul>
    <li onclick=myform.submit();>
      <input type="hidden" name="soc" value="1">google</li>
    <li onclick=myform.submit();>
      <input type="hidden" name="soc" value="2">facebook</li>
    <li onclick=myform.submit();>
      <input type="hidden" name="soc" value="3">twitter</li>
    <li onclick=myform.submit();>
      <input type="hidden" name="soc" value="4">none</li>
  </ul>
</form>

数据.php

<?php
$val = &_POST["soc"];
echo $val;
?>

在这种情况下，如果我单击其中任何一个，它只会传递最后一个<li>值 4。我只想在单击的位置获取此<li>值。
我的意思是说，如果我点击Facebook，那么我可以在data.php文件中获得值"2"。

而不是form只使用带有url参数a标签，这可能是更好和最简单的方法

.HTML：

<ul>
  <li> <a href="data.php?soc=1">google</a>
  </li>
  <li> <a href="data.php?soc=2">google</a>
  </li>
  <li> <a href="data.php?soc=3">google</a>
  </li>
  <li> <a href="data.php?soc=4">google</a>
  </li>
</ul>

.PHP：

<?php
$val = $_GET["soc"];
echo $val;
?>

不能使用多个具有相同名称的隐藏输入，并期望它们表现为独立的表单元素。提交表单时，所有隐藏的输入都以 soc=1&soc=2&soc=3&soc=4 的形式发送使用 name="soc" 保留单个隐藏输入，并在每个 onclick 属性中更改回调，如下所示：

document.forms.myform.soc=1;document.formsmyform.submit();

将数字更改为每个 li 元素的相应值

有很多

方法可以做到这一点

为每个li创建不同的表单。

<ul>
    <form name="myform1" action="data.php">  
        <li onclick=myform1.submit();><input type="hidden" name="soc" value="1">google</li>
    </form>
    <form name="myform2" action="data.php">  
        <li onclick=myform2.submit();><input type="hidden" name="soc" value="2">facebook</li>
    </form>
</ul>

使用 jquery 将值替换为单击事件

<form name="myform" action="data.php">
  <ul>
    <li id="1">google</li>
    <li id="2">facebook</li>
    <li id="3">twitter</li>
    <li id="4">none</li>
  <input type="hidden" name="custom" value="" id="myid" />
  </ul>
</form>

<script>
$(document).ready(function(){
    $(li).click(function(){
        var val = $(this).attr(id);
        $("#myid").val(val);
        myform.submit();
        return true;
    })
})
</script>

将url中的值作为查询字符串传递。

在 ajax 中，您应该使用 $val = $_POST["soc"] 。您可以将 ajax 请求用作

.JS

$(function() {
  $('.opt').on('click', function(){
    var val = $(this).val();
    $.ajax({
      url: "data.php",
      type: 'POST',
      data: {soc: val},
      success: function() {
        console.log('success');
      }
    })
  })
})

.HTML

<ul>
<li class="opt"><input type="hidden" name="soc" value="1">google</li>
<li class="opt"><input type="hidden" name="soc" value="2">facebook</li>
<li class="opt"><input type="hidden" name="soc" value="3">twitter</li>
<li class="opt"><input type="hidden" name="soc" value="4">none</li>
</ul>

.PHP：

<?php
$val = $_POST["soc"];
echo $val;
?>

如果你正在寻找一个纯粹的jQuery/JS解决方案

.HTML

<form name="myform" action="data.php">
  <ul>
    <li onclick="submitMyForm(1)">
      google
    </li>
    <li onclick="submitMyForm(2)">
      facebook
    </li>
    <li onclick="submitMyForm(3)">
      twitter
    </li>
    <li onclick="submitMyForm(4)">
        none
    </li>
  </ul>
</form>

.JS

function submitMyForm(val) {
    $.ajax({
      url: "data.php",
      type: 'POST',
      data: {soc: val},
      success: function() {
        console.log('success');
      }
   })
}

JSFiddle

https://jsfiddle.net/p0cf8c0L/