'replacing contents of phone querySelector("[href='tel:123.123.1234']") but leaving in tel:

I have a form where a user fills out their phone number. this is part of an email signature generator. When you generate it, the placeholder a href phone number is replaced with the phone number that the user input on the form. This works fine except is also replaces "tel:" so the end result is for example '345.345.3456' when I want it to be 'tel:345.345.3456' so that it is clickable. I would like to replace everything EXCEPT the tel so that the phone number will be clickable.

EDIT: I have added the full code for the particular ask below now. I removed as much as I could of all those things not related to the question.

<body>
<!-- Start main form -->
<form method='POST' action='.' enctype='application/x-www-form-urlencoded' role="form" id="signatureForm">
  <p id='formErrorContainer'></p>
  <label for='mobile_phone'>Mobile Phone Number
    <input type='tel' id='mobile_phone' name='mobile_phone' title='Enter phone number' placeholder='e.g. 555.123.4567'>
    <span>Enter valid phone number</span> <span class='success-validation-check'></span> </label>
  <button type='submit' title='Generate Email Signature!!!' id='generateButton'>Generate Email Signature</button>
</form>
<template id="signatureTemplate">
  <table cellspacing=0 cellpadding=0 border=0>
    <tbody>
      <tr height="25">
        <td><span style="font-weight: 600;">m: </span> <a href="tel:" style="color: #7D8D9A; text-decoration:none !important;"> <a href="tel:123.123.1234" style="text-decoration:none !important; color: #063852 "><span data-column="mobile_phone"></span></a></td>
      </tr>
    </tbody>
  </table>
</template>
<script>

        // Adding the error validation
        const inputs = document.querySelectorAll('input, select');
        const inputLength = inputs.length;

        for (let i=0; i<inputLength; i++) {
            inputs[i].addEventListener('blur', function() {
                if (!this.classList.contains('blurred')) {
                    this.classList.add('blurred');
                }
            }, false);
        }

        const signatureForm = document.getElementById("signatureForm");
        signatureForm.addEventListener("submit", (ev) => {
            if (signatureForm.checkValidity()) {
                ev.preventDefault();
                const templateEle = document.getElementById("signatureTemplate").content.querySelector("table");
                templateEle.querySelector("[data-column='mobile_phone']").innerText = document.getElementById("mobile_phone").value;
                templateEle.querySelector("[href='tel:123.123.1234']").href = document.getElementById("mobile_phone").value;
                document.querySelector("body").innerHTML = "";
                document.querySelector("body").appendChild(templateEle);
            }

        }, false);

    </script>
</body>

javascript css

Solution 1:^[1]

So I'm still not entirely sure if it's what you're after but I think this will get you closer. I started to put in some extra flare for validation etc but I've got to run for the day and don't have the free time to go setup patterns and maxlengths and etc, so feel free to ignore the stuff you don't need.

SECOND TRY

const inputs = document.querySelectorAll('input, select'),
      signatureForm = document.getElementById("signatureForm"),
      template = document.getElementById("signatureTemplate"),
      phoneInput = document.getElementById('phone-input'),
      phoneOutput = signatureTemplate.content.getElementById('phone-output');
      
signatureForm.addEventListener("submit", (e) => handleForm(e), false);

for (let i=0, x = inputs.length; i < x; i++) {
    inputs[i].addEventListener('blur', function() {
        if (!this.classList.contains('blurred')) {
            this.classList.add('blurred');
        }
    }, false);
}

handleForm = (e) => {

  if (signatureForm.checkValidity()) {

     e.preventDefault();
     if (template) {
      const table = document.getElementById('signatureTemplate').content;
      phoneOutput.href = `tel:${phoneInput.value}`;
      phoneOutput.innerText = phoneInput.value ? phoneInput.value : 'NO NUMBER PROVIDED';
      document.body.appendChild(table);
     } else { console.error('No template found in the document') }

  } else {
    inputs.forEach((input) => input.classList.add(input.valid ? 'is-valid' : 'not-valid'));
  }

}

.the-table {
  border-collapse: collapse;
}

.blurred {
  /* For the sake of example */
  outline: gray 1px dashed;
}

.anchor-link {
  text-decoration: none;
  color: #063852;
}

.default-input {
  border: #ddd 2px solid;
}

.is-valid {
  border: #0f0 2px solid;
}

.not-valid {
  border: #f00 2px solid;
}

<form id="signatureForm"
      method="POST"
      action="."
      enctype="application/x-www-form-urlencoded"
      onsubmit="handleForm(event)">

  <p id="formErrorContainer"></p>
  <label for="mobile_phone">
    Mobile Phone Number
    <input type="tel"
           class="default-input"
           id="phone-input"
           min-length="10"
           title="Enter phone number"
           placeholder="e.g. 555.123.4567">
  </label>
  <aside data-phone-invalid>
    <span>Enter valid phone number</span> <span class='success-validation-check'></span>
  </aside>
  <button title="Generate Email Signature!!!"
          id="generateButton">
    Generate Email Signature
  </button>
  
</form>

<template id="signatureTemplate">
  <table class="the-table">
    <tbody>
      <tr height="25">
        <td>
          <span style="font-weight: 600;">m:</span>
          <a class="anchor-link" id="phone-output"></a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

FIRST TRY

If I understand your question correctly, this should get your sorted. Cheers.

inputToHref = () => {
  const anchor = document.createElement('a'),
        anchorVal = document.getElementById('phone1').value;
  anchor.innerText = anchorVal ? anchorVal : 'Enter A  Phone Number First';
  anchor.href = `tel:${anchorVal}`;
  document.body.appendChild(anchor);
}

a {
  display: block;
  font-size: 3rem;
  margin: 1rem;
}

<input type="tel" id="phone1" placeholder="tel: 123-456-7890"/>

<br><br>
<button onclick="inputToHref()">Click to Generate Anchor Tag</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'replacing contents of phone querySelector("[href='tel:123.123.1234']") but leaving in tel:

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]