Question 389282 in Html Question posted in
Some basic documentation can be found here.

Html – Remove a mandatory form field but still submits it

I have this code from a web page. How can I remove the email input but still have the submit button work?

<form novalidate="" id="widget-rsvp-195419" class="sc-cZHnwi hLDrzl rsvp__form">
  <div class="sc-eznDEQ dNwMfV">
    <div class="sc-ekwYMB dyWitL text-input">
      <input
        id="widget-rsvp-195419-name"
        data-testid="rsvpV2FormName"
        type="text"
        name="name"
        class="sc-hWvDPW itWEiX text-input__input0"
      /><label
        for="widget-rsvp-195419-name"
        data-empty="true"
        class="sc-guxjaN jAUduS text-input__label"
        >Nome completo *</label
      >
    </div>
  </div>
  <div class="sc-cKQIDT fUvhqE">
    <div class="sc-bMzxzo jtjJMU">
      <p class="sc-bxISGZ fFYqag">Você irá ao evento?</p>
      <div data-testid="ConfirmAnswer" class="sc-BcWVX jOQIFk">
        <div class="sc-hPCzgT gJfpuC radio">
          <input
            type="radio"
            id="widget-rsvp-195419-attend-yes"
            name="attend"
            data-testid="rsvpV2FormAttendYes"
            class="sc-hiola-d sJVFv"
            value="true"
            checked=""
          /><span class="sc-eYErCu hChOWX radio__icon"></span>
        </div>
        <label for="widget-rsvp-195419-attend-yes">Sim</label>
        <div class="sc-hPCzgT gJfpuC radio">
          <input
            type="radio"
            id="widget-rsvp-195419-attend-no"
            name="attend"
            data-testid="rsvpV2FormAttendNo"
            class="sc-hiola-d sJVFv"
            value="false"
          /><span class="sc-eYErCu hChOWX radio__icon"></span>
        </div>
        <label for="widget-rsvp-195419-attend-no">Não</label>
      </div>
    </div>
  </div>
  <div class="sc-cnEbbV djHfky">
    <div class="sc-fePcYi jlKeMw">
      <div
        role="button"
        tabindex="0"
        data-testid="SelectCountrySelectDDI"
        class="sc-jToBAC edUesx"
      >
        <img
          src="/vite/assets/BR-2333b293.svg"
          alt=""
          class="sc-hcdzEp kVduAM"
        /><svg
          xmlns="http://www.w3.org/2000/svg"
          width="11"
          height="6"
          viewBox="0 0 11 6"
          class="sc-cCuFUk huVtFU"
        >
          <path
            fill="#605F63"
            fill-rule="evenodd"
            d="M5.95.335l4.717 4.912a.302.302 0 0 1 0 .416.274.274 0 0 1-.4 0L5.75.961 1.234 5.663a.274.274 0 0 1-.4 0 .303.303 0 0 1-.084-.207c0-.074.027-.15.084-.207L5.55.337A.274.274 0 0 1 5.95.335z"
          ></path>
        </svg>
      </div>
      <div class="sc-iMZFOo cBfRCw">
        <input
          id="widget-rsvp-195419-phone"
          type="tel"
          required=""
          name="phone"
          data-testid="rsvpV2FormPhone"
          class="sc-eQhwCh XZLyg"
          autocomplete="tel"
          value=""
        /><label for="widget-rsvp-195419-phone" class="sc-iyjaVZ ddfxBD"
          >Telefone *</label
        >
      </div>
    </div>
  </div>
  <div class="sc-eznDEQ dNwMfV">
    <div class="sc-ekwYMB dyWitL text-input">
      <input
        id="widget-rsvp-195419-email"
        data-testid="rsvpV2FormEmail"
        type="email"
        name="email"
        class="sc-hWvDPW itWEiX text-input__input0"
      /><label
        for="widget-rsvp-195419-email"
        data-empty="true"
        class="sc-guxjaN jAUduS text-input__label"
        >E-mail *</label
      >
    </div>
  </div>
  <div data-testid="rsvpV2Animate" class="sc-jhlpgp eUDTHF">
    <div name="guests" class="sc-sCrnh fGBZrg">
      <h3 data-testid="rsvpV2AuthForm">Quantos acompanhantes?</h3>
      <div class="sc-ezMYvV hChGgn">
        <div class="sc-izIUyr fvbgJo">
          <div class="sc-dhSCCa ggiNZe">
            <span data-testid="rsvpV2GuestName">Adultos</span>
          </div>
          <div class="sc-gJNiKh bKBVax">
            <button
              disabled=""
              data-testid="rsvpV2GuestDecrease"
              class="sc-brWQNQ ebJbjr"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="21"
                viewBox="0 0 20 21"
              >
                <g fill="none" fill-rule="evenodd" transform="translate(0 .06)">
                  <circle cx="10" cy="10" r="9.5" stroke="#E0E0E0"></circle>
                  <path fill="#080808" d="M4 9.5H16V10.5H4z"></path>
                </g>
              </svg>
            </button>
            <div
              data-testid="rsvpV2GuestQuantity"
              class="sc-kJJeMD cUghHc quantity-box"
            >
              0
            </div>
            <button data-testid="rsvpV2GuestIncrease" class="sc-brWQNQ grnEOL">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="21"
                viewBox="0 0 20 21"
              >
                <g fill="none" fill-rule="evenodd" transform="translate(0 .06)">
                  <circle cx="10" cy="10" r="9.5" stroke="#E0E0E0"></circle>
                  <path
                    fill="#080808"
                    d="M10.5 4v5.5H16v1h-5.5V16h-1v-5.5H4v-1h5.5V4h1z"
                  ></path>
                </g>
              </svg>
            </button>
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
  <div class="sc-jMScns ikmMqK recaptcha">
    <div class="sc-cuaApf hRutOR recaptcha__badge">
      <div class="sc-dqxvKW iposjm">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="12"
          height="16"
          viewBox="0 0 16 21"
        >
          <path
            fill="#080808"
            fill-rule="evenodd"
            d="M14 7h-1V5c0-2.76-2.24-5-5-5S3 2.24 3 5v2H2C.9 7 0 7.9 0 9v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H4.9V5c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
          ></path>
        </svg>
      </div>
      <p class="sc-bgSKsl HwnnF">
        Este site é protegido por reCaptcha e Google.
        <a href="https://policies.google.com/privacy"
          >Políticas de privacidade</a
        >
        e <a href="https://policies.google.com/terms">termos de serviço</a>
      </p>
    </div>
  </div>
  <div class="sc-kBizdN gGaVww">
    <button
      style="position: relative; overflow: hidden"
      data-testid="rsvpV2FormSubmitButton"
      class="sc-fxEOJv eJpqtq sc-jROiwL buqilp button button--primary"
      type="submit"
    >
      <div class="sc-cAmlYy fNRXeh"></div>
      <span class="sc-icwmWt cILGdH">Responder</span>
    </button>
  </div>
</form>

I already tried simply deleting the HTML input, but it didn’t work. I saw that the button call upon submission was leading to some React code, but I couldn’t modify this React code in the source. How can I make it work with just JavaScript?

Tags:

2

Answers


  1. 0

    If it is indeed react, it might get re-rendered. As a workaround, you can just hide it and set a dummy value.

    var elem = document.querySelector("[name=email]")
elem.closest(".text-input").parentElement.classList.add("hidden");

// and don't forget
elem.value = '[email protected]';

    .hidden {
  display: none;
}

    It is possible that the value will also be overwritten by react virtual dom (?) in that case this solution won’t work.

    Login or Signup to reply.
  2. 0

    If you disable a required input element it will not be validated and the form will still submit.

    document.forms.form01.disablebtn.addEventListener('click', e => {
  e.target.form.email.disabled = true;
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log([...data]);
});
    <form name="form01">
  <label>Name: <input type="text" name="name" required></label>
  <label>Email: <input type="email" name="email" required></label>
  <button name="disablebtn" type="button">Disable email</button>
  <button>Submit</button>
</form>

    YOu can do more or less the same if you use a fieldset. If you disable the fieldset the input elements in the fieldset will not be included in the submit. This is also handy for hiding the input element.

    document.forms.form01.disablebtn.addEventListener('click', e => {
  e.target.form.emailfieldset.disabled = true;
});

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log([...data]);
});
    fieldset {
  display: inline;
  border: none;
  margin: 0;
  padding: 0;
}

fieldset:disabled {
  display: none;
}
    <form name="form01">
  <label>Name: <input type="text" name="name" required></label>
  <fieldset name="emailfieldset">
    <label>Email: <input type="email" name="email" required></label>
  </fieldset>
  <button name="disablebtn" type="button">Disable email</button>
  <button>Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search