CODEWITHSUNDEEP
htmlforms
Aaron Kirk
Aaron Kirk

Reputation: 43

HTML Form won't submit when text input is filled

I'm making a form to submit data to login (just email and password), but I've set it up to only hide the email field and replace it with the password field when you've finished entering your email. It seems that if anything is entered into the email field it won't submit. There's a clip down below.

I don't actually have a backend right now, its just HTML and Bootstrap, so I'm not sure how to effectively troubleshoot this issue

Code:

<form>
  <div>
    <a href="index.html"><b>QSource</b><br><span>Lorem Ipsum Dolor Sit Amet</span></a>
  </div>
  <div>
    <input type="email" id="emailField" placeholder="E-Mail">
  </div>
  <div>
    <input type="password" id="passwordField" placeholder="Password">
  </div>
  <div>
    <button type="button" onclick="next()" id="nextButton"><span>Next</span></button>
  </div>
  <div>
    <button type="submit" id="loginButton"><span>Login</span></button>
  </div>
</form>

Here's a video of me trying to submit the form. Note that if nothing is entered into the email input it will reload the page when I click the submit button (regardless of whether there is anything in the password input). I'm not sure if it would actually submit since I don't have a backend, so I'm just going off of whether the page reloads.

https://i.gyazo.com/4be7cad8b362d139ea4ea17dcfe50862.mp4

Upvotes: 1

Views: 199

Answers (1)

Aaron Kirk
Aaron Kirk

Reputation: 43

I just didn't put in a valid email address so, since the input is type="email", it wouldn't let it submit.

Upvotes: 1

Related Questions