Czy ktoś wie, jak dodać przycisk linku do formularza? Na przykład użytkownik klika przycisk + i może dodać adres URL. Mogą dodać inny adres URL, jeśli chcą, i usunąć wszelkie linki, jeśli jest to wymagane. Dobrze byłoby mieć również sprawdzanie poprawności linków.

Wiem, że do weryfikacji adresu URL mogę użyć „Sprawdź, czy Ciąg JavaScript to adres URL ”, ale będzie potrzebować czegoś, co zweryfikuje wszystkie linki, jeśli zostało dodanych wiele.

Najlepszym sposobem wyjaśnienia tego, co próbuję zrobić, jest spojrzenie na „Czy mogę wstawić hiperłącze do mojego formularza? "w kreatorze formularzy.

Chcę tylko dodać linki i nie muszę wyświetlać tekstu ani niczego w tym stylu.

0
BruceyBandit 20 marzec 2020, 19:46

2 odpowiedzi

Najlepsza odpowiedź

A co z DOM - nie używaj dłuższych formularzy, więc używaj adresu URL jako tekstu linku.

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>
1
Tom 20 marzec 2020, 18:12

Czy tego szukasz?
Twoje pytanie jest trochę niejasne.

<!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>

Wypróbuj tutaj: https://codepen.io/marchmello/pen/ZEGjMyR?editors= 1000

2
MARSHMALLOW 20 marzec 2020, 18:05