Question

我尝试使用Javascript添加/删除下拉选项。目前一切正常，除非您从下拉列表中选择要删除的选项。单击删除按钮删除html，但不删除sql条目。

编辑：我编辑了这个对我现在有用的东西，也许可以节省别人的时间。 CodeGodie的答案最终是正确的，但我不得不简化PHP，我的配置文件的一些问题搞砸了我。这只是为您提供了一个文本输入来添加选择选项和一个按钮来删除所选的选项。仍然需要清理，显然这个想法是让经过身份验证的管理员拥有这种能力，而不是自由世界。谢谢你的帮助！

这是我的代码：

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<?php include 'config.php'; ?>
<script type="text/javascript">
$(document).ready(function() {

    //##### send add record Ajax request to response.php #########
    $("#FormSubmit").click(function (e) {
            e.preventDefault();
            var txt=document.getElementById("contentText").value;  //inputID

            var newcontent = document.createElement('option'); //creates option
             newcontent.innerHTML = txt;
             document.getElementById("choice").appendChild(newcontent); //choice is select ID

            if($("#contentText").val()==='')
            $("#FormSubmit").hide(); //hide submit button
            var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
            jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "response.php", //Where to make Ajax calls
            dataType:"text", // Data type, HTML, json etc.
            data:myData, //Form variables
            success:function(response){
                $("#contentText").val(''); //empty text field on successful
            }
            });
    });

    //##### Send delete Ajax request to response.php #########
     window.onload = function () {
    document.getElementById("btn1").onclick = function () {
        var myData = 'choice='+ $("#choice option:selected").val(); 
        jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "response.php", //Where to make Ajax calls
        dataType:"text", // Data type, HTML, json etc.
        data:myData, //Form variables
        });
       $("#choice option:selected").remove();
        }
    };
});
</script>
<form>
<select id="choice">
<?php
//MySQL query
$stmt = $db->query("SELECT id,content FROM add_delete_record");
//get all records from add_delete_record table
while($row = $stmt->fetch()){
$content = $row['content'];

echo '<option>' . $content . '</option>' ;} ?>
</select>
    <input type="button" id="btn1" class="btn btn-default" value="Delete" />
    <div class="form_style">
    <input type="text" name="content_txt" id="contentText" cols="45" rows="5" placeholder="Enter some text"></textarea>
    <button id="FormSubmit">Add record</button>
    </div>
</div>
</form>

和response.php ..

<?php
//include db configuration file
include 'config.php';
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0) 
{   //check $_POST["content_txt"] is not empty

    //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.
    $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH); 

    // Insert sanitize string in record
    $insert_row = $db->query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')");

}
if(isset($_POST["choice"])){

    $contentToDelete = $_POST["choice"]; 

    $delete_row = $db->query("DELETE FROM add_delete_record WHERE content='$contentToDelete'");

}
?>

Answer 1

问题在于这一行：

var myData = 'id='+ $("#id").val(); //build a post data structure

没有ID为＆＃34; id＆＃34;的元素。我相信你想要的是所选的价值。在这种情况下将是：

var myData = 'id='+ $("#choice").val(); //build a post data structure

此外，您的代码可以更清洁。由于您使用的是jQuery，我会在大多数代码中使用jQuery，并将重复的元素定义为变量，以便您可以重用它们而无需再次重新定义它们。

从sql中选择删除选项删除

1 个答案: