如何将Java脚本变量作为值加载到引导程序模型文本框中

13

我在引导模型输入框中的javascript变量加载中遇到一些问题：

setTimeout(function() {
  swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"
    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(data.value); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');
        clear_field();
      }
    });
}, 1);
<div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">

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

        <!-- Modal body -->
        <div class="modal-body">
          <div class="form-group">
            <div class="input-daterange">
              <input type="text" name="from_date" id="from_date" class="form-control" value="<?php echo $_GET[" month "]; ?>" readonly />
              <span id="error_from_date" class="text-danger"></span>
              <span id="error_future_from_date" class="text-danger text-center"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="text-info">Tolal Number Of Employee <?php echo get_total_employee_count($connect,$_SESSION["dept_Id"])?></br>
            <label>Add the addition number of OT hours requried</lable>
            <input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>
            <label class="text-secondary">Approved OT hours :   <?php echo GetApprovedOt($connect,$_SESSION["dept_Id"],$currentMonth)?></br></label><br>
            <label class="text-secondary">Pendding OT hours :  <?php echo GetPendingOt($connect,$_SESSION["dept_Id"],$currentMonth)?></label>
          </div>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" name="get_approval" id="get_approval" class="btn btn-info btn-sm">Get Approval</button>
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
        </div>

      </div>
    </form>
  </div>
</div>
展开摘要

data.value在此处警告正确的值。但是此值不会加载到引导程序模型文本框中。我怎么了 我如何解决它？（唯一的问题是传递的JavaScript值不会加载到文本字段的内部。它可以作为HTML输出到div标签中）

我在CDN sweetAlert boostrap之后使用的更新

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css" />
javascript  php  input  bootstrap-modal  sweetalert 
— 克里斯·代码
source
尝试使用setText（）函数
— Ahamed Safnaj，
不起作用兄弟。我认为问题是另外一回事
— Code Kris
我认为您尚未链接JS文件。写一个报警功能，并确保您有联系吧..
— 艾哈迈德Safnaj
alert（data.value）; 显示正确的值
— 代码Kris
1
我使用最新的CDN“sweetalert”
— 代号克里斯

Answers:

5

您发布的代码有点缺乏，并且有一些错误，无论如何，我试图复制您的问题，我想我可能已经使它起作用了。在下面的jsfiddle代码段中查看，看看是否可以在代码中实现使其正常运行。

首先检查此链接： https : //jsfiddle.net/b1nary/je60gxv8/2/

用您的甜食更新： https ://jsfiddle.net/b1nary/je60gxv8/11/

setTimeout(function() {
    swal({
    title: "OverTime Status!",
    text: "You Need to get Sub OT Approval " + data_val + " Hours to Time allocate",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes, do it",
    closeOnConfirm: false,
    html: false
  }, function(){
    swal("Deleted!",
    "Poof! Your number has been added to input box!",
    "success");
    $('#hours_work').val(data_val); 
    $('#overtime_requset').modal('show');
    //clear fields    
  });

}, 1000 );
— 加尔佐尔
source
我使用了bootstrap.not sweetalert的甜蜜警报
— 代码Kris，
1
<link rel =“ stylesheet” href =“ cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/… ” />
— 代码Kris，
1
— 代码Kris，
以上两个CDN以获得警报
— 代码Kris，
如果您可以将值加载到文本框中，我将接受您的回答正确。无论如何，非常感谢您的宝贵贡献
— 代码Kris
3

尝试这个。我认为function(isConfirm)是问题。

您需要使用then（）函数

    swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
      type: "warning",
      showCancelButton: false
    }).then(function (result) {
        $('#hours_work').val(data.value);
        $('#overtime_requset').modal('show'); 
    });
— BCM
source
模型在这种情况下也不起作用
— 代码Kris，
1

对于表单输入字段，您需要使用val()而不是text()。

例： $('#hours_work').val(data.value);

— 科迪
source
顺便说一句。您检查过代码了吗？在上面发布的代码中，缺少一个双引号（类的结尾引号），这可能是造成问题的原因。<input type="text" name="hours_work" id="hours_work" class="form-control value=""/>
— CodyKL '19
1

请检查您的HTML语法

旧

<input type="text" name="hours_work" id="hours_work"  class="form-control value=""/>

新

<input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>

并一一检查

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);
— 阿尔沙德·谢赫（Arshad Shaikh）
source
所有人都在尝试.it无法正常工作。我认为问题是另外一回事
— Code Kris
只需写$（'＃hours_work'）。val（'xyz'）; 在控制台中检查其是否正常工作或给出错误。
— Arshad Shaikh，
尝试使用var textbox = document.getElementById（'hours_work'）; textbox.value ='xyz';
— Arshad Shaikh，
您的1个选项也不会打印该值
— 代码Kris
嘿，请在引导程序模式下编写此javascript
— Arshad Shaikh
1

如果仅使用委托，则可以解决您的问题。喜欢，而不是直接使用 $('#hours_work').val(data.value);尝试任何父母的参考。文件，例如正文。所以 $('#hours_work',$('body')).val(data.value);

您可以使用模式div的任何父级引用。在其中放置模态代码而不是正文。此div的父div。

这是因为如果动态加载，您的dom不会意识到您的模型元素。

让我知道是否有效

— Sunny Danu
source
1

之所以遇到此问题，是因为您试图将值添加到#hours_work尚未在DOM中呈现的字段中，就像$('#overtime_requset').modal('show');将值分配给$('#hours_work').val(data.value);并且输入字段是Model的一部分之后进行呈现一样，因此您只需要先添加模型，然后再添加将值分配给输入字段：

setTimeout(function() {
swal({
   title: "OverTime Status!",
   text: "You Need to get Sub OT Approval " + data.value + " Hours to Time 
  allocate in the department",
   type: "warning",
   confirmButtonText: "OK"
 },
 function(isConfirm) {
   if (isConfirm) {

    $('#overtime_requset').modal('show');
    $('#hours_work').val(data.value);
   }
 });
 }, 1);
— 萨尔维什·马哈詹（Sarvesh Mahajan）
source
并非如此，我尝试使用它。它不起作用
— 代码Kris，
只要确保'clear_field（）'函数没有清除您已分配的输入值即可。
— Sarvesh Mahajan
@ nipun258，如果它能解决您的问题，请感谢您可以投票并标记答案，谢谢
— Sarvesh Mahajan
仍然没有问题发生。我说清除字段功能可以正常工作
— 代码Kris，
1

我已经完成了您的要求，并且正在为我工​​作，请在本地运行以下代码：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
setTimeout(function() {
    var myArray = {id1: 100, id2: 200};

     swal({
      title: "OverTime Status!",
      text: "You Need to get Sub OT Approval "+ myArray.id1+ "  Hours to Time allocate in the department",
      type: "warning",
      confirmButtonText: "OK"

    },
    function(isConfirm) {
      if (isConfirm) {

        $('#hours_work').val(myArray.id1); //data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
        $('#overtime_requset').modal('show');

      }
      else{
          console.log("test");
      }
    });
}, 1);
 </script>


    <div class="modal" id="overtime_requset">
  <div class="modal-dialog ">
    <form id="overtime_requset_form">
      <div class="modal-content">


        <div class="modal-header">
          <h4 class="modal-title">Sub OT Request</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>


        <div class="modal-body">
          <div class="form-group">
            <div class="input-daterange">
              <input type="text" name="from_date" id="from_date" class="form-control" value="" readonly />
              <span id="error_from_date" class="text-danger"></span>
              <span id="error_future_from_date" class="text-danger text-center"></span>
            </div>
          </div>
          <div class="form-group">
            <label class="text-info">Tolal Number Of Employee </br>
            <label>Add the addition number of OT hours requried</lable>
            <input type="text" name="hours_work" id="hours_work"  class="form-control" value=""/>
            <label class="text-secondary">Approved OT hours :   </br></label><br>
            <label class="text-secondary">Pendding OT hours :</label>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" name="get_approval" id="get_approval" class="btn btn-info btn-sm">Get Approval</button>
          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
        </div>

      </div>
    </form>
  </div>
</div>
— 克里希纳·萨瓦尼（Krishna Savani）
source
1
谢谢姐姐。但是我已经解决了我的问题
— 代码克里斯
@CodeKris哦，太好了！:)
— 克里希纳萨瓦尼
0

请在引导程序模式下编写此javascript

<div class="modal" id="overtime_requset">
....
<script>
setTimeout(function () { 
           swal({
             title: "OverTime Status!",
             text: "You Need to get Sub OT Approval " + data.value + " Hours to Time allocate in the department",
             type: "warning",
             confirmButtonText: "OK"
            },
         function(isConfirm){
            if (isConfirm) {

               $('#hours_work').text(data.value);//data.value alert the correct value in here.but this value not load in to the bootstrap model text box 
               $('#overtime_requset').modal('show');
               clear_field();
              }
           }); }, 1);
</script>
</div>
— 阿尔沙德·谢赫（Arshad Shaikh）
source
0

如果定义了dataJavaScript对象和clear_field函数，则称为JQuery和Bootstrap库。您的代码不会有任何问题。

检查此JSFiddle页面：https ://jsfiddle.net/1x6t3ajp

— 耶多特
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.