Как создать кнопку для добавления URL-ссылок в форму - PullRequest
Новая
       0

Как создать кнопку для добавления URL-ссылок в форму

0 голосов
/ 20 марта 2020

Кто-нибудь знает, как добавить в форму кнопку ссылки? Например, пользователь нажимает кнопку «+» и может добавить URL-адрес. Они могут добавить другой URL, если они будут sh, и удалить все ссылки, если это необходимо. Было бы хорошо иметь проверку для ссылок.

Я знаю, что для проверки URL я могу использовать " Проверьте, является ли строка JavaScript URL ", но что-то понадобится это будет проверять все ссылки, если было добавлено несколько.

Лучший способ объяснить, что я пытаюсь сделать, это посмотреть на " Могу ли я вставить гиперссылку в мою форму? " в конструктор форм.

Я просто хочу добавить ссылки, и мне не нужно отображать текст или что-то подобное.

Ответы [ 2 ]

2 голосов
/ 20 марта 2020

Это то, что вы ищете?
Ваш вопрос немного неясен. 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        let i = 0;
        let ii = 0;

        function isURL(s) {
           var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
           return regexp.test(s);
        }

        function removeLink(id, iid) {
            console.log(id);
            console.log(iid);
            $(id).remove();
            $(iid).remove();
            return false;
        }

        function addLink(id) {
            var input = prompt("Enter the link", "https://www.example.com");
            var valid = isURL(input);
            console.log(valid);
            if(valid) {
                var element = '<br><a id="_' + i + '" href="' + input + '">Link</a>';
                console.log(element);
                $(id).append(element);
                let d = "'#_" + i + "'";
                let dd = "'#__" + ii + "'";
                let elment = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="__' + ii + '" onclick="removeLink(' + d + ', ' + dd + ')">Remove it!</button>';
                $(id).append(elment);
                console.log(elment);
                i = i + 1;
                ii = ii + 1;
            }

            else {
                alert("The URL that you have entred is wrong.");
            }
            return false;
        }
    </script>
  </head>
<body>
    <form id="_form" method="POST">
      <button type="button" onclick="addLink('#_form')">Add link</button>
    </form>
  </body>
</html>

Попробуйте здесь: https://codepen.io/marchmello/pen/ZEGjMyR?editors=1000

1 голос
/ 20 марта 2020

А как насчет DOM - не использовать более длинную форму, поэтому используйте URL-адрес как текст ссылки. 

function addUrl(e) {
  var f = e.form;
  var a = document.createElement("A");
  a.href = e.value; // link URL
  a.textContent = e.value; // link text
  f.appendChild(a);
  var x = document.createElement("INPUT");
  x.type = "button";
  x.value = "X";
  x.onclick = remove;
  f.appendChild(x);
  f.appendChild(document.createElement("BR"));
}
function remove() {
  var el = this, // button
    parent = el.parentNode, // a must for remove
    a = el.previousElementSibling; // anchor
  if(el.nextSibling.tagName == 'BR') parent.removeChild(el.nextSibling);
  parent.removeChild(el);
  parent.removeChild(a);
}
<form>
  <input name="url" size="50">
  <input type="button" value="Add" onclick="addUrl(this.form.url)"><br>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...