Question

<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."'); }

------- ------ UPDATE

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

Answer 1

$("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() {
          }
      });
});

save.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."')");

Answer 2

而不是使用“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>

Answer 3

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

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

＆＃13;

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();
  });
})

＆＃13;

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

＆＃13;

Fiddle here

我想点击<li>并获取id以通过POST将其插入数据库，是否可能？

3 个答案: