用json数据填充输入字段然后发送到打印机

时间:2016-10-19 09:09:51

标签: javascript jquery html json ajax

我想用json中的数据填充输入字段,然后将其发送到打印机然后再次填充db中最后一行-1的输入然后发送到打印机然后最后一行-2然后打印它等。我已经设法从数据库的最后n个引入的行返回json数据,具体取决于printmultiple值

html

<div id="printableArea">
<div align="center">

<input type="text" name="barcode2"  id="barcode2" required readonly >
<input type="text" name="barcodecountry" id="barcodecountry"  >
<input type="text" name="barcodecountry" id="barcodecountry2"  >

<br>
 <div id="print">
</div>

<label id="idbar">id.:</label><input type="text" name="barcodesurname" id="barcodesurname"  required readonly>
<br>
<br>
<label id="pricebar">price:</label><input type="text" name="barcodename" id="barcodename"  required readonly>
<input type="text" name="barcodecountry" id="barcodecountry3">
</div> 
</div>

</div>

printablearea是填充输入的div,我发送打印到打印机

在我的Js档案中

$(document).ready(function() {


    $('form').submit(function(event) {

        $('.form-group').removeClass('has-error'); // remove the error class
        $('.help-block').remove(); // remove the error text





        var formData = {
            'surname'       : $('input[name=surname]').val(),
            'name'      : $('input[name=name]').val(),

            'telephone' : $("#telephone").val(),
            'mail' : $("#mail").val(),
            'barcode' : $("#barcode").val(),
            'customid' : $("#customid").val(),
            'ticketprice' : $("#ticketprice").val(),
            'seat' : $("#seat").val(),
            'printmultiple' :$("#printmultiple").val()

        };

        $.ajax({
            type        : 'POST', 
            url         : 'process2.php',
            data        : formData,
            dataType    : 'json', from the server
            encode      : true
        })

            .done(function(data) {



                console.log(data); 

                if ( ! data.success) {
                        if (data.errors.surname) {
                        $('#surname-group').addClass('has-error');
                        $('#surname-group').append('<div class="help-block">' + data.errors.surname + '</div>');
                        }
                        else if (data.errors.name) {
                        $('#name-group').addClass('has-error'); 
                        $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); 
                        }



                } else {

 $.each(data.added, function (i,it){

    $('#printableArea').append(data.added[i]);
 });

  for(i=0; i<data.added[13]; i++){
                     $('#barcodecountry2').val(data.added[1]); 
                    $('#barcodesurname').val(data.added[0]);             
                    $('#barcodename').val(data.added[4]); 
                     $('#barcode2').val(data.added[2]);
                     $("#print").barcode(
    document.getElementById("barcode2").value,
    "code128" 
    );  
                $('#printableArea').print();
                 }

$('form').append('<div class="alert alert-success">' + data.message + '</div>');
    }
            })


            .fail(function(data) {


                console.log(data);
            });


        event.preventDefault();
    });

});

我希望从json返回的数据填充输入,例如要填充的json的前5个元素然后打印然后接下来5然后打印。我根据printmultiple值添加了打印代码,但只打印了最后一行n次

下面我添加了返回的json数据:Object { 0: "7784", 1: "2016-10-18 23:16:01.000000", 2: "16221458721646", 3: "2016-10-19", 4: "8", 5: "normal", 6: null, 7: "admin", 8: "DASDSADAS", 9: "7884", 18 more… }

1 个答案:

答案 0 :(得分:0)

我找到了解决方案

   for(i=0; i<data.added[0].printmultiple; i++){
                     $('#barcodecountry2').val(data.added[i].signintime); 
                    $('#barcodesurname').val(data.added[i].customid);             //get id 
                    $('#barcodename').val(data.added[i].ticketprice); 
                     $('#barcode2').val(data.added[i].barcode);
                     $("#print").barcode( //div id print
    document.getElementById("barcode2").value,// Value barcode (dependent on the type of barcode)
    "code128" // type (string)
    );