Html – Javascript – Empty string value returned for input text box

So basically indeed it’s because of your clean up Function, the function is being call on the onChange of the form declaration, and as you can see on this line

    textbox.value = "";

Will clear the textbox value, the problem lays in that, when you call it in the form’s onchage event, any type of change, including the click of the submit will call the function and clear the values, before the click function is called.

[![enter image description here][1]][1]

Make your clean function run only by the radio buttons, no need for the call on the onChange line in the form declaration, so, just delete the first invoke in the onChange, and make sure the radioButton assignation is correct

e.g

1 – Remove the onChange() call in your html’s first line

<form name="myform" class="form">

2 – Modify the radio button onChange assignment so it has ‘()’ to trigger the function

input.onchange = function() {
  smsORemail()
};

Full Code:

<form name="myform" class="form">
  <p>Would you like notifications for new dogs and/or new cats?</p>
  <input type="checkbox" id="dog_checkbox" name="chk_dog" value="dogs"> Dogs<br>
  <input type="checkbox" id="cat_checkbox" name="chk_cat" value="cats"> Cats
  <br><br>

  <p>Would you like email or sms notifications?</p>
  <input type="radio" class="send" id="email_id" name="notif" value="email">
  <label for="email_id">E-mail</label>

  <input type="radio" class="send" id="sms_id" name="notif" value="sms">
  <label for="sms_id">SMS</label>
  <br><br>

  <label for="textbox" id="change" style="text-align: left; float: left;padding-right: 5px;"></label>
  <input type="text" name="comm_textbox" id="textbox" style="display: none;" placeholder="" value="">
  <br>
  <button type="submit" id="submit" style="display: none;">Submit</button>
</form>

<script>let form = document.querySelector('.form');
let change = document.getElementById('change');
const input = document.querySelector(".send");

//input.addEventListener('change', smsORemail);
input.onchange = function() {
  smsORemail()
};

function smsORemail() {
  let choice = form.notif.value;
  if (!choice) {
    return;
  }
  if (choice === 'email') {
    change.innerHTML = 'Email: ';
    const textbox = document.getElementById("textbox")
    textbox.style.display = "block";
    textbox.value = "";
    textbox.placeholder = "[email protected]";
    document.getElementById("submit").style.display = "block";
  } else if (choice === 'sms') {
    change.innerHTML = 'Phone: ';
    const textbox = document.getElementById("textbox")
    textbox.style.display = "block";
    textbox.value = "";
    textbox.placeholder = "555-555-5555";
    document.getElementById("submit").style.display = "block";
  }
}

document.getElementById("textbox").oninput = textbox_update;

function textbox_update() {
  let textbox_value = document.querySelector('input[name="comm_textbox"]').value;
  console.log(textbox_value)
  return textbox_value;
}

form.addEventListener('submit', event => {
  event.preventDefault();
  let textbox_value = textbox_update();
  const formData = new FormData(form);

  //console.log(formData.getAll('notif'));
  console.log(formData.get('notif'));
  console.log(formData.get('chk_dog'));
  console.log(formData.get('chk_cat'));
  console.log(formData.get('comm_textbox'));
  console.log(textbox_value);
})
</script>