I have a html/JavaScript project that i am working on and i am encountering problems.
I am making a sign-up form for an email newsletter and i have it in a div element in the middle of a page like so:
(i know, its structure is really messed up but i am just playing around right now.)
<div id="overlay"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><center><div id="nothin" class="form">Sign Up For Our Newsletter<br><br>
<table><TD width="50%" valign="middle"><img class="round"src="picture1.jpg" height="150" width="250"></td><td width="5%"></td><td width="40%" valign="middle"><form>
<input type="text" class="round"required id="name" width="190"><br><br>
<input type="email" class="round"required id="email" width="190"><br><br>
<input id="submit"type="submit" class="button"value="Submit Your Email" onclick="success()"><br>
</form></td></table></div></center></div>
The problem i have is i made the script below so when you submit you get a success message and a button that should close down the div, leaving the webpage:
<script>
function success()
{
document.getElementById("nothin").innerHTML="<div id='form2'>Success!<br><br>Thank You!<br> You have successfully signed up for the Our newsletter!<br><button onclick='hide()' class='button'>Continue</button></div>";
}
</script>
When you click on the button "continue" it should run the function "hide()":
<script>
function hide()
{
document.getElementById("overlay").innerHTML="";
}
</script>
My problem is that when the "continue" button is clicked, it only closes <div id="nothin>
not "overlay" like it should. Do you have any idea why? Should i use some other method to close it?
Here is the CSS for the form, it wont work that well without it:
<style>
#overlay {
z-index: 16777271;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.form, .form2{
background-color:white;
color:black;
width:500;
height:250;
align:center;
border-radius: 40px;
border:dashed darkgreen;
}
.round{
border-radius:8px;
}
.button{
background-color:green;
border-color:green;
border-radius:45px;
height: 40px;
width:190px;
}
.BUTTON:HOVER{
background-color:darkgreen;
border-color:darkgreen;
border-radius:45px;
}
</style>
In the hide() function you are making the contents of "#overlay" element empty while element itself, remains.
One solution can be hiding the element.
This should work -
function hide(){
document.getElementById("overlay").style.visibility = 'hidden';
/*
//or setting the display to none
document.getElementById("overlay").style.display = 'none';
*/
}
Suppose you have a html code like
<div id ='parentWow'>
<div id='ChildHello'>
Some Content
<div>
</div>
If you want to remove the child of id "ChildHello" from the parent, instead of just making their visibility "hidden", you can use the following javascript
document.getElementById("ChildHello").parentNode.removeChild(document.getElementById("ChildHello"))
This helps... (y)
Related
I have a code where I am showing a infobox when user clicks on an input field. This works fine but to make the UX better I would like the infobox to remain open when user clicks on a show button. It shouldn't close and open again
<div class="text-field">
<input type="text" class="username" name="username" placeholder="username" />
<button class="show-pwd">show</button>
</div>
<div class="info" style="display: none;">
<p>hello world</p>
</div>
$(function() {
const username = $('.username');
const showPwd = $('.show-pwd');
showPwd.click(()=>{
username.get(0).type = 'password';
$('.info').show();
});
$('.username').on("focus",(e)=>{
$('.info').show();
});
$('.username').on("blur",(e)=>{
$('.info').hide();
});
});
.text-field input {
border: none;
background-color: transparent;
}
.text-field {
background-color: lightblue;
width: 200px;
height: 25px;
}
.info {
background-color: lightgreen;
width: 200px;
height: auto;
}
heres the codepen
I tried to add the show method in click handler but that just adds a glitch
The blinking is happening because input blurring is triggered first, and then the button click.
You can avoid the blinking with a slight delay when blurring / moving out of the input, like in the following example.
const username = $('.username');
const showPwd = $('.show-pwd');
var btnClicked = false; // this is new
showPwd.click(()=>{
btnClicked = true; // this is new
username.get(0).type = 'password';
$('.info').show();
});
$('.username').on("focus",(e)=>{
$('.info').show();
});
$('.username').on("blur",(e)=>{
setTimeout(function() {
if(!btnClicked) {
$('.info').hide();
}
},100);
});
.text-field input {
border: none;
background-color: transparent;
}
.text-field {
background-color: lightblue;
width: 200px;
height: 25px;
}
.info {
background-color: lightgreen;
width: 200px;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-field">
<input type="text" class="username" name="username" placeholder="username" />
<button class="show-pwd">show</button>
</div>
<div class="info" style="display: none;">
<p>hello world</p>
</div>
One suggestion - since the current setup (and the original one) have no way of hiding the .info div once the button has been clicked, consider making your .show-pwd button a toggle button - one click to show the info div (if it's not visible), and another to hide it (if it's visible).
If you decide to do that, you would have to change my initial suggestion a bit, in order to avoid hiding the info div when moving from your input to your button.
And if you're up for some UX suggestions, you could change the show button - for example, you could use the open / closed eye icon to reflect what would happen on button click (similar to show / hide password in various online services, like Gmail, and the like).
I have a piece of html/javascript code that shows a loading gif when I click a submit button for my form. The problem is, when one of the form fields is empty when I click the submit button, there is a message "please fill in this field" shown and the form is not actually submitted, but the gif shows up anyways. In such situation, I don't want my gif to show up, but I don't know how to prevent that.
Do you have any tips on how to make it work?
EDIT: here is a relevant piece of my code - HTML:
<label for="username">username</label>
<input type="text" id="username" name="username" class="form-control"
placeholder="sampleusername" required>
<div class="overlay">
<div id="loading-img"></div>
</div>
<script>
$("#submit").click(function () {
$(".overlay").show();
});
</script>
And CSS:
#loading-img {
background: url('loading.gif') center center no-repeat;
height: 100%;
z-index: 20;
}
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.9;
}
I use a Bootstrap template that checks if the username field is empty and says to fill it if it is. I also use JQuery as you can see from the code.
You can use like below and hide the overlay whenever you require using $(".overlay").hide();
$("#submit").click(function () {
var isValid=$("#myform").valid();//using jquery validation
if(isValid)
{
$(".overlay").show();
event.preventDefault();
}
//submit the form
);
My requirement is that..I have a box. inside box I have a form..What I want is that..When I click the submit button ,inside the box the form will gone and a message will display.
Just like this:
I have the jefiddle :
jsfiddle
here ,When I click to the submit button,message is appearing on the top and the box1 is going down..
I'd much prefer using jQuery to do this, but here's the updated fiddle using only javascript, and keeping changes minimal.
<div id="box">
<div class="box2">
<h1 id="welcomeDiv" style="display:none;" class="answer_list" >welcome</h1>
<h1 id="details">Details</h1>
<form id="foo-form" method="POST" onsubmit="return showDiv();">
<input type="text" name="user" placeholder="Your name"/>
<input type="submit" name="create" class="enter submit" value="Enter"/>
</form>
</div>
</div>
... and the script ...
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
document.getElementById('details').style.display = "none";
document.getElementById('foo-form').style.display = "none";
return false;
}
http://jsfiddle.net/0qyj62dv/7/
The form elements are now being hidden, the original details message is being hidden, and the welcome text is within the box now, not external to it. Oh, and I moved the function call to onsubmit of the form, so it returns false now and doesn't actually try to submit the form on jsfiddle.
Hth
Please try this
HTML: (Change type= submit to type=button)
<input type="button" name="create" class="enter submit" value="Enter" onclick="showDiv()" >
CSS: (Change type= submit to type=button)
.box2 input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
}
.answer_list{
margin: 0px auto;
position: relative;
background:pink;
height:300px;
width:400px;
display: block;
border: dotted;
border-width: 1px;
text-align:center;
}
DEMO
Create a class with same styling as that of #box.
Let's say answer_box
.answer_box {
margin: 0px auto;
position: relative;
background: pink;
height: 300px;
width: 400px;
display: block;
border: dotted;
border-width: 1px;
}
Add answer_box class to welcome container.
<div id="welcomeDiv" style="display:none;" class="answer_box" ><h1> WELCOME<h1></div>
To align it from top, give little margin to <h1> inside welcome div.
You need to hide the box container when submit is clicked.
function showDiv() {
document.getElementById('box').style.display = "none";
document.getElementById('welcomeDiv').style.display = "block";
}
look at this example,
http://jsfiddle.net/0qyj62dv/8/
all you need to do is this
submit form using ajax.
Add the welcome tab and form tab inside same parent div
toggle tabs as you want using style.display property
<button type="button" name="create" class="enter submit" onclick="submitForm()">Enter</button>
function submitForm(){
document.getElementById('tab2').style.display = "block";
document.getElementById('tab1').style.display = "none";
$.ajax({
method: 'POST',
url : '',
data : $('#myForm').serialize(),
success : function(data){
console.log('success',data);
alert('success');
}
});
}
you may call this using jquery
Good day,
I have a function inside a javaScript file. I have 10 button will trigger this function to do something based on the button name. The code is something as follow:
function doSomething( name ){
switch(name){
case "1";
alert("i am 1");
break;
case "2";
alert("i am 1");
break;
// and so on...
}
}
This doSomething is working fine. However, I would like to alert other things when there is noscript or JavaScript is disable.
I do something like:
<noscript>
// if click on button 1, display <image src="image/img1" />
// if click on button 2, display <image src="image/img2" />
// and so on..
// I would like display different image when different button clicked.
</noscript>
Kindly advise.
No way. HTML5 itself is just a document sturcture and CSS3 provides style. That is, HTML5 as is has no behavior, thus, you won't be able to interact with the document without JavaScript.
If JavaScript is disabled and you provide a <noscript> element, you should tell your users that your Web application won't work without JavaScript.
You could do something like the checkbox hack in css to show a message in a hidden div, Style the labels like your buttons.
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
.to-be-changed {display:none;}
input[type=checkbox]:checked ~ .to-be-changed {
display:block;
margin-top:30px;
font-size:120%;
color:red;
}
<noscript>
<div id="buttons">
<input type="checkbox" id="button1"><label for="button1">button 1</label>
<input type="checkbox" id="button2"><label for="button2">button 2</label>
<input type="checkbox" id="button3"><label for="button3">button 3</label>
<div class="to-be-changed"> You need to have javascript activated for the buttons to work !</div>
</div>
</noscript>
Obviously turn js off to se it working. Here's a link to the page I got the info from Css click events
I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.
Here is my relevant code:
<div id='back'>
<input type="button"/>
</div>
CSS code:
#back input{
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.
Javascript is not needed:
#back input {
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
#back input:active {
background-image: url(img/back_default-active.png);
}
This should work with JavaScript:
function change() {
document.
getElementById("back").
getElementsByTagName("input").
style.backgroundImage = "url(img/anotherImage.png)"
}
Call it from your button click (or from anywhere you want):
<div id='back'>
<input type="button" onclick="change()"/>
</div>
It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.
HTML
<div id='back'>
<input type="button" id="xyz" value="Go to back" class="button"/>
</div>
JS
<script>
el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);
function changeImg()
{
el = document.getElementById('xyz');
el.style.backround="url('img/back_default-active.png')";
}
</script>