how do i hide elements without using the visibility function [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to write a code that gives the user more options whenever a button is clicked.
for example say i have a page with two buttons, one "search for books" and another "search for events". If a user clicks on "search for books" button, on the same page right beneath the search button i want different options to appear. I tried using the css visibility:hidden function and switching it back to visibility:visible using a javascript function. It did work but a huge space from the screen was reserved for the hidden elements. The main window buttons were far apart from each other. on one side there was the "search for books" button and far from it there was the "search for events" button.
Here is part of the code
</head>
<div class ="buttons">
<div id="visible">
<input type="button" value="Click To Search Faculty Members" onclick="swapform()" class="button">
</div>
</div>
<div class = "form" id="theform" style="visibility: hidden">
<form name = "type" value="fm" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<span style="box-shadow: 0 0 0 1px white inset;">
<select name="type" >
<option value="fm"> Faculty Members Search </option>
</select>
<tr><td><label class ="textClick">List all Faculty Members<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By First Name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List By Last Name<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<!-- <input type="button" value="Hide" onclick="swapform2()" class="button"> !-->
<input type="submit" value="Get Info">
</table>
</div>
</span>
</form>
<!-- Book Search !-->
<div class="buttons">
<div id="bvisible">
<input class ="button" type="button" value="Click To Search Books" onclick="swapbooks()" class="button">
</div>
</div>
<div id="thebookform" style="visibility: hidden">
<form name = "type" value="ch" action="http://localhost:8080/278Project/search.php" method="post" onsubmit="return goto();">
<table>
<select name="type">
<option value="ch"> Search for Books</option>
</select>
<tr><td><label class ="textClick">List all available Books<input type="radio" name="select" value=1 ></label>
<div>
<label class="textClick"> List By Id<input type="radio" name="select" value=2 > </label>
<input class="text" type="text" size = "8" placeholder="Insert Id" name="listById" > </div>
<div>
<label class="textClick">List By Publishers name <input type="radio" name="select" value=3 ></label>
<input class="text" type="text" placeholder="Insert Name" name="list" >
</div>
<div>
<label class="textClick">List Books by year<input type="radio" name="select" value=4 ></label>
<input class="text" type="text" placeholder="Insert Last Name" name="lname" >
</div>
</div>
<input type="submit" value="Get Info">
</table>

Use this instead
display : none
This does the same thing, except the empty space the element takes up.
And looking at the tags, you have jQuery there. You can use .hide() and .show() instead.

Related

Force Focusing on Sibling Input

I'm currently working with a contact form plugin through Wordpress and so the outputted HTML and JS looks like the following:
$('.form .form--field label').click(function() {
$(this).parents('.form--field').addClass('form--field--focus');
$('input').filter(':first').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
</div>
The design has caused me to get a bit hacky with it but in any event, I'm trying to figure out how to force focus on the respective input whenever the user clicks on a label. At the moment, this is where I'm at with it. If anyone has any input or suggestions, that would be greatly appreciated.
the for attribute on a <label> looks for an id not a name. Example below should work without JavaScript
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" id="firstname" name="firstname">
</span>
</div>
Although if you really want to do this with JavaScript/JQuery and not be tied down to using a label you can do it this way using $(this).next().children().focus();
$('.form--field__label').click(function() {
$(this).next().children().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text">
</span>
</div>
<div class="form--field form--field__secondname">
<!-- using a span instead of label as an example !-->
<span class="form--field__label">Second Name</span>
<span>
<input type="text">
</span>
</div>
set input id="firstname" because you want focus on label click. This is builtin feature in html.
<input type="text" id="firstname" name="firstname">
More details here https://www.w3schools.com/tags/tag_label.asp
for multiple input you can use it like this
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
If you still persist you can use it like this
$('.form--field label').click(function() {
//It will look next sibling which is span and then find input in it and then focus it
//so it doesn't focus on other children elements
$(this).next('span').find('input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
<br>
<label class="form--field__label">Last Name</label>
<span>
<input type="text" name="lastname">
</span>
</div>

Submitting Form in a popup window

I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}

DOM changes with javascript aren't working

I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>
Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.
you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>

Using Javascript to show hidden CSS classes- Form elements [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I need to be able to show certain form elements depending on what the user picks. I tried doing this with CSS classes and then changing the classes with JavaScript to show the correct element but it doesn't seem to be working for me. here is the portion of the code I am haveing trouble with.
<html>
<head>
<title>Outcome 3</title>
<style>
.hidden {
display: none;
}
.PixieLott {
display: none;
}
</style>
<script>
document.getElementById('PixieLottVenueLondonLabel').style.display = "block";
</script>
</head>
<body>
<!--
credit card number-->
<!-- Form -->
<form name="Tickets">
<label for="First Name" class="UserDetails">First Name-</label>
<input type="text" name="firstName" iD="First Name" class="UserDetails">
<br>
<label for="Last Name" class="UserDetails">Last Name-</label>
<input type="text" name="lastName" iD="Last Name" class="UserDetails">
<br>
<label for="Email" class="UserDetails">Email-</label>
<input type="text" name="Email" iD="Email" class="UserDetails">
<br>
<label for="Telephone" class="UserDetails">Telephone-</label>
<input type="text" name="Telephone" iD="Telephone" class="UserDetails">
<br>
<label for="Credit Card" class="UserDetails">Credit Card Number-</label>
<input type="text" name="creditCard" iD="Credit Card" class="UserDetails">
<br>
<label for="Artist" class="ArtistChoice">Please choose the artist</label>
<select name="Artist" iD="Artist" class="ArtistChoice">
<option>Pixie Lott</option>
<option>Rihanna</option>
<option>Foo Fighters</option>
<option>Pharrell Williams</option>
<option>Beyonce</option>
</select>
<br>
<br>
<!-- Venues -->
<!-- Pixie Lott Venues-->
<label id="PixieLottVenueLondonLabel" class="PixieLott"> London</label>
<input type="radio" iD="PixieLottVenueLondon" name="Pixie Lott Venues" class="hidden" value="London" checked>
<label for="PixieLottVenueManchester" class="hidden">Manchester</label>
<input type="radio" iD="PixieLottVenueManchester" name="Pixie Lott Venues" class="hidden" value="Manchester">
<br>
</form>
</body>
</html>
When run I get the error Uncaught TypeError: Cannot read property 'style' of null from the line of code document.getElementById('PixieLottVenueLondonLabel').style.display = "block";
Your <script> block is being run before the DOM for the following elements is constructed. Move <script> block to the bottom of the HTML file and the error will be fixed.

Html button doesn't redirect to link

I'm trying to create a button on html that when I press it to get redirected to http://example.com/mysite/?rand=1
What I tried so far is:
<form action="http://example.com/mysite/?rand=1">
<div class="checkboxes" align="center">
<input placeholder="TextArea" style="width: 296px; height: 30px;" type="text" autocomplete="off">
<label for="x"><input type="checkbox" id="x" checked/><span> Just a checkbox 1 </span></label>
<label for="y"><input type="checkbox" id="y" disabled/><span> Just a checkbox 2 </span></label>
<button id="Button" type="submit">Press me</button>
</form>
I'm only redirected to http://example.com/mysite/?
I also tried with javascript like so:
<script "text/javascript">
document.getElementById("Button").onclick = function () {
location.href = "http://example.com/mysite/?rand=1";
};
</script>
<form>
<div class="checkboxes" align="center">
<input placeholder="TextArea" style="width: 296px; height: 30px;" type="text" autocomplete="off">
<label for="x"><input type="checkbox" id="x" checked/><span> Just a checkbox 1 </span></label>
<label for="y"><input type="checkbox" id="y" disabled/><span> Just a checkbox 2 </span></label>
<button id="Button">Press me</button>
</form>
The result is the same, I'm redirected to http://example.com/mysite/?
If I use other links to redirect, like google.com, etc, the redirect works just fine, but not with my actual site's link. The links works just fine if I open it in another tab
I'm not sure how to debug this, does anyone know any idea what the problem might be?
Your html is not correct
here it is the corrected one
<form action="http://example.com/mysite/?rand=1">
<div class="checkboxes" align="center">
<input placeholder="TextArea" style="width: 296px; height: 30px;" type="text" autocomplete="off" />
<label for="x">
<input type="checkbox" id="x" checked="checked" /><span> Just a checkbox 1 </span>
</label>
<label for="y">
<input type="checkbox" id="y" disabled="disabled" /><span> Just a checkbox 2 </span>
</label>
<button id="Button" type="submit">Press me</button>
</div>
</form>
Demo Fiddle
Your <input> elements need name attributes. The name is the parameter that ends up in the query string, while id is used for DOM manipulation and CSS.
Use a hidden <input> to add the rand parameter:
<input type="hidden" name=rand" value="1">
<input placeholder="TextArea" name="text" style="width: 296px; height: 30px;" type="text" autocomplete="off">
<label for="x"><input type="checkbox" name="x" id="x" checked/><span> Just a checkbox 1 </span></label>
<label for="y"><input type="checkbox" name="y" id="y" disabled/><span> Just a checkbox 2 </span></label>

Categories

Resources