how to load java script variable in to the bootstrap model text box as value

Question

I have some issue in javascript variable load in to the bootstrap model input box:

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 alert the correct value in here. But this value not load in to the bootstrap model text box. What is my mistake? How do I fix it? (only problem is pass JavaScript value not load in to the in side the text field. It can print as HTML out in to the div tag )

Update i used following 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" />

i think you haven't linked the JS file. write an alert function and make sure you have linked it.. — Ahamed Safnaj, Nov 26 '19 at 10:35
only problem is JS varible not load in to the text box. i can print data.value as html output in the div tag.but i want to load as editable content — Code Kris, Nov 26 '19 at 10:38
@CodeKris which version you are using for the `sweetalerts` ? — Jaydeep Mor, Dec 04 '19 at 08:38
where is the "data.value" coming from? i think you shud post your full code here. there are many errors in your currently posted codes already. — Galzor, Dec 04 '19 at 09:57

Galzor · Accepted Answer · 2019-12-05T06:41:02.193

5

your posted code is bit lacking and has some errors, anyways i tried to replicate your problem and i think i may have gotten it working. Take a look at below jsfiddle snippet and see if you can implement in your code to get it working.

CHECK OUT THIS LINK FIRST: https://jsfiddle.net/b1nary/je60gxv8/2/

UPDATED WITH YOUR SWEETALERT: 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 );

edited Dec 05 '19 at 06:41

answered Dec 04 '19 at 10:15

Galzor

825
8
16

i used sweet alert for bootstrap.not sweetalert – Code Kris Dec 05 '19 at 03:35
1

– Code Kris Dec 05 '19 at 03:36
1

– Code Kris Dec 05 '19 at 03:36
above two cdn for getting alert – Code Kris Dec 05 '19 at 03:38
if you can load value into text box i will accept your answer as correct.any way thank you very much your valuable contribution – Code Kris Dec 05 '19 at 04:03
check now, i used your provided cdn, lets get it done – Galzor Dec 05 '19 at 06:42
thank you it worked .thank you very much your valuable contribution – Code Kris Dec 05 '19 at 07:11

BCM · Answer 2 · 2019-11-29T18:41:21.800

Try this. I think function(isConfirm) is problem.

You need use then() function

    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'); 
    });

score 1 · Answer 3 · answered Nov 26 '19 at 09:56

1

For form input fields you need to use val() instead of text().

Example: $('#hours_work').val(data.value);

answered Nov 26 '19 at 09:56

CodyKL

1,024
6
14

Btw. did you checked your code? In the code you posted above is one double quote missing (ending quote for class), this can maybe the reason for your problem. `` – CodyKL Nov 26 '19 at 10:02

score 1 · Answer 4 · answered Nov 26 '19 at 09:59

1

Please check you html syntax

old

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

new

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

and check with one by one

$('#hours_work').val(data.value);
$('#hours_work').text(data.value);

answered Nov 26 '19 at 09:59

Arshad Shaikh

564
1
3
13

all are try bro .it not working .i think problem is something else – Code Kris Nov 26 '19 at 10:02
just write $('#hours_work').val('xyz'); in console and check it is working or give error. – Arshad Shaikh Nov 26 '19 at 10:03
try with var textbox = document.getElementById('hours_work'); textbox.value = 'xyz'; – Arshad Shaikh Nov 26 '19 at 10:04
your 1 option also not print the value – Code Kris Nov 26 '19 at 10:06
hey,please write this javascript under bootstrap modal – Arshad Shaikh Nov 26 '19 at 10:06
this is not single case i can't write in side bootstrap modal – Code Kris Nov 26 '19 at 10:08
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/203093/discussion-between-arshad-shaikh-and-nipun258). – Arshad Shaikh Nov 26 '19 at 10:09

score 1 · Answer 5 · answered Nov 29 '19 at 12:11

Your problem can be resolved if you simply use delegates. Like instead of direct use $('#hours_work').val(data.value); try with any parent refrence . of your document such as body. so $('#hours_work',$('body')).val(data.value);

You can use any parent reference of your modal div. in which your modal code is placed instead of the body. parent div of this div .

It's because your dom is not aware of your model elements if it's dynamically loaded.

Let me know if it's worked

Sarvesh Mahajan · Answer 6 · 2019-12-04T05:47:15.163

1

You are facing this issue because you are trying to add value to a field #hours_work, which has not yet rendered in DOM, as $('#overtime_requset').modal('show'); is rendering after assigning value to $('#hours_work').val(data.value); and input field is a part of Model, so you just need to add model first and then assign value to input field:

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);

edited Dec 04 '19 at 05:47

answered Dec 03 '19 at 16:24

Sarvesh Mahajan

914
7
16

Just make sure 'clear_field()' funtion is not clearing value of input, that you have assigned. – Sarvesh Mahajan Dec 04 '19 at 04:13
@nipun258, if it solves your problem, appreciate if you can vote and mark the answer, thanks – Sarvesh Mahajan Dec 04 '19 at 05:49
no problem is still occur .i say clear field function it working – Code Kris Dec 04 '19 at 05:51

Krishna Savani · Answer 7 · 2019-12-05T11:18:41.383

I have worked on Your Requirements and is working for me please run below code as locally:

  <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>

@CodeKris Oh that's nice! :) – Krishna Savani Dec 05 '19 at 11:25 — Krishna Savani, Dec 05 '19 at 11:25

score 0 · Answer 8 · answered Nov 26 '19 at 10:08

Please write this javascript under bootstrap modal

<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>

score 0 · Answer 9 · answered Dec 06 '19 at 22:08

0

If you defined the data JavaScript object and the clear_field function and, called the JQuery and Bootstrap libraries. There wouldn't be no issues with your code.

Check this JSFiddle page: https://jsfiddle.net/1x6t3ajp

answered Dec 06 '19 at 22:08

yedort

1
2

how to load java script variable in to the bootstrap model text box as value

9 Answers9