Question

我有一个下拉列表，通过<select>，由javascript代码生成，该代码也来自我的数据库：

function dirfunc(){

  var dirdiv = document.getElementById("dirdiv");
  var ahref = document.getElementById("href");
  var directidarr = new Array();
  var directorarr = new Array();

  <?php

    include("../conn.php");
    if($stmt = $con->prepare("SELECT directorid,directorname FROM directortb")){
      $stmt->execute();
      $stmt->bind_result($directorid,$directorname);
      $counter = 0;
      while($stmt->fetch()){
        ?>
          directidarr[<?php echo $counter; ?>] = "<?php echo $directorid; ?>";
          directorarr[<?php echo $counter; ?>] = "<?php echo $directorname; ?>";
        <?php
        $counter = $counter + 1;
      }
      $stmt->close();
    }
  ?>

  var div = document.createElement("div");
  div.setAttribute("class","form-group");

  var label = document.createElement("label");
  label.setAttribute("class","col-sm-2 control-label");
  label.appendChild(document.createTextNode("Director"));

  var div2 = document.createElement("div");
  div2.setAttribute("class","col-sm-9");

  var sel = document.createElement("select");
  sel.setAttribute("name","director");
  sel.setAttribute("class","form-control");

  for (var x = 0; x < directidarr.length; x++){
    var opt = document.createElement("option");
    opt.appendChild(document.createTextNode(directorarr[x]));
    opt.setAttribute("value", directidarr[x]);
    sel.appendChild(opt);
  }

  var div3 = document.createElement("div");
  div3.setAttribute("class","col-sm-1");

  var div4 = document.createElement("div");
  div4.setAttribute("class","input-group");

  div2.appendChild(sel);
  div3.appendChild(ahref);
  div.appendChild(label);
  div.appendChild(div2);
  div.appendChild(div3);
  dirdiv.appendChild(div);

}

enter image description here

在我的HTML代码中，它生成下拉列表，右侧是一个显示模态的按钮。在此模式中，表单允许用户为选择下拉列表添加更多选项。

enter image description here

以下是我用来添加数据而不刷新页面的脚本：

$(function() {
    $("#adddirector").click(function(e) {
        e.preventDefault();
        var directorname = $("#directorname").val();
        var dataString = 'directorname=' + directorname;

        if(directorname == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../action.php",
                data: dataString,
                success:{
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});

使用此表格：

<form class="form-horizontal" action="../action.php" method="POST">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Director's Name</label>
    <div class="col-sm-10" id="ccdiv">
      <input type="text" class="form-control" name="directorname" id="directorname" value="" required>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" name="adddirector" id="adddirector">Add Director <span class="glyphicon glyphicon-plus"></span></button>
    </div>
  </div>
</form>

但是在通过表单或后端/ phpmyadmin添加新数据后，下拉列表不会更新。用户必须仍然刷新页面以便更新下拉列表。我缺少什么或应该对我的剧本做什么？

Answer 1

我假设创建新Director的表单在提交时发送一个ajax请求，该请求由一些PHP代码处理，该代码将使用这个新条目更新数据库。

我建议在这个PHP代码中返回新插入条目的id。然后，您可以在ajax调用中添加“success”函数，该函数将在插入后接收新ID，因此您可以使用它向选择框添加新行。

编辑：

$(function() {
    $("#adddirector").click(function(e) {
        e.preventDefault();
        var directorname = $("#directorname").val();
        //in jQuery you can pass an object, directorname will now show up as $_POST['directorname'] in your PHP handler.
        var dataObj = {'directorname': directorname}

        if(directorname == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeIn(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "../action.php",
                data: dataObj,
                //success function should receive the id back as result
                success: function(result){
                    var newId = result;

                    // create and append the new option here with the new id and the given name.
                    var newOption = $('<option></option>');
                    newOption.val(result);
                    newOption.html(directorname);
                    $('.form-control[name="director"]').append(newOption)

                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
});

并确保您的php文件action.php在文件末尾回显新的id！如果您希望我看一下，请在该文件中发布代码。这是stackoverflow的一个问题，可能会帮助你解决php问题。 Getting insert id with insert PDO MySQL

将新数据添加到数据库后更新下拉列表

1 个答案: