php - 如何将元素附加到表单

Question

我正在编写一个动态表单，它根据用户选择的值附加可用的文本字段。我如何使它工作？对于上下文，它是一个编辑按钮，因此文本字段将使用数据库中的 STRING 预填充。

从数据库中获取数据的功能可以工作，模态也可以显示，但问题是select-form不起作用。

我尝试调用“#btn-edit-account”，但它不起作用。

模态编辑帐户的代码

 <div class="modal fade" id="edit-account-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Edit Account Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-add" role="tabpanel" aria-labelledby="nav-home-tab">

                <form id="form-edit-account">
                 <input type="hidden" name="_token" value="{{csrf_token()}}">
                  <div class="container my-2">
                    <div class="row">
                      <div class="col-md-12">
                        <div class="form-group">
                            <label>Role</label>
                            <select type="select" id="select-role" class="form-control edit_role select-role" name="role_id" required>
                            </select>
                        </div>
                        <div class="form-group student-number-container hidden">
                          <label>Student Number</label>
                            <input type="text" class="form-control" id="edit_student_number" name="student_number" required>
                        </div>

                        <div class="organization-container hidden">


                        </div>

                        <div class="form-row">
                          <div class="col-md-6">
                            <label>First name</label>
                            <input type="text" class="form-control" id="edit_first_name" name="first_name" required>
                          </div>
                          <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
                          <div class="col-md-6">
                            <label>Last Name</label>
                            <input type="text" class="form-control" id="edit_last_name" name="last_name" required>
                          </div>
                        </div>
                        <div class="form-group">
                              <label>Email</label>
                              <input type="email" class="form-control" id="edit_email" name="email">
                        </div>
                        <div class="form-row">
                        <label class="control-label">New Password <span class="required">*</span></label>
                        <input type="password" id="new_password" name="new_password" minlength="6" class="form-control password" required>
                        </div>
                        <div class="form-row">
                                <label class="control-label">Confirm New Password <span class="required">*</span></label>
                                <input type="password" id="confirm_password" name="confirm_password" minlength="6" class="form-control password" required>
                        </div>
                        <div class="form-group text-right mt-4">
                          <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
                          <button type="submit" class="btn btn-success btn-confirm-edit-account">Update</button>
                        </div>
                      </div>
                    </div>
                  </div>


                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

btn-edit-account 的 Javascript

$(document).on('click', '.btn-edit-account', function() {
      $('#edit-account-modal').modal('show');
      var id  = $(this).attr('data-id');
      $.ajax({
            url: "users/get-specific-user-info",
            type: "POST",
            data: {
              id: id,
              _token: "{{csrf_token()}}"
            },
            success: function(data) {
              // $('#edit_role').val(data.role_id);
              $('#edit_first_name').val(data.first_name);
              $('#edit_last_name').val(data.last_name);
              $('#edit_email').val(data.email);
              console.log(data);
            }
        });
      });

  });

选择角色的 Javascript

$(document).on('change', '#select-role', function() {
      var val = $(this).val();

      if(val != 3){
        $('.student-number-container').show();
      }
      else {
        $('.student-number-container').hide();
      }

      if(val != 1){
        $('.organization-container').html("");
      }
      else {
        appendOrganization();
        $('.organization-container').show();
      }

    });

appendOrganization 函数

function appendOrganization() {
    var html = "";

    html += '<div class="form-group"> <label>Organization Name</label> <input type="text" class="form-control" name="organization_name" required> </div>';
    html += '<div class="form-group"> <label>Organization Type</label> <select type="select" id="select-org-type" class="form-control" name="organization_type" required>'+
    '<option value="" selected disabled>Select Organization Type</option>'+
    '<option value="TYPE A">TYPE A</option>'+
    '<option value="TYPE B">TYPE B</option>'+
    '</select></div>';
    html += '<div class="form-group"> <label>College</label> <select type="select" id="select-org-type" class="form-control" name="organization_college" required> <option value="" selected disabled>Select Organization Type</option> <option value="COLLEGE ONE">COLLEGE ONE</option> <option value="COLLEGE TWO">COLLEGE TWO</option> </select> </div>';
    $('.organization-container').html(html);              
  }

模式中的选择应显示给定选择中的可用选项，然后将根据所选选项动态更改表单。

标签： phpjqueryhtmlajax