在btn上创建带有自动填充输入字段的模式窗口，请单击 [英] Creating a modal window with autofill input fields on btn click

问题描述

尝试将json代码分配给field.values时遇到问题.一切都在工作[生成器，id查找]，只是我不知道为什么它不将值分配给字段.它的工作原理是这样的.我有一个带的按钮，单击模式时会打开<span class="userId"></span>中正确显示的id，只需要执行以下操作即可.模式使用json.value/name = input.value加载字段.

I have faced a problem while trying to assign a json code to field.values. Everything is working [ the generator, the id lookup ] just I don't know why it doesn't assign the values to the fields. It works like this. I have a button with , while clicking a modal opens the id is showed properly in <span class="userId"></span> Just I need a action that fills on.modal load the fields with 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>

推荐答案

解决方案:

在顶部添加json生成器(getuserdata.php)

Add in your json generator (getuserdata.php) at the top

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

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

My case the generator is : ( also need to include db connection etc )

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 使它甚至成为[记录查找] +修改脚本.

I hope this one helps anyone. In the future you can assign a onClick event to #editUser to make it even a [record lookup]+modify script.

这篇关于在btn上创建带有自动填充输入字段的模式窗口，请单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！