How to add multiple values via prompt to textarea without removing and changing other texts?

Question

I created this fiddle so that you can see the struggle I have.

My HTML

<form action="" method="post" role="form" name="my-form-name">

<button class="html-button">Link me</button>

<textarea name="x" id="post-text" rows="17" required="required"></textarea>

<button type="submit" class="submit-button-form">submit form</button>

</form>

JS:

$(".html-button").on("click", function () {
    var urls = prompt("Add a link", "http://");
    var setText = $("#post-text").val(urls);
// Adding prompt text into my input field
    $("#post-text").val(urls);
                            });

This code works, but it only works once. Meaning: if I add a hyperlink it works the first time, but when I want to add another link, it doesn't insert it. Instead, it just changes whatever I had put in first + the additonal plain text I am adding to the textarea.

My question: how can I make this link addition independent of what I type in the textarea (plain text) and make sure that I can add more links without it changing the other ones in the textarea?

Fiddle: https://jsfiddle.net/vaxqsztj/1/

Code Maniac · Accepted Answer · 2019-06-02T18:51:36.040

2

You need to append data instead of replacing

$("#post-text").val(urls);   <-- here you're replacing data with url only

instead you need to add previous text along with url

var setText = $("#post-text").val(urls);
$("#post-text").val(setText + urls);   <-- adding url along with previous value

$(".html-button").on("click", function() {
  var urls = prompt("Add a link", "http://");
  var setText = $("#post-text").val();
  // Adding prompt text into my input field
  $("#post-text").val(setText + urls);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" role="form" name="my-form-name">
  <button class="html-button" type='button'>Link me</button>
  <textarea name="x" id="post-text" rows="17" required="required"></textarea>
  <button type="submit" class="submit-button-form">submit form</button>
</form>

edited Jun 02 '19 at 18:51

answered Jun 02 '19 at 15:30

Code Maniac

37,143
5
39
60

It works, partially. The problem is: now it directly submits the form after clicking on "OK" button in the prompt... is that something we can fix? – Siyah Jun 02 '19 at 18:02
Rephrasing: it only submits the form after pressing enter when the prompt is being shown... is that something we can fix? – Siyah Jun 02 '19 at 18:07
@Siyah but in your fiddle there's no `form` tag at all ? – Code Maniac Jun 02 '19 at 18:31
Yes, so maybe I was not clear enough. The textarea is part of a form. I'll edit my HTML so that you can see what I mean. I didn't think that that would be a problem, so that's why. Sorry for the inconvenience! – Siyah Jun 02 '19 at 18:34
@Siyah you need to add type attribute to button to stop auto submission, check the updated code – Code Maniac Jun 02 '19 at 18:52
Awesome! That was easy... yet easy to miss. Thank you, Code Maniac! – Siyah Jun 02 '19 at 19:14

score 1 · Answer 2 · answered Jun 02 '19 at 15:44

The issue is you are resetting the value of the textarea in the following line with the current prompt value:

var setText = $("#post-text").val(urls);

You can use jQuery's .append() to insert content in the textarea.

You can remove that and add newline (\n) in each click to appear each link in separate line like the following way:

$(".html-button").on("click", function () {
  var urls = prompt("Add a link", "http://");
  $("#post-text").append(urls + '\n');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="html-button">Link me</button>

<textarea name="x" id="post-text" rows="17" required="required"></textarea>

Same problem here. It works to some extent; it keeps submitting the form when pressing enter while the prompt is there. Can we prevent that? — Siyah, Jun 02 '19 at 18:03

How to add multiple values via prompt to textarea without removing and changing other texts?

2 Answers2