Short syntax for multiple selectors of one HTML element - javascript

I have the following code:
<form id="form">
<input type="checkbox" name="foo" />
<input type="checkbox" name="bar" />
</form>
<form>
<input type="checkbox" name="foo">
<input type="checkbox" name="bar">
</form>
And this jQuery:
$(document).ready(function(){
$('#form input[name=foo], input[name=bar]').change(function (){
alert('foo');
});
});
Now, if I check #form foo, 'foo' will be displayed. This happens not if I check the other checkbox "foo", but by both 'bar' checkboxes.
What I want is, that only the action will be recognized that was taken in the form with the id 'form'. I can do that by modifying this line to:
$('#form input[name=foo], #form input[name=bar]').change(function (){
I was just wondering if there is a 'short' syntax possibility?
Best regards

If I were you, I would assign the same class for them and apply the jquery for that class like this:
$('#form .classname').change(function (){
alert('foo');
});

Well, not really shorter, but you can avoid using #form twice by doing:
$('#form').find('input[name=foo], input[name=bar]').change(function () {
Slightly shorter:
$('#form input').filter('[name=foo], [name=bar]').change(function () {

You can use select the #form and then use find on the element:
Example:
$(document).ready(function () {
$('#form').find('input[name=foo], input[name=bar]').change(function () {
alert('foo');
});
});
Fiddler: http://jsfiddle.net/5LH7G/
Documentation find:
Get the descendants of each element in the current set of matched
elements, filtered by a selector, jQuery object, or element.

You can use selector by attribute value :
$('form [name=foo], form [name=bar]').change(function (){
alert('foo');
});

Related

How do I reverse the process of the following form element disabling function

I am trying to achieve the reverse of the following form function. This is working in the reverse to how I want it to function. I would like to have the form elements disabled by default and then enabled when the "clicker" is pressed. I am experimenting with the following code without success. I have no problems with the HTML, my problem is getting the script to function the way that I want it to.
SAMPLE HTML FORM ELEMENTS
<input type='text'></input>
<input type='text'></input>
<input type='text'></input>
<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>
This is the JavaScript I am trying:
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
Should use prop() not attr() for disabled.
You can also use prop(propertyName, fn) to create the loop and isolate instances
$(function () {
inputs_toggle_disable();//disable on page load, assumes none have disabled in markup
$('button').click(inputs_toggle_disable);
});
function inputs_toggle_disable() {
$('input').prop('disabled', function () {
return !this.disabled
});
}
DEMO
It looks like you're missing the disabled attribute from your HTML inputs, simply add the attribute as shown below:
<input type='text' disabled />
<input type='text' disabled />
<input type='text' disabled />
Your clicker button then will remove this attribute (See JSFiddle).
http://jsfiddle.net/xredrdur/

Hide div when input has an assigned value

I'm trying to hide a div when the value = 10
Here is the code and demo working fine:
<script>
$('input[name=test]').keyup(function(){
if($(this).val()<10)
$('#yeah').show();
else
$('#yeah').hide();
});
</script>
<label>Type whatever</label>
<input type="text" name="test"value="10" />
<div id="yeah" style="display:none;">
<input type="submit" />
</div>
But I'm trying to convert that code into Prototype code and I tried this code:
Event.observe(window, 'load', function () {
$('input[name=test]').keyup(function(){
if($(this).val()<10)
$('#yeah').show();
else
$('#yeah').hide();
});
});
I only want to hide the div when input value = 10 into prototype code.
Please somebody can help me?
Give the textbox an ID. For example:
<input type="text" id="txtbox" name="test" value="10" />
Change:
<div id="yeah" style="display:inline;">
To:
<div id="yeah" style="display:none;">
You need to use the $$ function which returns an array.
Event.observe('txtbox', 'keyup', function () {
if ($$('input[name="test"]')[0].value < 10){
$$('#yeah')[0].show();
}
else{
$$('#yeah')[0].hide();
}
});
Note: You could also use .first() instead of [0]
JSFiddle
you have a issue with prototype lib,
the Event.observe function is never triggered, secondly, you seem to still using the jquery api
$().keyup()
and you only load the prototype function.
Now days people rarely uses prototype, people use jquery for dom and underscore/lodash for iterations.

Toggle Disabled attribute and show/hide at same time in jQuery

I'm trying to use jQuery.Validate on a multi-part form that requires showing and hiding some content and disabling the inputs that are not in view. Basically, if the user clicks on the button to toggle the additional input, it then shows so that they can enter data. But until it shows I need to keep it disabled so that jquery.validate will ignore it. Thus far I found a simple script that will toggle the disabled attribute and I can show/hide the input as needed but I need them to work together. Is there a simple way to have the input show/hide while toggling the attribute as well?
Here is a fiddle that shows what I have right now and it works but I have to click the #toggleDisabled button twice the first time:
JS Fiddle
Here is the function logic I am using:
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled').show();
else $this.attr('disabled', 'disabled').hide();
});
};
})(jQuery);
$(function() {
$('#toggleButton').click(function() {
$('#toggleInput').toggleDisabled();
});
});
And here is the simple HTML:
<form id="myform">
<input type="text" name="field1" /> <br/>
<br /> <input type="text" id="toggleInput" name="toggleInputName" style="display:none" />
<input type="button" id="toggleButton" value="Toggle Disabled" />
<input type="submit" />
</form>
Use .prop() instead of .attr()
$.fn.toggleDisabled = function () {
return this.each(function () {
var $this = $(this);
if ($this.prop('disabled')) {
$this.prop('disabled', false).show();
} else {
$this.prop('disabled', true).hide();
}
});
};
DEMO, You can try shorter form here
Also go through .prop() vs .attr()

jQuery each field inside parent

I'm trying to build a common clear fields button that has the following html structure:
<td colspan="2">
<input type="text" name="unpublish_date" id="unpublish_date" class="calendar" />
<img class="clear_date" src="ico_delete.gif" title="Reset date field"></span>
<input type="hidden" name="_unpublish_date" id="_unpublish_date" />
</td>
So I though that the right way to do the function is by working with the inputs, inside the parent of .clear_date
What I would like to know is how to select each input after $(this).parent
$('.clear_date').click(function(){
$(this).parent().each() ... ?
});
Just use .siblings with a filter:
$(this).siblings('input').each()...;
You can use this:
$(this).parent().find("input").each(function(){
$(this).val("");
});
Try this:
$(this).parent().find('input').each() ...
See jQerty .find()
$('.clear_date').click(function(){
$(this).siblings().each(function() {
$(this).val("");
});
});
$('input', $('.clear_dates').parent()).each(function
{
...
});
or
$('.clear_dates').parent().find('input').each(function
{
...
});
You can of course replace $('.clear_dates') with $(this) so:
$('input', $(this).parent()).each(function
{
...
});
or
$(this).parent().find('input').each(function
{
...
});

jQuery adding HTML element using before()

Here's my code:
$(document).on("click", "#add", function() {
console.log("clicked");
$(this).before('<lable>'+ current +'.</label><input type="text", id="option"><br>');
current = nextChar(current);
var string = $("label:last").text();
console.log(string);
});
using this, I'm trying to add some HTML element. But the behavior isn't exactly what I want it to be. The result should be something like
<lable>c.</lable>
<input type="text", id="option">
<br>
but everything is wrapped inside of lable and shows
<lable>c.<input type="text", id="option">
<br></lable>
I don't know why this is happening.
Put your element in a div with a certain id like myid
HTML:
<div id='myid'>
<input type="text" id="option">
</div>
JQUERY:
$(document).on("click", "#add", function() {
$('#myid').prepend('<lable>'+ current +'.</label>')
});

Categories