CODEWITHSUNDEEP
javascriptjqueryhtml
Shawon
Shawon

Reputation: 322

add a string to a textarea using jQuery

I want to add a string to a text area which has value may be grater than 2 lines. May be it is an ASCII ART but my main question is that how can I post ASCII art to a textarea? I am using jQuery and following codes: If I am using specific button means contain a class than what will be the code.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("input:text").val(" (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)");
        });
    });
    </script>
<!DOCTYPE html>
<html>
    <head></head>
    <body>

    <p>Name: <input type="text" name="user"></p>

    <button>Set the value of the input field</button>

    </body>
</html>

But it does not show me anything to me. Please help me out.

Upvotes: 6

Views: 167

Answers (4)

Tim007
Tim007

Reputation: 2557

Hatchet's code

$(document).ready(function() {
  $("button").click(function() {
    $("textarea").width(360);
    $("textarea").height(360);
    $("textarea").val(` (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Name:
  <textarea></textarea>
</p>

<button>Set the value of the input field</button>

Upvotes: 1

Inacio Schweller
Inacio Schweller

Reputation: 1986

If you can afford to support an ES6 feature, use template strings.

 $(document).ready(function(){
        $("button").click(function(){
            $("textarea").val(`
                             (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`
        )});
    });

Here is a fiddle with how to implement in your case.

Upvotes: 1

Hatchet
Hatchet

Reputation: 5428

Another moderately well supported option for multiline strings is to use the new ES6 template literals.

Also, normal text inputs don't support multiple lines. A <textarea> does, however.

$(document).ready(function() {
  $("button").click(function() {
    $("textarea").val(` (██)
__________(█)_______________██████
_________(███)___________ █████████
________(█████)________████████████
______ (███████)______ (░░░░░░░░░░░)
_____(█████████)_____(░░░░█░░█░░░░)
____(██░░░░░░░██)___ (░░(░░░●░░░)░░░)
_____▒░░█░░█░░▒____ (░░░(░░◡░░)░░░░)
____▒░░░░░░░░░░▒___ (░░░░░░░░░░░░░)
____▒░░█░░░█░░░▒___██(░░░░░░░░░)██
____▒░░░███░░░░▒___███(░░░░░░)████
_____▒░░░░░░░░▒___████████████████
_____██░░░░░░██___████████████████
____▒▒███████▒▒___███ █████████ ███
___▒░░░█████░░░▒__███ █████████ ███
_▒░▒░░░███░░░▒░▒__███ █████████ ███
_▒░░▒░░███░░▒░░▒_ ███ █████████ ███
_▒░░░▒░███░▒░░░▒_ (░░) █████████_(░░)
__▒░░▒░███░▒░░▒_______█████████__(██)
_▒▒▒▒░░███░░▒▒▒▒_____█████████__/▓▓▓\
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒__(░░░░)_(░░░░)▓▓▓▓▓▓▓)
▒░░░░░░░░░░░░░░░▒___████__████▓▓▓▓▓▓▓▓)
_▒░░░░░░░░░░░░░▒____ ████__████▓▓▓▓▓▓▓)
__▒▒▒▒▒▒▒▒▒▒▒▒▒______████__████▓▓▓▓▓▓)`);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Name:
  <textarea></textarea>
</p>

<button>Set the value of the input field</button>

Upvotes: 4

Nayuki
Nayuki

Reputation: 18552

It is possible to specify a multi-line string in JavaScript, but it will be ugly. For example:

// This has 3 lines
var s =
    "abc\n" +
    "def\n" + 
    "ghi";

An alternative solution is to put a multi-line string in hidden HTML code, then extract it using jQuery on the DOM:

<pre id="my-art" style="display:none">here is my
multi-line ascii art
snowman or other graphic</pre>


$(document).ready(function(){
    $("button").click(function(){
        $("input:text").val(
            $("#my-art").text()
        );
    });
});

Upvotes: 1

Related Questions