How to open a bootstrap modal box after submitting a form by barcode scanner

Question

I have a small form for barcode scanning. I scan the barcode of a product and a bootstrap box will appear. Into the modal i post barcode number of product. And inside the modal there is another form, which will retrieve barcode number of product and will fill some inputs and insert it into the mysql database table.

<form name="barkod_oku" id="barkod_oku" action="" method="post" >
<input name="sto_barkod" id="sto_barkod" value="" autofocus placeholder="Barkod Numarası">
<input type="hidden" name="alis_fatura_no" value="<?php echo $finalcode1 ;?>">

</form>

This is the form which i post 2 values into the modal box.

And this is the modal box which i want to see. ( İ haven't put otehr inputs into the modal yet.Later i will put.)

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <input name="barkod_no" value="<?php echo $sto_barkod1; ?>">
    <input name="fatura_no" value="<?php echo $stok_kodu1; ?>">
  </div>
   </div>
 </div>
 </div>

And also i use this javascript to open the modal box:

 <script>
 $('#barkod_oku').submit(function () {

    $('#myModal').modal('show');
 });
</script>

Shortly everything works fine i think but modal is not staying on the screen. It appears and then disappears in one second. What is the missing point that i can not see to hold the modal on screen?

Answer 1

You need to use Prevent the default action of a submit button

$('#barkod_oku').submit(function () {
    event.preventDefault();
    $('#myModal').modal('show');
 });