我想单击一个 <li> 并获取 id 以通过 POST 将其插入数据库，可以吗?

I want to click on a <li> and get the id to insert it into database via POST, is it possible?

本文关键字：POST 插入 数据库 id 单击 一个 li 获取      更新时间：2023-10-08
<form method="POST">
Something: <input type="text" name="input" />
    <ul>
          <li id="data1">Data 1</li>
          <li id="data1">Data 2</li>
          <li id="data1">Data 3</li>
        </ul>
    <input type="submit" value="submit" name="submit" />
  </form>

如果可能的话，我想通过 php 插入该数据。
这是 php 中的代码


if(isset($_POST['submit'])){ $db=mysqli_connect("host", "user", "pass", "databasename"); $text=$_POST['input']; $data=???????; $insert=mysqli_query($db, "INSERT INTO tablename (text, data) VALUES ('".$text."', '".$data."'); }

-------更新------

<li id="data1">Data 1</li>
<li id="data2">Data 2</li>
<li id="data3">Data 3</li>

$("ul").on("click", "li", function() {
     data = this.id;
     text = $('input:textbox').val();
     $.ajax({
         type="post",
         url = "save.php",
         data = {"text":text, "data":data},
         success = function() {
          }
      });
});

保存.php会是这样的

 $db=mysqli_connect("host", "user", "pass", "databasename");
    $text=$_POST['text']; 
    $data=$_POST['data']; 
    $insert=mysqli_query($db, "INSERT INTO tablename  (text,data)                          
    VALUES        
    ('".$text."', '".$data."')");

使用 querySelectorAll 查找所有li元素。使用loop将click事件绑定到这些元素。

将输入元素保留hidden DOM，并在值更改时更新其值。

var liElems = document.querySelectorAll('ul li');
[].forEach.call(liElems, function(elem) {
  elem.addEventListener('click', function() {
    document.querySelector("[name='data']").value = this.id;
    document.dataForm.submit();
  });
})
<form method="POST" name='dataForm'>
  Something:
  <input type="text" name="input" />
  <ul>
    <li id="data1">Data 1</li>
    <li id="data2">Data 2</li>
    <li id="data3">Data 3</li>
  </ul>
  <input type="hidden" name='data'>
  <input type="submit" value="submit" />
</form>

在这里摆弄

与其使用"ul"，不如使用"select"，因为此元素实现了发布选定值的想法。

<form method="post" action="save.php">
    Something: <input type="text" name="input" />
    <select name="data">
        <option value="data1">Data 1</option>
        <option value="data2">Data 2</option>
        <option value="data3">Data 3</option>
    </select>
    <input type="submit" value="submit" name="submit" />
</form>

格莱兹

编辑：另一种方法是使用 ajax 向服务器发送自定义请求。以这个为例：

<div class="myForm">
    Something: <input type="text" name="input" id="input" />
    <ul class="myList">
        <li data-id="data1">Data 1</li>
        <li data-id="data2">Data 2</li>
        <li data-id="data3">Data 3</li>
    </ul>
    <input type="button" value="submit" id="send" />
</div>
<script>
    $(document).ready(function(){
        $("ul.myList li").click(function(){
            //remove all selected classes
            $.each("ul.myList li", function(){
                $(this).removeClass("active");
            });
            //Set current as active
            $(this).addClass("active");
        });
        $("#send").click(function(){
            $.ajax({
                url: "PathToFile.php",
                method: "POST",
                data: {text: $("#input").val(), data: $("ul.myList li.active").attr("data-id"),
                success: function(result){
                    alert(result);
                }
            });
        });
    });
</script>
相关文章：