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>
-
you missed the
''in the jquery selector – Tomas Ramirez Sarduy Commented Sep 15, 2015 at 4:33
5 Answers
Reset to default 2Your 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:
- Check your syntax
- 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