on my site is a form which has multiple checkboxes with the same name:
<span class="selection"><input type="checkbox" name="product" value="Hard Enamel" />Hard Enamel</span>
<span class="selection"><input type="checkbox" name="product" value="Soft Enamel" />Soft Enamel</span>
<span class="selection"><input type="checkbox" name="product" value="Metal Relief" />Metal Relief</span>
<span class="selection"><input type="checkbox" name="product" value="Printed With Epoxy" />Printed With Epoxy</span>
In my Javascript, I assign these to a variable and have an onclick function using JQuery. With this I can still run JQuery functions no problem, e.g. products.css("display","none") works.
But when trying to select a particular checkbox within products it hits back with an error.
Here is my JS:
var products = $("input[name=product]").click(function(){selectProduct()});
products.get(0).css("display","none");
The above doesn't work, and I get the error badges_calc.js:9TypeError: 'undefined' is not a function (evaluating 'products.get(0).css("display","none")')
How can I fix this? I'm rather beginner.
Cheers
get() returns DOM element try use eq instead. DOM element does not have css method it is the jquery Object that has it. eq(0) will give you the first element in the collection as a jquery object.
products.eq(0).css("display","none");
And if you are really looking to hide the span along with the check box then use:
products.eq(0).closest('span').css("display","none");
otherwise it will leave the span with the text there itself, by just hiding the checkbox.
.get() returns a raw DOM object.
You want .eq(0), which returns a jQuery object with only one element.
Try this:
var products = $("input[name=product]");
products.click(function(){selectProduct()});
products.eq(0).css("display","none");
When you use .get() you will get a raw DOM element and cannot use jQuery's methods, so you cannot use .css()
Use closest or parent to hide the selected input's parent.
var products = $("input[name=product]").click(function(){selectProduct(this)});
var items = [];
function selectProduct(self){
$(self).closest('span').hide('slow');
items.push($(self).val());
console.log(items);
}
Related
I'm trying to use a custom javascript plugin to change a label from another plugin but not being able to do it.
<li class="birs_form_field birs_client_name_last">
<label>Sobrenome</label><div class="birs_field_content">
<input id="birs_client_name_last" name="birs_client_name_last" type="text">
<input type="hidden" name="birs_client_fields[]"
value="_birs_client_name_last"></div><div class="birs_error"
id="birs_client_name_last_error"></div></li>
I just want to change the label "Sobronome" to "Empresa". The following code did not work.
window.onload = function(){
document.getElementsByClassName('birs_form_field birs_client_name_last').innerHTML = 'Empresa';
}
I've also tryied with innerText and value.
Any ideas?
You are currently doing the following wrong:
getElementsByClassName does return a NodeList not a single element. A nodelist is a collection of elements and therefore does not have a innerText property. Here is one way you could fix it:
const label = document.querySelector('.label');
label.innerText = 'Empresa';
<label class="label">Sobrenome</label>
Add a class or something to select the element with to the label
Change the innertext property.
<select class="tmcp-field tillagg-width tm-epo-field tmcp-select"
name="tmcp_select_30"
data-price=""
data-rules=""
data-original-rules=""
id="tmcp_select_75"
tabindex="75">
<option value="5 (480 mm)_0" etc.......
To get value of this element, currently I am using this piece of code:
document.getElementById("tmcp_select_75").value
It works well, but how can I get value of element using "tmcp-field tillagg-width tm-epo-field tmcp-select" seen it top row of first code sample? Thanks :)
Use querySelector() or querySelectorAll() or getElementsByClassName()
// Gets the first match's
document.querySelector(".tmcp-field.tillagg-width.tm-epo-field.tmcp-select")
// Gets a collection of the selects;
document.querySelectorAll(".tmcp-field.tillagg-width.tm-epo-field.tmcp-select")
// Gets a collection of the selects;
document.getElementsByClassName("tmcp-field tillagg-width tm-epo-field tmcp-select")
jQuery
$(".tmcp-field.tillagg-width.tm-epo-field.tmcp-select")
You don't need jQuery for this. If I'm reading you right, you want to select the element using its class instead of by ID, as you're doing right now. Use document.querySelector:
document.querySelector('.tmcp-field.tillagg-width.tm-epo-field.tmcp-select');
You probably don't need to select for all of those classes, so remove any that you don't need to narrow down the result.
I am cloning some form elements and want to generate for them dynamic ids so I can acces their content later on, but I don't really know how to do that, I'm a noob with Jquery/Javascript, by the way.
My html:
<tr>
<td>
<label for="ability">Ability</label><br>
<div id="rank_ability" name="rank_ability">
<select name="ability" id="ability">
<option value=""></option>
<option value="hexa">Test</option>
</select><br>
<label for="range_ability_min">Range:</label>
<input type="textbox" name="range_ability_min" id="range_ability_min" class="small_text" value="0" /> -
<input type="textbox" mame="range_ability_max" id="range_ability_max" class="small_text" value="0" /><br>
</div>
Add Ability<br><br>
</td>
</tr>
My JS:
$(document).ready(function () {
var element, ele_nr, new_id;
$('.rank_clone').click( function() {
element = $(this).prev();
ele_nr = $('div[name="'+element.attr('name')+'"]').length;
new_id = element.attr('name') + ele_nr;
element.clone().attr('id', new_id).attr('name', new_id).insertAfter(element);
});
});
I setup a jsfiddle with what I got here: http://jsfiddle.net/xjoo4q96/
Now, I am using .prev() to select the element to clone which leads to those repeated 1 in the id/name attributes, how could I select it in another way (to mention: I really need to use 'this' because I need this little script in like 3 places, so I don't want to write it for an element with a specific id/class).
Also, I am counting only the element with the base name attribute so .lenght yelds 1 all the time, how would I go around counting all of them ? I guess I have to place them in another div or something but I don't know how would I go around couting them even then.
And, at last, how would I go around changing all the name/id attributes of the elements I have in the div ?
I'd appreciate any help. Thanks.
you can put the template in a hidden div like #tmpl, then clone and set the id attr, e.g.
$('#tmpl').children().first().clone().appendTo('#target').attr('id', 'the_generated_id');
Update
Demo of the template way: http://jsfiddle.net/xjoo4q96/1/, though it would be quite easy to adjust the code to clone the first component that already existed.
BTW, principally, id should be unique, thus the sub-element in the cloned component should use other attribute, like class or certain data- attribute, like those used in the updated fiddle.
Also you might want to call event.preventDefault() as you're clicking an <a>
You are searching already with the wrong name, since it still has the number attached. So delete it first, search for element which have a name attribute starting with this name and then use this base name to create a new one.
$(document).ready(function () {
var element, ele_nr, new_id, base_name;
$('.rank_clone').click( function() {
element = $(this).prev();
base_name = element.attr('name').replace(/[0-9]/g, '');
ele_nr = $('div[name^="'+base_name+'"]').length;
new_id = base_name + ele_nr;
element.clone().attr('id', new_id).attr('name', new_id).insertAfter(element);
});
});
And to answer your last question: you can not go around changing all ids of inner elements, it would be invalid HTML. In principal you can do the same with every id, like adding a number. If you have to do the same with all the name attributes depends on what you want to do exactly. If you have to distinguish between the first and second input, which I suggest, you have to change them too.
try to use cloneJs, it's clone ids, names input, and parametre inside functions ids of input must be like id_foo_1, id_foo_2 ,,,, and name be like inputName[0][foo], inputName[1][foo] https://github.com/yagami271/clonejs
I have been searching for the solution for this for a while so I hope I can get some help now. I am attempting to figure out whether a programmatically added checkbox is checked using jquery. The HTML code of the checkbox is below:
<td>
<input type="checkbox" name='ismanual' id='ismanual' class="checkbox">
</td>
And I am doing it using the following jquery code:
var ismanual = document.getElementById("ismanual").val();
I have attempted using #ismanual as the selector, but that didn't help. Any idea where I have gone wrong?
If you're using document.getElementById("ismanual") you should use .checked instead of .val()...
var ismanual = document.getElementById("ismanual").checked;
For jQuery use...
var ismanual = $("#ismanual").is(':checked')
Where you have gone wrong: if you want to use val(), you need to use it on a jQuery object. getElementById() gives you a DOM element but not a jQuery object. To get a jQuery object you need to find the element using a jQuery selector like this:
jQuery('#ismanual')
You can then use jQuery's :checked selector and the .is() function on that object:
var isManual = jQuery('#ismanual').is(':checked');
.val() is a jQuery function. It will not work with DOM style element selection.
To get value using .getElementById(), you must use .checked like,
var ismanual = document.getElementById("ismanual").checked;
.val() will work when you are selecting the element using jQuery like,
$("#ismanual").val();
I have a javascript program to filter a list of things in a HTML select control by typing a regular expression into an input (text) box. I can do the following to correctly filter a specific select control:
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist(document.myform.myselect);
filter.set(this.value);
});
});
but I have used a custom attribute (something one can now do in HTML5) called data-filterable. The attribute will store the name of the select control that is to be filtered so that JS can use the name of the control to filter the list. This would be a good idea because I will have a general function to filter any select box rather than a specific one.
Any ideas how I do this? I need something like this in the HTML:
<input data-filterable='{"to":"#selectbox1"}' size="30" type="text" />
but I'm not sure exactly what I'm doing here and what to do with the JS.
Thanks guys :).
Try this:
<input data-filterable="#selectbox1" size="30" type="text" />
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist($($(this).data('filterable'))[0]);
filter.set(this.value);
});
});
To break down the expression $($(this).data('filterable'))[0]:
$(this) wraps this in a jQuery wrapper. In our context, since it's a jQuery keyup event handler, this references the <input> DOM node.
$(this).data('filterable') retrieves the contents of the data-filterable attribute as a string. In our case, it's #selectbox1.
After that this string gets passed in to jQuery as a selector: $($(this).data('filterable')).
Finally, we take the 0'th element of the returned array which should be the DOM element of the target selectbox. Of course, if there isn't a selectbox which fits the selector this will fail rather miserably. If you suspect that this is a real scenario, check the .length of the returned array first.