How to create a button to add URL links in the form

Question

Does anyone know how to add like a link button into a form? For example, a user clicks a + button and they can add an URL. They can add another URL if they wish and remove any links if required. Would be good to have validation for links as well.

I know for validation of the URL I can use "Check if a JavaScript string is a URL", but will need something that will validate all links if multiple have been added.

The best way to explain what I am trying to do is by looking at "Can I insert a hyperlink in my form?" in the form builder.

I just want to add links, and I don't need to display text or anything like that.

score 2 · Answer 1 · answered Mar 20 '20 at 18:05

Is this what are you looking for?
Your question is a bit unclear.

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

Try it here: https://codepen.io/marchmello/pen/ZEGjMyR?editors=1000

score 1 · Accepted Answer · answered Mar 20 '20 at 18:12

What about DOM - not using longer form, so using URL as link text too.

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>

How to create a button to add URL links in the form

2 Answers2