Read and insert QR Reader data in database without using Button in ASP.Net using JavaScript and jQuery

Last Reply 17 days ago By arunkurmi

Posted 25 days ago

I am using a javascript library to implement a QR reader so when I get the code I store it in a variable that I send to a textbox, what I need to know is how to send it to a procedure to insert the data every time it changes textbox content without using buttons.

Here is the code:

<asp:TextBox ID="txt_Person_Nm" runat="server" CssClass="form-control" ReadOnly="true" ToolTip="Person ID"></asp:TextBox>
<asp:HiddenField ID="HiddenField1" runat="server"/>

And the function: 

        <div class="col-md-6">
	    <div class="form-group row">
		<video id="preview" class="col-lg-12"></video>
		<script type="text/javascript">
			let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
			scanner.addListener('scan', function (contenido) {
				var test = contenido.toString();
				document.getElementById('<%= HiddenField1.ClientID %>').value = test;
				$("#<%= txt_Person_Nm.ClientID %>").val($('#<%= HiddenField1.ClientID %>').val());
			});
			Instascan.Camera.getCameras().then(function (cameras) {
				if (cameras.length > 0) {
					scanner.start(cameras[0]);
				} else {
					console.error('There is no camara');
				}
			}).catch(function (e) {
				console.error(e);
			});
		</script>
	    </div>
        </div>

 

Posted 25 days ago
Hi @YulIhnio,
Please try the following

Fill TextBox value using JavaScript and execute the remaining code in ASP.Net

It might help you.

Cheers Andrea.

Posted 25 days ago

I really appreciate your answer, the point is that I took the idea of ‚Äč‚Äčthis reader https://webqr.com/ and now that I have the result of the QR in a textbox I would like to know how to send that value without using buttons to the codebehind and run the method automatically


Posted 23 days ago

How are you generating the QR result in the textbox.

Please share your html and code.


Posted 18 days ago Modified on 18 days ago

Here is the code:

Txtbox

 

<asp:TextBox ID="txt_Person_Nm" runat="server" CssClass="form-control" ReadOnly="true" ToolTip="Person ID"></asp:TextBox>
<asp:HiddenField ID="HiddenField1" runat="server"/>

And the function:

 

<div class="col-md-6">
	<div class="form-group row">
		<video id="preview" class="col-lg-12"></video>
		<script type="text/javascript">
			let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
			scanner.addListener('scan', function (contenido) {
				var test = contenido.toString();
				document.getElementById('<%= HiddenField1.ClientID %>').value = test;
				$("#<%= txt_Person_Nm.ClientID %>").val($('#<%= HiddenField1.ClientID %>').val());
			});
			Instascan.Camera.getCameras().then(function (cameras) {
				if (cameras.length > 0) {
					scanner.start(cameras[0]);
				} else {
					console.error('There is no camara');
				}
			}).catch(function (e) {
				console.error(e);
			});
		</script>
	</div>
</div>

 


Posted 17 days ago

Hi YulIhnio,

After getting value in textbox call ajax method to insert data.

Check below code.

<script type="text/javascript"> 
        let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
    scanner.addListener('scan', function (contenido) {
        var test = contenido.toString();
        document.getElementById('<%= HiddenField1.ClientID %>').value = test;
        $("#<%= txt_Person_Nm.ClientID %>").val($('#<%= HiddenField1.ClientID %>').val());
        var obj = {};
        obj.code = $("#<%= txt_Person_Nm.ClientID %>").val();
        $.ajax({
            type: "POST",
            url: "Default.aspx/SaveCode",
            data: JSON.stringify(obj),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert(r.d);
            }
        });
    });
    Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
            scanner.start(cameras[0]);
        } else {
            console.error('There is no camara');
        }
    }).catch(function (e) {
        console.error(e);
    });
</script>

for inserting data into database using ajax refer below article.

jQuery AJAX Single Quote Problem: Escape Single Quotes in jQuery AJAX.