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
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 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)
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>
Here is the code I have: http://jsfiddle.net/Draven/rEPXM/23/
I'd like to know how I can hide that Add submit button until I click the + image to add input boxes to the form.
I don't want to add the submit button next to the input box because I want to be able to add multiple input boxes and submit them all when I click Add.
HTML
<div id="left">
<div class="box">
<div class="boxtitle"><span class="boxtitleleftgap"> </span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><div class="addplus"> </div></div></span></div>
<div class="boxcontent">
<form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
<a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
<div id="foldercontainer"><input type="submit" value="Add"></div>
</form>
</div>
</div>
</div>
jQuery
function AddFolder() {
$('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}
Just give the button an ID, and make it start hidden
<input type="submit" id="addButton" value="Add" style="display: none;">
Then use the show() jQuery method:
$("#addButton").show();
http://jsfiddle.net/TcFhy/
Here's a way you could do this... also, cleaned up the method used for making these input boxes a bit:
http://jsfiddle.net/mori57/4JANS/
So, in your html you might have:
<div id="foldercontainer">
<input id="addSubmit" type="submit" value="Add">
<input id="folderName" name="folder[]" type="text" size="20" style="" />
</div>
and your CSS might be:
#foldercontainer #addSubmit {
display:none;
}
#foldercontainer #folderName {
display:none;
width: 120px;
background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left;
color: #000;
border: 1px solid #cdc2ab;
padding: 2px;
margin: 0px;
vertical-align: middle;
}
and your script could be:
// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
folderAddCt = 0;
function AddFolder() {
if(is_vis == false){
// if it's not visible, show the input boxes and
$('#foldercontainer input').show();
// set the flag true
is_vis = true;
} else {
// if visible, create a clone of the first add-folder
// text box with the .clone() method
$folderTB = $("#folderName").clone();
// give it a unique ID
$folderTB.attr("id","folderName_" + folderAddCt++);
// and append it to the container
$("#foldercontainer").append($folderTB);
}
}
I moved the button out of the folder wrap, and I am showing it when you add a new folder. This way the button will stay at the bottom when adding new folders. I also removed the inline style, and replaced it with a class.
This is used to display the button, just add it to the AddFolder() function:
$('#addBtn').show();
I am hiding it with CSS like this:
#addBtn { display: none;}
I moved the button out of the #foldercontainer, this way it will always stay at the bottom when you add multiple folders, as you wanted:
<div id="foldercontainer"></div>
<input id="addBtn" type="submit" value="Add">
Look here for the jsFiddle: http://jsfiddle.net/kmx4Y/1/
$('form#folderform input[type=submit]').hide();
Then show the add button after you click the submit
http://jsfiddle.net/SQh8L/
I have made an option page for my chrome application.
Have designed the form which is working perfectly, except when now i tried to add a message will be shown (through jquery/javascipt) when the user clicks save button or reset button.
The form html:
<body onload="loadOptions();">
<center>
<div id="wrapper">
<div id="status">
<p id="statusMessage"></p>
</div>
<form id="settings" align="left" onsubmit="saveOptions(this);">
<fieldset>
<legend>General</legend>
// settings options go here
</fieldset>
<center>
<button type=submit> Save </button>
<button id="reset" type=reset onclick="reset();"> Restore Defaults </button>
</center>
</form>
</div>
</center>
</body>
I want to display the message in the status message div.
So i wrote the following script:
function saveOptions(form){
$("#status").hide();
//code to save settings
$("#statusMessage").html("Preferences saved");
$("#status").show();
}
function loadOptions(){
//code to load options
}
function reset(){
$("#status").hide();
//code to reset
$("#statusMessage").html("Preferences reset to default");
$("#status").show();
}
The css:
div#status{
width: 500px;
text-align: center;
background: white;
border: 3px solid orange;
border-radius: 5px;
font-weight: bold;
display: block;
}
div#status h1,p{
font-size: 20px;
text-shadow: 1px 1px 1px lightgrey;
}
The problem is that the message is displayed and then the div hides again!
I understood that the reason for this is that the page kind of refreshes when the form is submitted, but couldn't fin the way to work around it. :(
Even tried adding this
$(function() { $("#status").hide(); });
But did not help.
Please help !
Add return false to your form markup:
<form id="settings" align="left" onsubmit="saveOptions(this); return false;">
It will prevent the form of being submitted.
Another way is to use JQuery submit event and preventDefault method.
$("#settings").on("submit", function(e) {
e.preventDefault();
$("#status").hide();
$("#statusMessage").html("Preferences saved");
$("#status").show();
});