在按钮单击时创建具有自动填充输入字段的模态窗口

Question

尝试将json代码分配给field.values时遇到了问题。一切正常[发生器，id查找]只是我不知道它为什么没有将值分配给字段。它的工作原理如下。我有一个按钮，当点击一个模态打开时，id在<span class="userId"></span>中正确显示我只需要一个填充on.modal的动作用json.value / name = input.value加载字段。

$('.getUserEditID').on('click', function (event) {
        $('.userId').text($(this).data('useredit'));
        //$('input[name="id"]').val($(this).data('useredit'));
        $('#editModal').modal();
        $.ajax({
            type: "GET",
            url: "getuserdata.php?id=" + $(this).data('useredit'),
            success: function(data) {
                // data is the text returned from your php script
                $('input[name="username"]').val(data.username);
                $('input[name="password"]').val(data.password);
                //$('input[name="name"]').val(data.name); // You don't seem to have name in your script??
                $('input[name="surname"]').val(data.surname);
                $('select[name="level"] option[value="' + data.level + '"]').prop('selected', true);  
            }
        });
    });

getuserdata.php？id = 2示例回复

{
    "id": 2,
    "username": "Teeto",
    "surname": "",
    "password": "somepassword",
    "lastlogin": "2014-02-18 15:35:01",
    "level": 0
}

表单视图

<form class="editUser">
  <input type="hidden" name="id" />
  <div class="input-group">

    <span class="input-group-addon">
      User id to edit : 
      <span class="userId">
      </span>
    </span>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Username
    </span>

    <input type="text" name="username" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Password
    </span>

    <input type="text" name="password" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Name
    </span>

    <input type="text" name="name" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Surname
    </span>

    <input type="text" name="surname" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Level
    </span>

    <select class="form-control" name="level">
      <optgroup label="Administracja">
        <option value="9">
          Administrator
        </option>
        <option value="8">
          Administrator L2
        </option>
      </optgroup>
      <optgroup label="Pracownicy">
        <option value="7">
          Dział X
        </option>
        <option value="6">
          Dział Y
        </option>
        <option value="5">
          Dział Z
        </option>
      </optgroup>
      <optgroup label="Klienci">
        <option value="4">
          Klient Indywidualny
        </option>
        <option value="3">
          Klient Korporacyjny
        </option>
      </optgroup>
      <optgroup label="Użytkownicy">
        <option value="2">
          Użytkownik III
        </option>
        <option value="1">
          Użytkownik II
        </option>
        <option value="0">
          Użytkownik
        </option>
      </optgroup>
    </select>
  </div>
</form>

Answer 1

解决方案：

在顶部添加json生成器（getuserdata.php）

header('Content-Type: application/json');

我的情况是生成器是:(还需要包括数据库连接等）

header('Content-Type: application/json');
    $getLev = $db->row("SELECT * FROM tbl_users WHERE id = :username",array("username" => $_GET['id']));

            $data = array(
            'id'            => $getLev["id"],
            'username'           => $getLev["username"],
            'surname'   => $getLev["surname"],
            'password'          => $getLev["password"],
            'lastlogin' => $getLev["lastlogin"],
            'level' => $getLev["level"]
            );
              echo (json_encode($data));

<强>脚本

$('.getUserEditID').on('click', function (event) {
        $('.euserId').text($(this).data('useredit'));
        $('#editModal').modal();
        var otherPro = $('.euserId').text();
        console.log(otherPro);
        var fillFields = function(){ 

        $.ajax({ 
            type: 'POST', 
            url: "getuserdata.php?id="+ otherPro,
            datatype: 'json',
            success: function(data){ 

            $.each(data, function (key, value) {
                $( '#' + key ).val( value ); 
            });

            } 
        }); 
    } 
    // call the function 
    fillFields("1"); 
    });

模态（将主页添加到按钮的位置）

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="Delete User" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="panel-primary">
                <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-user"></i> Modyfikacja uzytkownika</h3>

                </div>
            </div>
            <div class="modal-body">
                <div id="deleteholder"></div>
                <div id="msg-loader"></div>
                <form class="editUser">
  <div class="input-group">

    <span class="input-group-addon">
      User id to edit : 
      <span class="euserId">
      </span>
    </span>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Username
    </span>

    <input type="text" name="username" id="username" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Password
    </span>

    <input type="text" name="password" id="password" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Name
    </span>

    <input type="text" name="name" id="name" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Surname
    </span>

    <input type="text" name="surname" id="surname" class="form-control" placeholder="" required>
  </div>
  <br>
  <div class="input-group">

    <span class="input-group-addon">
      Level
    </span>

    <select class="form-control" name="level" id="level">
      <optgroup label="Administracja">
        <option value="9">
          Administrator
        </option>
        <option value="8">
          Administrator L2
        </option>
      </optgroup>
      <optgroup label="Pracownicy">
        <option value="7">
          Dział X
        </option>
        <option value="6">
          Dział Y
        </option>
        <option value="5">
          Dział Z
        </option>
      </optgroup>
      <optgroup label="Klienci">
        <option value="4">
          Klient Indywidualny
        </option>
        <option value="3">
          Klient Korporacyjny
        </option>
      </optgroup>
      <optgroup label="Użytkownicy">
        <option value="2">
          Użytkownik III
        </option>
        <option value="1">
          Użytkownik II
        </option>
        <option value="0">
          Użytkownik
        </option>
      </optgroup>
    </select>
  </div>
                </form>

            </div>

            <div style="padding: 10px 15px;background-color: #f5f5f5;border-top: 1px solid #dddddd;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;">
                <button id="editUser" class="btn btn-primary">Edit</button>
                <button class="btn btn-success" href="#" id="close" data-dismiss="modal">Close</button>
            </div>
            <!-- /.modal-content -->

        <!-- /.modal-dialog -->
    </div>
</div>
</div>

按钮生成器（在我的情况下，在foreach循环中用于生成表格）

<button data-useredit="'.$value['id'].'" class="btn btn-primary btn-sm btn-round collapsed getUserEditID"><i class="fa fa fa-wrench"></i> Edit</button>

我希望这个可以帮助任何人。将来，您可以将 onClick事件分配给#editUser 使其成为[记录查找] +修改脚本。