Jquery selecting input type

Question

I'm working on a login/register page, in which the forms switch depending on whether the user decide to login or register.

I'm trying to empty all of the <input> when the user switch forms.

I can get to erase all the contents of the <input> fields, but that's including the <input type="submit">, thus also erasing the submit button's message.

Here's what I tried to do to select every input except the submit one, but it doesn't empty the fields anymore :

$('.message a').click(function(){
      $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
      $(':text, :password, :email').each(function(){
            $(this).val('');
      });
});

And here's what I tried before, selecting all input, also erasing the "submit" one :

$('.message a').click(function(){
      $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
      $('input').each(function(){
            $(this).val('');
      });
});

Also, here's the html :

<div class="form">
    <form class="register-form" autocomplete="off">
      <input type="text" placeholder="nom" name="name_register"/>
      <input type="text" placeholder="prenom" name="last_name_register"/>
      <input type="password" placeholder="mot de passe" name="password_register"/>
      <input type="email" placeholder="adresse email" name="email_register"/>
      <input type="submit" value="Inscription"/>
      <p class="message">Already registered? <a href="#" class="register">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="email" placeholder="adresse email" name="email_login"/>
      <input type="password" placeholder="mot de passe" name="password_login"/>
      <input type="submit" value="Connexion"/>
      <p class="message">Vous n'êtes pas enregistré? <a href="#" class="login">Créer un compte</a></p>
    </form>
  </div>

Don't use input tag for submit button, use button tag instead: <button type="submit">Connexion</button> — hindmost
– hindmost, Commented Mar 13, 2017 at 8:58

Vic · Accepted Answer · 2017-03-13 08:56:55Z

2

$("input:not([type='submit'])").each

https://api.jquery.com/not-selector/

answered Mar 13, 2017 at 8:56

Vic

7236 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JF Bastien · Accepted Answer · 2017-03-13 09:13:26Z

2

You should use this selector:

$("input:not([type=submit])")

edited Mar 13, 2017 at 9:13

JF Bastien

6,9232 gold badges29 silver badges34 bronze badges

answered Mar 13, 2017 at 8:57

Jordi Flores

2,15012 silver badges17 bronze badges

1 Comment

Vic Over a year ago

Use single quotes, your double quotes are escaping.

imprezzeb · Accepted Answer · 2017-03-13 08:57:45Z

1

User the following instead.

$('.message a').click(function(){
      $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
      $('input[type=text], input[type=password], input[type=email]').each(function(){
            $(this).val('');
      });
});

answered Mar 13, 2017 at 8:57

imprezzeb

7162 gold badges7 silver badges18 bronze badges

Comments

Asif · Accepted Answer · 2017-03-13 08:59:00Z

1

try $('.register-form')[0].reset(); it will reset form values

answered Mar 13, 2017 at 8:59

Asif

658 bronze badges

Comments

SAMUEL · Accepted Answer · 2017-03-13 09:02:45Z

0

if i understand your requirments correctly following will help you

$('.message a').click(function() {
  $('form').animate({
    height: "toggle",
    opacity: "toggle"
  }, "slow");
  $('input[type=text], input[type=email], input[type=password]').each(function() {
    $(this).val('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

edited Mar 13, 2017 at 9:02

answered Mar 13, 2017 at 8:57

SAMUEL

8,6223 gold badges46 silver badges44 bronze badges

Collectives™ on Stack Overflow

Jquery selecting input type

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related