I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.
Code:
HTML
<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>
CSS
.hidden {
display: none;
}
JavaScript
function show () {
document.getElementById("mymessage").style.display = 'block';
}
Disclaimer: I only included relevant code.
Hope somebody is able to help me/spot the error!
You have to return false to prevent the browser from refreshing the page so that you can hide the element on submit:
function show () {
document.getElementById("mymessage").style.display = 'block';
return false;
}
.hidden {
display: none;
}
<form onsubmit="return show();">
<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>
I would remove the hidden class:
function show () {
document.getElementById("mymessage").classList.remove("hidden");
}
(classList has very broad support, and can be polyfilled on obsolete browsers if necessary.)
Live Example (using a button click instead of a form submit):
function show () {
document.getElementById("mymessage").classList.remove("hidden");
return false;
}
.hidden {
display: none;
}
<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">
i think this is a solution
document.getElementById("mymessage").classList.remove("hidden");
What about if you use jQuery instead?
</script>
<script>
$(document).ready(function(){
$("form").submit(function(){
jQuery('#mymessage').show();
});
});
</script>
Remember to add the library above the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
Related
I want to show the following message when the button below is clicked using jQuery
<p class="msg-confirm" id="msgConf">
Great! You got this. Let's continue.
</p>
Button:
<input type="button" value="Start" class="btn-start" id="exec">
This message is set as none in CSS:
.msg-confirm{
display: none;
}
I have this function that worked before on a similar context, but without the validation. If the checkbox below is checked, I want this function working.
$("#exec").click(function(){
if($('#d3').is(':checked')){
$("#msgConf").show('slow');
}
});
Checkbox:
<input type="radio" name="image" id="d3" class="input-step1 aheadF1"/>
Let's make use of the simplicity of some of the new features of jQuery such as the .prop() method that will allow us to verify if a checkbox or radio button is checked. For the purpose of this example, I switched the input to a checkbox since it is more appropriate UX/UI wise speaking, however, this property can be verified in both controls. We will use the toggleClass() method of jQuery to toggle the class that hides the P tag and its content initially. I certainly hope this helps.
Happy coding!
$(document).ready(function () {
$("#exec").click(function () {
if ($('#d3').prop('checked')) {
$("p").toggleClass("msg-confirm");
} else {
alert("Please select the checkbox to display info.");
}
});
});
.msg-confirm {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p class="msg-confirm">
Great! You got this. Let's continue.
</p>
<input type="button" value="Start" class="btn-start" id="exec">
<input type="checkbox" name="image" id="d3" class="input-step1 aheadF1"/>
Try this
$("#exec").on("click",function (){
if($('#d3').is(':checked')){
$("#msgConf").css("display","")
}
})
Searched a long time to find a solution, but can't find one specific to my needs, so apologies if I've missed something.
On my Wordpress site I have a page with a button, which in order to follow the link of that button a checkbox needs to be checked. This is the code for it...
<form action="#"><input onchange="toggleAccept()" id="agreeCheckbox" type="checkbox" /><label for="agreeCheckbox">I agree to the terms</label></form>
<img src="button.png"/>
There's also some code handling this in the head:
<script type="text/javascript">
function toggleAccept() {
var acceptLink = document.getElementById("accept");
var agreeCheckbox = document.getElementById("agreeCheckbox");
if (agreeCheckbox.checked) {
acceptLink.onclick=function() {
window.location=this.href + "&cbrblaccpt=true";
return false;
}
} else {
acceptLink.onclick=function() {
mustAccept();
return false;
}
}
}
function mustAccept() {
window.alert("Please check the box and agree to the payment terms of this recurring product.");
}
cbrblaccpt
</script>
Basically, if someone tries to click the bottom without checking the box, the above popup appears. Once they check the box, they are taken to the button's link.
The issue I'm having is the TinyMCE is removing the "onchange" and "onclick" parts of the code. I'm guessing because it doesn't like inline Java being there.
After a lot of looking around it seems to me that the ideal solution is to handle this with jQuery in a separate file, but I have absolutely no idea how to do that.
If someone could help in that regard, or perhaps offer another work around then I'm all ears.
Thanks a lot
Well... yes you can handle it with pure jQuery.
I've made an example for you:
REMEMBER to add the jQuery library to your document, just before this <script> and if possible, just before </body> closing HTML tag :D
jQuery:
<script>
$(document).ready(function () {
var agree = $("#accept"); //we cache the element, dont worry
$("#agreeCheckbox").click(function () {
var checked_status = this.checked;
if (checked_status === true) {
agree.removeAttr("disabled");
} else {
agree.attr("disabled", "disabled");
}
});
//we convert the button into an anchor
agree.click(function () {
window.location = $(this).data("href") + "&cbrblaccpt=true";
});
});
</script>
CSS: Because we are using a button instead of an anchor (<a></a>)
#accept {
background: url(http://goo.gl/kCsKU3) center top no-repeat;
color: #FFF;
display: block;
width: 200px;
height: 44px;
border:none;
outline: none;
cursor: pointer;
}
#accept:disabled {
opacity: 0.6;
}
#accept:active {
margin-top:2px;
}
And finally, the HTML: Note we're using data-href attribute for the link instead of a simple hrefbecause this is a button, not an anchor anymore.
<input id="agreeCheckbox" type="checkbox" />
<label for="agreeCheckbox">I agree to the terms</label>
<button data-href="link/?cbur=a" id="accept" disabled="disabled"></button>
JsFiddle: http://jsfiddle.net/n2zej2cg/
Do you know how to create a form with edit mode? For details: Suppose I've a form with 5 or 6 fields which has button 'Save' and 'Cancel' . If I save the form, it'll show the plain form without text fields and a button named 'Edit' will appear. And When I'll click on 'edit', the form will be editable. Is it possible?
Full example, can handle as many input fileds as you want.(no select,textarea..)
The code is written based on modern browsers in pure javascript and css3.
Tested on Chrome.
hides and shows the buttons with css3,
saves the default values to apply them on cancel,
responds on the enter button.
If any questions .. just ask
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Modern Form</title>
<style>
label{display:block;}
form input{border:none;outline:none;box-sizing:border-box;}
form.invert input{border:1px solid rgba(0,0,0,0.2);outline:none;}
form>button:nth-of-type(1){
color:green;display:none;
}
form>button:nth-of-type(2){
color:red;display:none;
}
form>button:nth-of-type(3){
color:yellow;display:inline-block;
}
form.invert>button:nth-of-type(1){
display:inline-block;
}
form.invert>button:nth-of-type(2){
display:inline-block;
}
form.invert>button:nth-of-type(3){
display:none;
}
</style>
<script>
(function(W){
var D,form,bts,ipt;
function init(){
D=W.document,previous=[];
form=D.getElementsByTagName('form')[0];
bts=form.getElementsByTagName('button');
ipt=form.getElementsByTagName('input');
form.addEventListener('submit',save,false);
bts[1].addEventListener('click',cancel,false);
bts[2].addEventListener('click',edit,false);
}
function save(e){
e.preventDefault();
form.classList.remove('invert');
var l=ipt.length;
while(l--){
ipt[l].readOnly=true;
};
previous=[];
//send your info here
}
function edit(e){
e.preventDefault();
form.classList.add('invert');
var l=ipt.length;
while(l--){
previous[l]=ipt[l].value;
ipt[l].readOnly=false;
}
}
function cancel(e){
form.classList.remove('invert');
e.preventDefault();
var l=ipt.length;
while(l--){
ipt[l].value=previous[l];
ipt[l].readOnly=true;
}
}
W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
<form>
<label>A:<input readonly></label>
<label>B:<input readonly></label>
<label>C:<input readonly></label>
<button>Save</button><button>Cancel</button><button>Edit</button>
</form>
</body>
</html>
ps: the handler function could be merged into one bigger function... but i think this way it's easier to understand
The following is a very simplistic sample of how this might be done.
It is just to give you an idea - there are many ways to approach this.
Works in chrome, completely untested in other browsers (for example: assumes 2 pixel border)
What you do will depend on your UX and browser requirements
Sample Fiddle
HTML
<span>Example</span>
<div class="example">
<form>
<label for="ex1fld1">Field 1:</label><input type="text" name="ex1fld1" readonly value="Hello"></input>
<label for="ex1fld2">Field 2:</label><input type="text" name="ex1fld2" readonly></input>
<input type="button" value="Edit"></inpu>
</form>
</div>
CSS
div {
margin-bottom: 20px;
margin-top: 10px;
}
input[type="text"] {
font-size: 14px;
}
input[type="text"][readonly] {
border: 2px solid rgba(0,0,0,0);
}
Script (jQuery used here, but not required for something like this)
var readonly = true;
$('.example input[type="button"]').on('click', function() {
$('.example input[type="text"]').attr('readonly', !readonly);
readonly = !readonly;
$('.example input[type="button"]').val( readonly ? 'Edit' : 'Save' );
return false;
});
<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function () {
$("#info").slideToggle('slow');
});
});
</script>
this is the html code
<h4 class="rsvpTitle">
<span class="arrow"></span>RSVP
</h4>
<div id="info" class="expandContent">
<form id="formmail method="post" action="form_handler.php">
<label class="response" for="response">Will you be joining us?</label><br>
<span style="margin-left:121px;">
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!</span>
<br>
I have this code for a toggle effect. However, the toggle does not remain close, I want the toggle to remain close until someone clicks on the button to release the toggle. any ideas? is the code well written?
u have to add display: none; to #info and e.preventDefault() to your js
examples:
http://jsbin.com/oxuqus/2/ OR
http://jsfiddle.net/kB2fc/
CSS:
#info {
display: none;
}
JS:
$(document).ready(function(){
$("#click").on("click", function(e) {
$("#info").slideToggle('slow');
e.preventDefault();
});
});
Just add this in your CSS
#info {
display : none;
}
Working Example
(jsFiddle)
Explanation
The element is not hidden at the document load event. You must hide it with display:none; in your CSS to ensure it is not visible without user interaction.
Solution
Add the following to your CSS:
#info
{
display:none;
}
NOTE
You are not closing your input and span elements ! Add the closing tags:
<input type="radio" name="response" value="I'll be there with bells on!" id="response">I'll be there with bells on!
</input>
</span>
I have a long list of HTML in this format:
<div id="item555">
Some name
show details
Action
</div>
<div id="details555">
Some details
</div>
I can't figure out how to:
Show the Action button only when the item div is hovered.
Show the Details box when the Show details link is clicked.
I know this is really basic js stuff! :(
I've made a few amendments to your javascript, HTML and CSS, here's a fiddle with everything working.
I also made sure the code is not broken by having repeated elements.
JS
$(".item-container").hover(
function() {
$(".action", this).show()
},
function() {
$(".action", this).hide()
}
);
$(".details").click(function(e) {
e.preventDefault();
var detailsDiv = $(this).parent().next("DIV");
detailsDiv.toggle();
if (detailsDiv.is(":visible")) {
$(this).text("Hide details")
}
else {
$(this).text("Show details")
}
});
CSS
.action, .details-container { display: none; }
First of all, I updated your markup a bit:
<div id="item555" class="item">
Some name
show details
Action
</div>
<div id="details555" class="details">
Some details
</div>
Then I would use something like this in jQuery.
$('.show-details').click(function() {
$(this).parent('div').next('div.details').show();
});
$('.item').hover(function() {
$(this).find('.action-button').show();
}, function();
You can try with having different class attached to your elements. Hope this code helps
<html>
<head>
<title>Test Show Hide Div</title>
<script src="jquery.1.6.1.min.js"></script>
<style>
.item {
color: red;
}
.anchorDetails {
color: green;
}
.anchorAction {
color: blue;
display: none;
}
.noDisplay {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.item').hover(function() {
$('.noDisplay').toggle();
});
$('.anchorDetails').click(function() {
$('.anchorAction').toggle();
});
});
</script>
</head>
<body>
<div id="item555" class="item">
Some name show details Action
</div>
<div id="details555" class="noDisplay">Some details</div>
</body>
</html>
$('div#item555').hover(function() { $('a#button555').show(); })
You should here specify a classname or, better, an ID for show details, you could do it inline though. But, assume, it's id is 'show-detail':
$('a#show-detail').click(function() { $('div#details555).show() });
Please, notice, I've used tag#id to increase performance. jQuery selects elements a way much faster if you specify tagname. If you are using an ID, it is not that big deal, but if you use $('.classname') selector and you know all your .classname are divs, it's much better to use $('div.classname')
P.S. if you are looking for more generic way, you probably better look at other answers.
<div id="item555">
Some name
show details
Action
</div>
<div id="details555" style="display:none">
Some details
</div>
$("div[id^='item']").hover(function() {
$(this).find(".action").toggle();
}).delegate(".showDetails", "click", function(e) {
e.preventDefault();
$(this).parent().next("div").toggle();
});
Demo.
You could use the .hover function
with the toggle()
Look at this fiddle :
http://jsfiddle.net/ADLLR/