Question

我正在尝试使用php创建pdf报告。首先，用户需要在输入框中键入名称，该名称将被传递到第二个php页面，该页面将搜索mysql数据库。

问题：在用户名中键入用户名后，我尝试调用数据（var student_id = $（'＃nama_student'）。val（）），但脚本指出该数据未定义。

p / s：很抱歉，如果代码没有经过清理，我仍在独自学习。.

代码：

php

//attendance.php

include('header.php');

$student_list_id = '';
$error_student_list_id = '';
$error = 0;
$success = '';

?>

<div class="container" style="margin-top:30px">
  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-md-9"><b>Attendance List</b></div>
        <div class="col-md-3" align="right">
          <button type="button" id="report_button" class="btn btn-danger btn-sm">Report</button>
        </div>
      </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
        <span id="message_operation"></span>
        <table class="table table-striped table-bordered" id="attendance_table">
          <thead>
            <tr>
              <th>Student Name</th>
              <th>Card No</th>
              <th>Date</th>
              <th>Time In</th>
              <th>Time Out</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
        </div>
    </div>
  </div>
</div>

</body>
</html>

<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="css/datepicker.css" />

<style>
    .datepicker
    {
      z-index: 1600 !important; /* has to be larger than 1050 */
    }
</style>



<div class="modal" id="reportModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Make Report</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="form-group">
        <form method="post">
            Name: <input type="text" name="name1"><br>
            <?php $nama_student = $_POST["name1"]; 
            ?>
            </form>
        </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" name="create_report" id="create_report" class="btn btn-success btn-sm">Create Report</button>
        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
      </div>

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

<script>
$(document).ready(function(){

  var dataTable = $('#attendance_table').DataTable({
    "processing":true,
    "serverSide":true,
    "order":[],
    "ajax":{
      url:"attendance_action.php",
      method:"POST",
      data:{action:"fetch"}
    }
  });

  $('#attendance_date').datepicker({
    format:'yyyy-mm-dd',
    autoclose:true,
    container: '#formModal modal-body'
  });

  function clear_field()
  {
    $('#attendance_form')[0].reset();
    $('#error_attendance_date').text('');
  }

  $('#add_button').click(function(){
    $('#modal_title').text("Add Attendance");
    $('#formModal').modal('show');
    clear_field();
  });

  $('#attendance_form').on('submit', function(event){
    event.preventDefault();
    $.ajax({
      url:"attendance_action.php",
      method:"POST",
      data:$(this).serialize(),
      dataType:"json",
      beforeSend:function(){
        $('#button_action').val('Validate...');
        $('#button_action').attr('disabled', 'disabled');
      },
      success:function(data)
      {
        $('#button_action').attr('disabled', false);
        $('#button_action').val($('#action').val());
        if(data.success)
        {
          $('#message_operation').html('<div class="alert alert-success">'+data.success+'</div>');
          clear_field();
          $('#formModal').modal('hide');
          dataTable.ajax.reload();
        }
        if(data.error)
        {
          if(data.error_attendance_date != '')
          {
            $('#error_attendance_date').text(data.error_attendance_date);
          }
          else
          {
            $('#error_attendance_date').text('');
          }
        }
      }
    })
  });

  $('.input-daterange').datepicker({
    todayBtn:"linked",
    format:"yyyy-mm-dd",
    autoclose:true,
    container: '#formModal modal-body'
  });

  $(document).on('click', '#report_button', function(){
    $('#reportModal').modal('show');
  });

  $('#create_report').click(function(){

    var student_id = $('#nama_student').val();

    $('#formModal').modal('hide');
    window.open("report.php?action=attendance_report&student_id="+student_id);



  });

});
</script>

Answer 1

您的代码中有一个问题：

...
<form method="post">
  Name: <input type="text" name="name1"><br>
  <?php $nama_student = $_POST["name1"]; ?>
</form>
...

jQuery selector不能像这样工作，jQuery selector的使用方式应与CSS中的使用方式相同，因此，当您从PHP中通过动态ID选择输入时，应在id属性如下：

<form method="post">
  Name: <input type="text" name="name1" id="student_name"><br>
  <?php $nama_student = $_POST["name1"];  ?></br>
</form>

然后使用javascript：

...
$('#create_report').click(function(){
  var student_id = $('#nama_student').val();
...

更新：基于@ecarrizo：您可以像这样在PHP内部对PHP变量值进行PHP回显：

...
$('#create_report').click(function(){
    var student_id = <?php echo $_POST["name1"]; ?>
    $('#formModal').modal('hide');
    window.open("report.php?action=attendance_report&student_id="+student_id);
});
...

Answer 2

您的脚本有几个问题，所以让我们从头开始：

问题＃1-您正在声明一个PHP变量，但不对其进行任何操作。

您正在php脚本中检索name1的POST值，并将其存储在变量$nama_student中，但是以后在代码中不再使用此变量。

您可能希望使用echo PHP指令进行打印。

// Example 
<?php echo $_POST["name1"]; ?>

问题2-没有ID为#nama_student的元素 在您的HTML中，此元素不存在，因此该元素是未定义的，您无法使用jquery $('#nama_student')来访问其值。

由于这里的目的是检索表单元素name1的值，因此您应该将提议的标识符分配给该元素，因此不再是未定义的标识符！

// Example
<input type="text" name="name1" id="nama_student">

问题3-您没有将值分配回尝试从中检索值的元素

即使您打算在输入后“回显”值，也不会将值分配给输入元素，即使您可以访问表单元素，也不会从{中获取任何值{1}}。为了解决这个问题，您需要将值分配给输入。

val()

现在您了解了所遇到的问题，请尝试将所有问题放在一起：

<input type="text" name="name1" value="you print the php variable here">

然后您的<input type="text" name="name1" id="nama_student" value="<?php echo $_POST["name1"]; ?>">应该有一个值

如何从html输入字段获取文本

2 个答案: