How to hide all input elements within a form?

Question

I am trying to hide input elements within my form with the following code. But it is not working...

<html lang="en"> <head> <title>children demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <h1>Hello</h1> <div> <h1 class="selected">div-1</h1> <h1 class="selected">div-2</h1> </div> <h1>xyz</h1> <form name= "demo form"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="submit"> <script> $( "div" ).children( ".selected" ).css( "background-color", "yellow" ); document.body.style.backgroundColor = "red"; $( demo_form.elements ).hide(); </script> </body> </html>

you missed the '' in the jquery selector

Tomas Ramirez Sarduy
– Tomas Ramirez Sarduy

2015-09-15 04:33:28 +00:00
Commented Sep 15, 2015 at 4:33 — Tomas Ramirez Sarduy
– Tomas Ramirez Sarduy, Commented Sep 15, 2015 at 4:33

Tushar · Accepted Answer · 2015-09-15 04:49:44Z

Your selector $( demo_form.elements ).hide(); is incorrect.

To select all the input elements inside the form, you can use $('input') selector

$('form input').hide();

If you want to hide the form itself,

$('form').hide();

Mr_Green · Accepted Answer · 2015-09-15 04:48:29Z

Mostly it should be done using css:

form.hide-inputs input{ display: none; }

and in jquery/JavaScript add the class hide-inputs:

$('form').addClass('hide-inputs');

Swaprks · Accepted Answer · 2015-09-15 05:59:57Z

If you want to hide all the elements within a form/element with ID "formId" use the following: ( change the tag name accordingly to make it work where ever you want )

Better to have css:

form#formId input{ display: none; }

Using Jquery:

$("form#formId input").hide();

If you want to hide a specific type of input say for example "text" use following:

Using css:

form#formId input[type='input']{ display: none; }

Using jQuery:

$("form#formId input[type='text']").hide();

Tomas Ramirez Sarduy · Accepted Answer · 2015-09-15 04:37:28Z

If you want to select the form by name, you need to use something like

$('form[name=demo form]')

I would recommend to use an id on the form you want to hide.

 <form id="demo-form" name="demo form"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="submit"> </form> $(document).ready(function() { $('#demo_form input').hide(); });

Notes:

Check your syntax
Don't forget to close the form element

Anshul Mishra · Accepted Answer · 2015-09-15 04:44:30Z

$('input[type="text"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <title>children demo</title> </head> <body> <h1>Hello</h1> <h1>xyz</h1> <form name= "demo form"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="submit"> </body> </html>

you are using demo_form but there is no class demo_form that should be use like

$('input[type="text"]').hide();

you can see an example here

Collectives™ on Stack Overflow

How to hide all input elements within a form?

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Related