[英]How can i change value of clicked button after open a bootstrap modal using JavaScript?
[英]OPEN BOOTSTRAP MODAL AFTER SCANNING THE VALUE USING QRCODE SCANNER
我有一個表格,當用戶將他們的二維碼掃描到掃描儀中時,會彈出一個帶有他們詳細信息的模式。
上次我使用這個解決方案成功地做到了。 通過條形碼掃描儀提交表單后如何打開引導模式框
但現在,它不再起作用了。
這是我的代碼
<form name = "auto_barcode" id="auto_barcode" action="" method="post">
<div class="form-group center">
<label class="label-material active" style="font-color: #4b0082; ">ID number</label>
<input id="employee_qrcode" type="password" name="employee_qrcode" required="" class="form-control center" autofocus placeholder="Type your employee ID number here">
</div>
</form>
我的模態:
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" aria-hidden="true" class="modal fade text-left">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header primary-bg">
<h4 id="exampleModalLabel" class="modal-title" style="color: white;">online health declaration form </h4>
</div>
<div class="modal-body">
<div class="form-group row">
<input id="employee_qrcode1" type="text" class="form-control form-control-success " value="" disabled hidden="true" >
<label class="col-md-12 form-control-label" style="font-size: 30px; font-weight: bold; margin-left: 20px; " id="info_employee_name" type="text" ></label>
<label class="col-md-12 form-control-label" id="info_employee_address" type="text" style="font-weight: bold; font-size: 15px; margin-left: 20px; ">Km. 38 B, Balasing Road, Pulong Buhangin, Santa Maria, Bulacan</label>
<label class="col-md-12 form-control-label" id="info_employee_contactNo" style="font-weight: bold; font-size: 15px; margin-left: 20px; " type="text" >0915-333-5984</label>
<label class="col-md-12 form-control-label" id="info_employee_section" style="font-weight: bold; font-size: 15px;margin-left: 20px; " type="text" >RICTMS</label>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card-body">
<div class="form-group row">
<label class="col-md-8 form-control-label" style="font-weight: bold;">Body Temperature:</label>
<div class="col-md-10">
<input id="body_temperature" type="text" class="form-control form-control-success" style="resize: none; color: blue; text-transform: uppercase;" name="body_temperature"/>
</div>
</div>
<div class="form-group row">
<label class="col-md-8 form-control-label" style="font-weight: bold;">Places visted and transited within the last 14 days:</label>
<div class="col-md-10">
<input id="place_visited14" type="text" class="form-control form-control-success" style="resize: none; color: blue; text-transform: uppercase;" name="place_visited14"/>
</div>
</div>
<div class="form-group row">
<label class="col-md-8 form-control-label" style="font-weight: bold;">Have you been hospitalized for the past 14 days?</label>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" name="is_hospitalized" value="YES" /> YES <br>
Please describe condition.<br>
<input id="employee_condition_hospitalized" type="text" class="form-control form-control-success" style="resize: none; color: blue; text-transform: uppercase;" name="employee_condition_hospitalized"><br>
</div>
</div>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" checked="true" name="is_hospitalized" value="NO"/> No
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-8 form-control-label" style="font-weight: bold;">In the last 14 days, did you have any of the following : Fever, Colds, Cough, Sore Throat or Difficulty in Breathing?</label>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" name="is_symptoms" value="YES"/> YES <br>
Please specify.<br>
<input id="employee_condition_symptoms" type="text" class="form-control form-control-success" style="resize: none; color: blue; text-transform: uppercase;" name="employee_condition_symptoms"><br>
</div>
</div>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" checked="true" name="is_symptoms" value="NO"/> No
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-8 form-control-label" style="font-weight: bold;">Have you been identified as PUM/PUI?</label>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" name="is_pui" value="YES"/> YES
</div>
</div>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" checked="true" name="is_pui" value="NO"/> No
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-8 form-control-label" style="font-weight: bold;">Have you been in direct contact with or within the immediate vicinity of any person known to be a PUM/PUI?</label>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" name="is_contact" value="YES"/> YES
</div>
</div>
<div class="col-md-10">
<div class="custom-control custom-radio">
<input type="radio" checked="true" name="is_contact" value="NO"/> No
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group row">
<div class="col-md-12">
<label><u>DECLARATION AND DATA PRIVACY CONSENT FORM:</u><br><br>
The information I have given is true, correct and complete. I understand that failure to answer any question or giving false answer can be penalized in accordance with law. I voluntarily and freely consent the collection and sharing of the above personal information only in the relation to the office safety protocols.</label>
<!-- <input type="submit" style="float:right" class="btn btn-primary" value="Save" id="btnSave"> -->
<button type="submit" id="btnSave" class="btn btn-success float-right btnSave" >Submit</button>
<button type="button" style="float:right; margin-right:10px;" class="btn btn-dark cancelBtn" data-dismiss="modal" aria-label="Close">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
我的 javascript:
$('#auto_barcode').submit(function () {
event.preventDefault();
var employee_qrcode = document.getElementById("employee_qrcode").value;
// var employee_qrcode = $(this).data('value');
$.ajax({
type: 'post',
url: base_url+'Main_scan/ohdf_employee_details',
data: {'employee_qrcode': employee_qrcode},
success: function(data){
var res1 = data.result1;
if(data.success==1){
document.getElementById('info_employee_name').innerHTML= res1[0].employee_fname+" "+res1[0].employee_mname+" "+res1[0].employee_lname;
document.getElementById('info_employee_contactNo').innerHTML= "Contact Number: "+res1[0].employee_contact_nop;
document.getElementById('info_employee_address').innerHTML= "Address: "+res1[0].employee_address;
document.getElementById('info_employee_section').innerHTML = "Division/Section/Unit: "+res1[0].employee_section;
$('#myModal').modal();
} // add else toast here....
}
});
});
模態僅在我按下回車按鈕時才有效,但特別是我需要在掃描 ng QRcode 后顯示它。
我已經為我的問題找到了解決方案。 我只是將我的二維碼掃描儀恢復為出廠默認設置。 我的代碼沒有問題::)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.