Как добавить несколько значений через текстовое поле без удаления и изменения других текстов? - PullRequest
Новая
       15

Как добавить несколько значений через текстовое поле без удаления и изменения других текстов?

0 голосов
/ 02 июня 2019

Я создал эту скрипку, чтобы вы могли видеть мою борьбу.

Мой 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);
                            });

Этот код работает, но работает только один раз. Значение: если я добавляю гиперссылку, она работает в первый раз, но когда я хочу добавить другую ссылку , она не вставляется. Вместо этого он просто меняет все, что я вставил первым + дополнительный текст, который я добавляю к текстовой области.

Мой вопрос: как я могу сделать добавление этой ссылки независимым от того, что я набираю в текстовой области (простой текст), и обеспечить добавление дополнительных ссылок без изменения других ссылок в текстовой области?

Скрипка: https://jsfiddle.net/vaxqsztj/1/

Ответы [ 2 ]

2 голосов
/ 02 июня 2019

Вам нужно добавить данные вместо замены 

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

вместо этого вам нужно добавить предыдущий текст вместе с 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>
1 голос
/ 02 июня 2019

Проблема в том, что вы сбрасываете значение textarea в следующей строке с текущим значением подсказки: 

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

Вы можете использовать jQuery .append() для вставки содержимого в текстовую область.

Вы можете удалить это и добавить символ новой строки (\n) при каждом щелчке, чтобы каждая ссылка отображалась в отдельной строке следующим образом: 

$(".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>
...