I found the following code here (Disable submit button unless original form data has changed) and it works but for the life of me, I can't figure out how to change the properties, text and CSS of the same submit button.
I want the text, background and hover background to be different when the button is enabled/disabled and also toggle another DIV visible/hidden.
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)
.find('input:submit, button:submit')
.prop('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.prop('disabled', true);
Can someone please provide a sample. I have no hair left to pull out :-)
The answer you've copied isn't that great because a form doesn't have change or input events. Form elements do, instead. Therefore, bind the events on the actual elements within the form. Everything else looks okay except that you need to store the state of whether or not the stored/current data is equal to each other and then act accordingly. Take a look at the demo that hides/shows a div based on the state.
$('form')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', 'input, select, textarea', function(e) {
var $form = $(this).closest("form");
var state = $form.serialize() === $form.data('serialized');
$form.find('input:submit, button:submit').prop('disabled', state);
//Do stuff when button is DISABLED
if (state) {
$("#demo").css({'display': 'none'});
} else {
//Do stuff when button is enabled
$("#demo").css({'display': 'block'});
}
//OR use shorthand as below
//$("#demo").toggle(!state);
})
.find('input:submit, button:submit')
.prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="tb1" type="text" value="tbox" />
<input name="tb2" type="text" value="tbox22" />
<input type="submit" value="Submit" />
</form>
<div id="demo" style="margin-top: 20px; height: 100px; width: 200px; background: red; display: none;">Data isn't the same as before!</div>
And the rest could be done via CSS using the :disabled selector(CSS3) or whatever is appropriate.
You can change the hover style of the button using css. CSS has hover state to target:
[type='submit']:disabled {
color: #ddd;
}
[type='submit']:disabled:hover {
background-color: grey;
color: black;
cursor: pointer;
border: none;
border-radius: 3px;
}
[type='submit']:disabled {
color: #ccc;
}
For showing and hiding, there are many tricks to do it. I think following would be the simplest trick to do and and easier for you to understand.
Add this in your html
<div id="ru" class="hide">this is russia</div>
<div id="il" class="hide">this is israel</div>
<div id="us" class="hide">this is us</div>
<div id="in" class="hide">this is india</div>
Add this in your css
.hide {
display: none;
background: red;;
}
Update your javascript like following:
$('form').bind('change keyup', function () {
.....
// get id of selected option
var id = $("#country-list").find(":selected").val();
$('.hide').hide(); // first hide all of the divs
$('#' + id).show(); // then only show the selected one
....
});
Here is the working jsfiddle. Let me know if this is not what you are looking for and I will update the answer.
The detection of change occurs on change input event.
You can change your code to the following in order to use this calculated value:
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
var changed = $(this).serialize() != $(this).data('serialized');
$(this).find('input:submit, button:submit').prop('disabled', !changed);
// do anything with your changed
})
.find('input:submit, button:submit')
.prop('disabled', true)
It is good if you want to work with other divs. However, for styling, it is better to use CSS :disabled selector:
For example, in your CSS file:
[type='submit']:disabled {
color: #DDDDDD;
}
[type='submit']:disabled {
color: #CCCCCC;
}
Related
When navigating through inputs on the page using tab, they become outlined once in focus. But when I try to do something similar using, for example, arrow keys, focusing on checkboxes doesn't show outline styles.
jq(elems).keydown(function(e){
if(!e) return;
if(e.keyCode == '38') {
var el = ... // searching for the next element
el.focus();
}
Even if I manually add outline styles after focus, or add css like
input[type="checkbox"]:focus
{
outline-style:auto;
outline-color:
-webkit-focus-ring-color;
}
it wouldn't work. The focus is on the checkbox, the styles are there, but they are not displayed. Some other styles applied correctly, for example if I add styles like:
input[type="checkbox"]:focus {
box-shadow:1px 1px lightgrey;
}
I can see shadow box when focus is on the checkbox, but outline is not there.
I've only done this in raw js, but hopefully it helps:
Make sure to set the event listener on the document - otherwise you're only firing the event if the key is pressed whilst already 'inside' the element.
JS:
var el = document.getElementById('my-check');
document.addEventListener('keydown', function(e) {
e.preventDefault();
el.focus();
});
CSS:
input[type="checkbox"]:focus, input[type="checkbox"]:active {
width: 100px;
height: 100px;
outline-color: -webkit-focus-ring-color;
outline-style: solid !important;
}
DOM:
<form>
<input type="checkbox" id="my-check" />
</form>
Fiddle: https://jsfiddle.net/radmpxgs/1/
Sorry for the edits.
Here is the answer to the question, thanks to #CumminUp07
I've found this link to be helpful, except that I do not want the suggestions div to disappear after an element is selected in the suggestions div in order to select more suggestions later. I have tried to implement this strategy with the slideUp() and slideDown() jquery functions, but of course that is not as fast as the show() and hide() jquery functions, and trying to speed up the sliding functions ends up stopping the suggestions div from appearing again.
Here is a plunker of what I am currently stuck on:
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#suggestions').slideDown();
$('#search').focus();
});
#search,
#suggestions {
width: 200px;
}
#suggestions {
display: none;
border: 1px solid gray;
border-top: none;
}
#suggestions div:hover {
background-color: #99CCFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
<div>Toronto</div>
<div>Seattle</div>
<div>Dallas</div>
</div>
I do not believe this is a duplicate to Action on blur except when specific element clicked with jQuery, because the timeout does not work well enough for the functionality I desire, nor does it allow you to ensure I can click two different divs while keeping one of those two divs open until a different object in the document is selected.
You can stop the animation from completing and then just show the suggestions
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click( function() {
$('#suggestions').stop(true,true).show();
$('#search').focus();
$('#search').val($(this).html());
});
Maybe it will help you
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#search').blur();
});
https://jsfiddle.net/vc15r7qb/
I need something like a fill in the blanks sheet for children. When people click the ------ (dashes) it should turn into a textbox, and people can type it. after that when they move from that element after typing, it should turn into the text that they entered inside that text box.
I really dono how to approach this problem. I tried the following code, but what happens is, i am unable to type inside the text box. The cursor is not appearing at all
<html>
<head>
<title>NSP Automation</title>
<script src ="jquery.min.js">
</script>
</head>
<body>
<div class="container">
My Name is = <span id="name">__________<span>
</div>
<script>
$(document).on('click', '#name', function(){
document.getElementById("name").innerHTML = "<input type=\"text\">";
});
</script>
</body>
</html>
any pointers on how to achieve this ?
Thanks,
Since you've set the listener on the whole document, you will be recreating the input-tag with every click. Try something like:
$('#name').on('click', function(){
this.innerHTML = "<input type=\"text\">";
$('#name').off('click')
}
After clicking on the span-element, you remove the listener on it again, and you should be able to type.
http://jsfiddle.net/218rff9v/
Here is an example that generates the wished behaviour for all spans in your container. Some details can be improved but I think it's working as expected.
function convertSpanToInput() {
// Insert input after span
$('<input id="tmp_input">').insertAfter($(this));
$(this).hide(); // Hide span
$(this).next().focus();
$("#tmp_input").blur(function() {
// Set input value as span content
// when focus of input is lost.
// Also delete the input.
var value = $(this).val();
$(this).prev().show();
$(this).prev().html(value);
$(this).remove();
});
}
$(function() {
// Init all spans with a placeholder.
$(".container span").html("__________");
// Create click handler
$(".container span").click(convertSpanToInput);
});
Here is an html example with which you can test it:
<div class="container">
My Name is = <span></span>. I'm <span></span> years old.
</div>
JsFiddle: http://jsfiddle.net/4dyjaax9/
I'd suggest you have input boxes and don't do any converting
Simply use CSS to remove the borders and add a dashed border bottom
input[type=text]{
border:none;
border-bottom:1px dashed #777;
} <!-- something like that -->
add a click handler to add a edited class, so you can remove the bottom border
input[type=text].edited{
border:none;
}
That way you don't need to replace html elements, you just style them to look different
Why not use text input and only change CSS classes?
CSS:
.blurred{
border-style: none none solid none;
border-width: 0px 0px 1px 0px;
border-bottom-color: #000000;
padding: 0px;
}
.focused{
border: 1px solid #999999;
padding: 3px;
}
JavaScript:
$('#nameInput').focus(function(){
$(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
$(this).removeClass('focused').addClass('blurred');
});
HTML:
<div class="container">
My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>
Check this jsfiddle:
http://jsfiddle.net/gwrfwmw0/
http://jsfiddle.net/we6epdaL/2/
$(document).on('click', '#name', function(e){
if( $("#myText").is(e.target))
return;
$(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});
$(document).on("blur", "#name", function(){
$(this).html( $("#myText").val() );
});
I have a submit button in my code, and its disabled.. I need it to be enable when the user clicks on the " I agree" check box.. I need it to be in jQuery.. can anyone help me with it? I'm writing my code in html, javascript and jquery..
<input id="agree" type="checkbox" name="agree" >I agree to the terms of service...<br> <br />
<div align="center">
<button style=" color: white; background-color: gray; width: 100px; height: 30px" type="submit" disabled ><b><font color="black">Register</font></b></button>
</div>
When the state of the checkbox changes, set the disabled property of the button based on the checkboxes' current state:
$('#agree').on('change', function() {
$('button').prop('disabled', !this.checked);
});
If you have multiple buttons on the page, the above will set the disabled property on all of them. If you need to get the next button relative to #agree, you'd have to traverse a little bit:
$('~ div:first', this).find('button').prop('disabled', !this.checked);
$('~ div:first', this) will get the first occurrence of a div which comes after this (#agree)
Here's a fiddle
You can use:
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
or:
$('#agree').click(function() {
$(this).next().find('input[type="submit"]').prop('disabled',!this.checked);
});
$('input[type="submit"]').removeAttr('disabled');
$("#checkBoxID").click(function() {
$("#buttonID").attr("disabled", !this.checked);
});
so in your case
$("#agree").click(function() {
$("button").attr("disabled", !this.checked);
});
Demo
I know you want a JS solution, but just to show a different approach, you can actually accomplish something similar in pure CSS.
Note you should also avoid using the font tag, and move your CSS from inline to a stylesheet.
Demo Fiddle
HTML
<input id="agree" type="checkbox" name="agree">I agree to the terms of service...
<div>
<button>Register</button>
<div></div>
</div>
CSS
div {
position:relative;
text-align:center;
}
div div {
height:100%;
position:absolute;
top:0;
left:0;
width:100%;
}
button {
background:grey;
color:#c0c0c0;
}
input[type=checkbox]:checked + div div {
display:none;
}
input[type=checkbox]:checked + div button {
background:#c0c0c0;
color:black;
}
Do like this
$('#agree').change(function() {
$('button[type=submit]').prop('disabled', !this.checked);
});
Try this..Property of button changes when Checkbox state is changed...
$('#agree').click(function() {
$('input[type="submit"]').prop('disabled',!this.checked);
});
Demo Fiddle
I show a search field on some text click, and hide it on search input blur.
But if I click on the search button I don’t want to hide the input field, and prevent it from being hidden (because of the blur). I tried to stopImmediatePropagation() without any luck.
Here’s some code:
// Not working. when search button is pressed, disable hiding the search input
$('.search-contacts-container > button').on('click touchstart', function(e) {
alert('xxx');
e.stopImmediatePropagation();
})
// when search input is blurred, hide it
$('#search-contacts').on('blur', function() {
$('.search-contacts-container').addClass('visuallyhidden');
$('#search-contacts').attr('required', 'false').blur();
})
// when search input is focused, show it
$('#search-contacts').on('focus', function() {
$('.search-contacts-container').removeClass('visuallyhidden');
$('#search-contacts').attr('required', 'true');
})
// on search text click, show the search input
$('.js-show-search').on('click touchstart', function() {
if ($('.search-contacts-container').is('.visuallyhidden')) {
$('.search-contacts-container').removeClass('visuallyhidden');
$('#search-contacts').attr('required', 'true').focus();
} else {
$('.search-contacts-container').addClass('visuallyhidden');
$('#search-contacts').attr('required', 'false').blur();
}
})
HTML:
<span class="js-show-search" title="Search for contacts">Search</span>
<form action="search" method="post" class="form-search search-contacts-container visuallyhidden">
<input type="text" id="search-contacts" placeholder="Search" required="false" />
<button type="submit" class="form-search__button" title="Search"></button>
</form>
Demo: http://jsfiddle.net/un775/
Any ideas?
Check out my new JsFiddle. I use this method on day to day tasks. I hope it helps you.
Basically what you are doing is adding a background that masks everything behind it, and then adding a click even listener to it that hides everything. The form/input is in front of the background allowing you to interact with it.
HTML
<div id="js-show-search">...</div>
<form id="search-contacts" class="hide">...</form>
<div id="background" class="hide"></div>
JavaScript
var searchContact, background;
searchContact = $('#search-contacts');
background = $('#background');
$('#js-show-search').on('click', function(){
//remove .hide to show elements
});
$('#background.close').on('click', function(){
//add .hide to hide elements
});
CSS
html, body {
height: 100%;
}
#background {
height: 100%;
width: 100%;
position: absolute;
top:0;
left: 0;
z-index: 0;
}
#search-contacts {
position: relative;
z-index: 1;
display: inline-block;
}
.hide {
display: none!important;
}
http://jsfiddle.net/un775/7/