CODEWITHSUNDEEP
jqueryhtml
Gelo Manalo
Gelo Manalo

Reputation: 45

Splitting string on a textarea and putting it on a different text box

I am currently working on a program that scans for QR code that contains an asset tag. After scanning, the text results appear in a textarea with 4 rows. What I want to do is separate each row on button click and put each row into a separate text box.

I have already tried using split and putting the result into an array then returning the value into the textbox, but the string does not display.

This is the html

<div class="col-xs-6">
    <textarea id="qr" rows="5" cols="50"></textarea>
</div>
<div class="row">
    <div class="col-xs-6" style="float: right;">
        <button type="button" class="btn2" id="qrconf" style="width: 50%; padding: 2px;">Confirm</button>
    </div>
</div>
<div class="row" style="float: right; margin-top: 5%;">
    <div class="col-xs-6">
        <input type="text" name="atag" id="atag" class="txtb3"><br />
        <label>Asset Tag</label>
    </div>
    <div class="col-xs-6">
        <input type="text" name="snum" id="snum" class="txtb3"><br />
        <label>Serial Number</label>
    </div>
</div>
<br />
<div class="row" style="float: right; margin-top: 5%;">
    <div class="col-xs-6">
        <input type="text" name="model" id="model" class="txtb3"><br />
        <label>Model</label>
    </div>
    <div class="col-xs-6">
        <input type="text" name="usname" id="usname" class="txtb3"><br />
        <label>User's Name</label>
    </div>
</div>

And this is the jQuery part

$("#qrconf").click(function(){
    var qr = ${"#qr"}.val();
    atag = qr.split(/\n/);
    $("#atag").val(atag[2]);
});

That is already inside a document ready function.

This is supposed to return the 3rd line of the textarea to the #atag text box, but nothing returns

Upvotes: 0

Views: 86

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18975

Change var qr = ${"#qr"}.val(); to var qr = $("#qr").val();

$("#qrconf").click(function(){
    var qr = $("#qr").val();
    atag = qr.split(/\n/);
    $("#atag").val(atag[2]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
    <textarea id="qr" rows="5" cols="50"></textarea>
</div>
<div class="row">
    <div class="col-xs-6" style="float: right;">
        <button type="button" class="btn2" id="qrconf" style="width: 50%; padding: 2px;">Confirm</button>
    </div>
</div>
<div class="row" style="float: right; margin-top: 5%;">
    <div class="col-xs-6">
        <input type="text" name="atag" id="atag" class="txtb3"><br />
        <label>Asset Tag</label>
    </div>
    <div class="col-xs-6">
        <input type="text" name="snum" id="snum" class="txtb3"><br />
        <label>Serial Number</label>
    </div>
</div>
<br />
<div class="row" style="float: right; margin-top: 5%;">
    <div class="col-xs-6">
        <input type="text" name="model" id="model" class="txtb3"><br />
        <label>Model</label>
    </div>
    <div class="col-xs-6">
        <input type="text" name="usname" id="usname" class="txtb3"><br />
        <label>User's Name</label>
    </div>
</div>

Upvotes: 1

Related Questions