时间戳

首页 > 解决方案 > 如何在引导模式中检查 id 选择器是否有数据

javascript - 如何在引导模式中检查 id 选择器是否有数据

问题描述

我正在尝试检查像（ajax 响应）这样的 id 选择器在 Bootstrap 模式中是否有一些数据。根据结果​​我想显示输入字段，否则不应该显示数据更新的输入字段。我不想为数据更新显示空白输入字段。

<body>

<!-- The Update Modal -->
<div class="modal" id="update_notes">
<div class="modal-dialog modal-xl">
<div class="modal-content">

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

<!-- Modal body -->
<div class="modal-body">
<div class="form-group"><input type="text" id="up_heading" class="form-control" placeholder="Heading"></div>
                    
<?php 
if('.$("#up_notes1").val().' != ""){
>
<div class="form-group"><input type="text" id="up_notes1" class="form-control" placeholder="Notes Details"></div>
<?php                  
}
?>

<?php 
if('.$("#up_notes2").val().' != ""){
?>
<div class="form-group"><input type="text" id="up_notes2" class="form-control" placeholder="Notes Details"></div>
<?php                  
}
?>

<?php 

if('.$("#up_notes3").val().' != ""){
?>
<div class="form-group"><input type="text" id="up_notes3" class="form-control" placeholder="Notes Details"></div>
<?php                  
}
?>

</div>

<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="updatenotesdetails()">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<input type="hidden" id="hidden_notes_id">
</div>

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

</div>
</div>  
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

load_data();

function load_data(page, query = '')
{
  $.ajax({
    url:"notes_sa_add_fetch.php",
    method:"POST",
    data:{page:page, query:query},
    success:function(data)
    {
      $('#dynamic_content').html(data);
    }
  });
}


    //Edit and Update record

      function GetnotesDetails(notesid){
      $('#hidden_notes_id').val(notesid);

      $.post(
        "notes_sa_add_bk.php",{
          notesid:notesid
        },
        
        function(data, status){
          var notes = JSON.parse(data);
          $('#up_heading').val(notes.HEADING);
          $('#hidden_notes_hid').val(notes.HID);
          $('#hidden_notes_pid').val(notes.PID);
          $('#up_notes1').val(notes.P_1);
          $('#up_notes2').val(notes.P_2);
          $('#up_notes3').val(notes.P_3);
        }
      );

      $('#update_notes').modal("show");
    }


    function updatenotesdetails(){
      var heading_up = $('#up_heading').val();
      var notestype_up = $('#up_notestype').val();
      var notes1_up = $('#up_notes1').val();
      var notes2_up = $('#up_notes2').val();
      var notes3_up = $('#up_notes3').val();
      var hidden_notes_id_up = $('#hidden_notes_id').val();

      $.post(
        "notes_sa_add_bk.php",{
        hidden_notes_id_up:hidden_notes_id_up,
        heading_up:heading_up,
        notestype_up:notestype_up,
        notes1_up:notes1_up,
        notes2_up:notes2_up,
        notes3_up:notes3_up
        },

        function(data, status){
          $('#update_notes').modal("hide");
          readRecords();
        }
      );
    }

</script>
</body>

提前致谢。

标签： javascriptphphtmljqueryajax

解决方案

请将代码更改为以下以检查是否up_notes1为up_notes2空up_notes3：

<!-- Modal body -->
...
<?php
$up_notes1 = $_POST['up_notes1'];
if(isset($up_notes1) && $up_notes1 != "") {
>
<div class="form-group">
    <input type="text" id="up_notes1" class="form-control" placeholder="Notes Details" value="<?php echo $up_notes1; ?>">
</div>
<?php                  
}
?>

<?php
$up_notes2 = $_POST['up_notes2'];
if(isset($up_notes2) && $up_notes2 != "") {
?>
<div class="form-group">
    <input type="text" id="up_notes2" class="form-control" placeholder="Notes Details" value="<?php echo $up_notes2; ?>">
</div>
<?php                  
}
?>

<?php 
$up_notes3 = $_POST['up_notes3'];
if(isset($up_notes3) && $up_notes3 != "") {
?>
<div class="form-group">
    <input type="text" id="up_notes3" class="form-control" placeholder="Notes Details" value="<?php echo $up_notes2; ?>">
</div>
<?php                  
}
?>
...

如果要在发布到服务器之前检查它们是否为空，请将以下代码添加到updatenotesdetails()：

function updatenotesdetails() {
  var heading_up = $('#up_heading').val();
  var notestype_up = $('#up_notestype').val();
  var notes1_up = $('#up_notes1').val();
  var notes2_up = $('#up_notes2').val();
  var notes3_up = $('#up_notes3').val();
  var hidden_notes_id_up = $('#hidden_notes_id').val();
    if(heading_up == '' || notestype_up == '' || notes1_up == '' || notes2_up == '' || notes3_up == '' || hidden_notes_id_up == '') {
      alert('Please fill in all fields!');
      return false;
    } else {
    // Post data to server...
    }
}

如果它有帮助，请不要忘记评分。

谢谢。

推荐阅读