Как изменить кнопку «кнопка» на кнопку «отправить» при нажатии без отправки после завершения события «щелчок»?

Question

У меня есть кнопка, которая при нажатии динамически запрашивает у пользователя дополнительную информацию через функцию onclick JavaScript:

<button type="button" id="create" onclick="addFields()">create?</button>

После загрузки новой информации на страницу я хочу кнопка для отправки формы:

// .js file
function addFields(){
    var container = document.getElementById("initialinfo");
    var newInfo = document.createElement('div');
    newInfo.setAttribute("id", "createDetails");
    newInfo.innerHTML += "divs and checkboxes and radios"
    container.appendChild(newInfo);

    document.getElementById("create").removeAttribute("onclick");
    document.getElementById("create").setAttribute('type', 'submit');

}

К сожалению, когда я делаю это, форма не отправляется при следующем клике. Вместо этого после события onclick кнопка (которая теперь имеет тип submit) отправляет форму. Как мне предотвратить это поведение?

Answer 1

Предотвращение по умолчанию

Метод protectDefault () интерфейса события сообщает пользовательскому агенту, что, если событие не обрабатывается явно, его действие по умолчанию не должно выполняться, так как оно обычно будет.

<form id="my-form">
  <input id="first-field" type="text"/>
  <input id="second-field" class="hidden" type="text"/>
  <button type="submit" id="submit">
    <span class="continue">Continue</span>
    <span class="submit hidden">Submit</span>
  </button>
</form>

.hidden {
  display: none;
}

let allFieldsShown = false;
const myForm = document.querySelector('#my-form'),
  secondField = myForm.querySelector('#second-field),
  continueText = myForm.querySelector('span.continue'),
  submitText = myForm.querySelector('span.submit');

myForm.addEventListener('submit', submitHandler);

function submitHandler(e) {
  if (!allFieldsShown) {
    e.preventDefault();
    showNode(secondField);
    hideNode(continueText);
    showNode(submitText);
    allFieldsShown = true;
  }
}

function showNode(node) {
  if (node.classList.contains('hidden')) {
    node.classList.remove('hidden');
  }
}

function hideNode(node) {
  node.classList.add('hidden');
}

Answer 2

Вы можете запустить форму программно, нажав вторую кнопку

<form id="myForm" action="..." >
    <button type="button" onclick="addFields(event)">continue?</button>
</form>

function addFields({target}){
    var container = document.getElementById("initialinfo");
    var newInfo = document.createElement('div');
    newInfo.setAttribute("id", "createDetails");
    newInfo.innerHTML += "divs and checkboxes and radios"
    container.appendChild(newInfo);

   // here we change the onclick event handler
   target.onclick = () => {
     const form = document.getElementById('myForm')
     form.reportValidity() && form.submit()     
   }
}

Answer 3

Сначала вы вводите кнопку типа submit и вызываете функцию через onclick.
Браузер сначала получит определение функции, затем отправит форму

<button type="submit" id="continue" onclick="addFields()">Continue></button>