最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to hide all input elements within a form? - Stack Overflow

programmeradmin4浏览0评论

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=".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>

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./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>
Share Improve this question edited May 29, 2017 at 17:34 Badacadabra 8,5177 gold badges31 silver badges54 bronze badges asked Sep 15, 2015 at 4:30 Priyanka MauryaPriyanka Maurya 4433 gold badges7 silver badges18 bronze badges 1
  • you missed the '' in the jquery selector – Tomas Ramirez Sarduy Commented Sep 15, 2015 at 4:33
Add a ment  | 

5 Answers 5

Reset to default 2

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();

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');

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();

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

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

I would remend 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:

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

$('input[type="text"]').hide();
<script src="https://ajax.googleapis./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

发布评论

评论列表(0)

  1. 暂无评论