I am having issues with onChange() and radio buttons styled display:none; which should be triggered by the label they are wrapped in is clicked.
The onChange() handler does not activate in IE8, IE7 when the following CSS is applied to the radio buttons.
#questionFrm input[type="radio"] {
display:none;
}
Another method that I tried involved moving the form element off the screen in a similarly to how many drop-down menus work. Firefox, however, refuses to move the radio button off the screen.
#questionFrm input[type="radio"] {
position:absolute;
top:-99;left:-99;
}
Radios hidden, pretty but does not work - http://jsfiddle.net/fHTwr/
Radios shown, ugly but works - http://jsfiddle.net/fHTwr/1/
Try using onClick() first, if it doesn't work you could do something like this:
<html>
<head>
<script>
var currVal = 0;
function changeIt() {
document.getElementById('changeMe').value = currVal++;
document.getElementById('changeMe').onchange();
}
function handle_change(elem) {
alert(elem.value);
}
</script>
</head>
<body>
<input type="button" onclick="changeIt()" value="Change It"/>
<input id="changeMe" type="text" value="" style="display: none;" onchange="handle_change(this)"/>
</body>
</html>
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","")
}
})
I want an HTML <input type="text"> element that has to be clicked on before it can be edited. Kind of along the same lines of how, in Windows or Mac OS Finder, you need to click on a filename before it turns editable.
I at first tried setting the <input> to disabled, and having JavaScript that "enables" it when clicked. This did exactly what I wanted in Chrome, but didn't work in Firefox, because in Firefox apparently making it disabled removes its ability to react to clicks as well.
How do I get this behavior in a way that works well across modern browsers?
You can listen on the parent div and check if input is clicked and then enable it.
Updated answer is working in firefox too.
function enableInput() {
if(event.target.id == 'text-input-overlay') {
event.target.style.display = "none";
document.getElementById("text-input").disabled = false;
}
}
<html>
<body>
<div style="position:relative;" id="container" onclick="enableInput()">
<label for="text-input">Input: </label>
<input id="text-input" type="text" disabled />
<div id="text-input-overlay" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" ></div>
</div>
</body>
</html>
You can reset the default input styles with CSS making it look like a normal text/element. Then use focus and blur events to toggle.
const input = document.querySelector('input[type="text"]');
input.addEventListener('focus', (event) => {
event.target.classList.remove('disabled');
});
input.addEventListener('blur', (event) => {
event.target.classList.add('disabled');
});
.disabled {
border: none;
background: #ccc;
}
<input id="text-input" type="text" class="disabled" value="Click Me" />
I am a beginner in javascript, hopefully you can help me with this problem..
I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked..
I know how to hide/show the button flip-ch1 but I can't do it to other button.
I have a script here:
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').mouseup(function() {
$('#flip-ch1').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add</button>
<button class="btn_style" id="flip-ch1">Add</button>
</div>
Toggle them both:
<script type="text/javascript">
$(document).ready(function(){
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#ch1').toggle();
$('#flip-ch1').toggle();
});
});
</script>
Just add this line:
$('#ch1').toggle();
So, the complete js code would be:
$(document).ready(function () {
$('#flip-ch1').hide();
$('#radio').mouseup(function () {
$('#flip-ch1').toggle();
$('#ch1').toggle();
});
});
Do not get confused by the .hide(). It is used to hide one of the buttons only in the beginning. No need to use afterwards. The reason that you do not see any changes after toggling the checkbox, is that when first button is hidden the second one gets its place, the place does not remain empty. You can spot all this that I mentioned on inspect element of any major browser.
Try $('#radio').is(':checked') as below
$(document).ready(function() {
$('#flip-ch1').hide();
$('#radio').on('change', function() {
if ($('#radio').is(':checked')) {
$('#flip-ch1').show();
$('#ch1').hide();
} else {
$('#flip-ch1').hide();
$('#ch1').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="radio" id="radio">
<button class="btn_style" id="ch1">Add 1</button>
<button class="btn_style" id="flip-ch1">Add 2</button>
</div>
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;
});
Ideally, I want to have 2 toggler. When click the fieldset toggler, the fieldset shows up with a div inside being hidden. When an event happened or When click the div toggler, the div show up.
I can only manage one of the 2 toggler working.
This is the html
click here
<fieldset class="fieldset" style="display:none">
<input>//first inputs
<input> 2nd input
<input id="edit-text" name="custom-text" type="checkbox value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>
This is the toggler for the fieldset:
$("a.fieldset-toggle-trigger").click(function() {
$(".fieldset").toggle();
}
The div toggler is inside another groups of code:
var e_fields = $("div#wrapper");
//fadein/fadeout with an event:
function bindEditTextClick(){
$("input#edit-text").click( function() {
if ($(this).attr('checked')) {
e_fields.fadeIn(750);
} else {
e_fields.fadeOut(750, function() {
});
}
});
}
//toggle as a part of another live click fuunction:
if (e_fields.is(':visible')) {
e_fields.fadeOut(500);
}
If I let the fieldset initially loaded as visible, the inside toggle works fine. This inside toggle is connected to other events, not easy to modify. How can I modify the fieldset toggler to allow inside toggle continue working?
If I get you correct you want to toggle main section and then toggle inner section depends on checkbox state. Is so, code and working solutions are below:
html
click here
<fieldset class="fieldset">
<input /><br />
<input /><br />
<input id="edit-text" name="custom-text" type="checkbox" value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>
css
fieldset { display:none; }
#wrapper { display:none; }
js
$(function() {
$(".fieldset-toogler-trigger").click(function() {
$(".fieldset").toggle();
});
$("#edit-text").change(function() {
var action = 'fadeOut';
if ($(this).is(':checked')) {
action = 'fadeIn';
}
$('#wrapper')[action](750);
});
});
jsfiddle
http://jsfiddle.net/y7PKk/
Got the solution for toggle the entire fieldset without messing up the inside toggle:
Initially move away the fieldset instead of hide the fieldset:
.moveaway{
position:absolute;left:-999em;
}
Then, use the fieldset toggler to toggle the moveaway class on/off.