This question already has answers here:
jQuery selector for inputs with square brackets in the name attribute
(5 answers)
Closed 1 year ago.
I want to add a focusout function to this html array.
Array:
echo '<td><input name="codemf[]" type="text" id ="codemf'.$indexofid.'" class="form-control form-control-sm" required></td>';
Focusout function:
$('#codemf[]').focusout(function ()
{
if ($('#codemf[]').val() !== '')
{
$.get("req.php?mf=", function (data)
{
var is=0;
var info = data.split('|');
for(let i=0;i<info.length;++i)
{
if($('#codemf[]').val()==info[i])
{
is=1;
}
}
if(is==0)
{
$('#codemf[]').addClass("is-invalid");
$('#command').attr('disabled', true);
} else {
$('#codemf[]').removeClass("is-invalid");
$('#command').attr('disabled', false);
}
});
}
else
{
$('#codemf[]').removeClass("is-invalid");
$('#command').attr('disabled', false);
}
});
I tried a lot of things but nothing works...
If anyone has an idea, it would save me.
What you are using is an id selector $('#codemf[]').
You can attach a class to all input tags that you want to have the focusout event and just use the $(this) selector to select the current element.
<input name="codemf[]" type="text" class="some-class form-control form-control-sm" required>
$(".some-class").focusout(function(){
// do something here
// like $(this).addClass("another-class");
});
Note that you'd have to delegate the event for it to work on dynamically added elements, so you'd have to use on().
$(".some-class").on("focusout", function(){
// do something here
// like $(this).addClass("another-class");
});
I might be bad on few things so take care of what I'm saying.
!-----
this is probably your problem:
the $('#..') of Jquery take care of the ID, not the name of the element
(selector of jquery work like CSS one # for ID, for class, nothing for tag)
or as the last guy said, you can select by attribute ---
$('input[name="..."]')
!----
if the id needs to be dynamic for any reason, you can add a listener on a class and get the id of the focus out element with this.id
depending on what you want you can use focus out or blur (not a mistake, just in case of a problem)
name case: I am not sure about '[]' in name propriety, most of the time I use only camel case letters and no special chars
Related
I have a dropdown menu, that when a value is chosen it hides/ shows fields, because of the php code behind it I need to use class to choose it.
I was also wondering if theres a way to add back the padding when hiding and showing the fields.
I tried using "document.getElementsByClassName("className");" But couldn't get it working.
HTML:
<select id="form" onchange="ChangeDropdowns(this.value);">
<option value="hide">hide</option>
<option value="show">show</option>
</select>
<input type="text" id="testField" class="testField" />
Javascript:
function ChangeDropdowns(value) {
if (value == "show") {
document.getElementById('testField').style.display = 'none';
} else if (value == "hide") {
document.getElementById('testField').style.display = 'block';
}
}
You are using the querySelectorAll function wrong, it returns an array of elements, if you want a single element use querySelector which in this case it looks like thats what you want.
HTML
<input type="text" id="testField" class="testField2"/>
JS
//Uses class, a period needs to be before the class name, when selecting by class
document.querySelector(".testField2").style.display='none';
//Uses id, a # needs to be before the id name, when selecting by id
document.querySelector("#testField").style.display='none';
When using querySelectorAll it will return an array, so you have to access it as such
var elements = document.querySelectorAll(".testField");
elements[0].style.display='none';
Your fiddle had a couple errors:
Function name in onchange didnt match the actual function name
you had onLoad selected for the wrap, which was making it so the function wasnt being declared in the global scope.
You werent using the proper css selector, classes have . prefixed to the name, ids have # prefixed, when no period or # before the name, the name is looked up as an element tagname
The following code should enable the second select element (id=ANSWER.TTQ.MENSYS.8.) when the value in the first select element (id=ANSWER.TTQ.MENSYS.9.) changes, but it doesn't work and I've exhausted all the options I can think of, including those suggested already on this site. (NOTE: the element ids must be these values, hence I'm not using # to select them, as that doesn't work).
$(document).ready(function() {
$("input[id='ANSWER.TTQ.MENSYS.9.']").bind('change',function() {
alert ('this script runs');
$("input[id='ANSWER.TTQ.MENSYS.8.']").removeAttr('disabled');
});
});
If I substitute the enabled select (id=ANSWER.TTQ.MENSYS.9.) with a button and the change event with a click event; it works. So why not with change event on the select element?
Thank you for your help.
Firstly, you can select by id using the # character. Secondly you need to escape the . in the id attribute otherwise the selector engine will look for an element with the id ANSWER which also has TTQ, MENSYS and 9 as classes. Try this:
$("#ANSWER\\.TTQ\\.MENSYS\\.9\\.").bind('change', function () {
alert('this script runs');
$("#ANSWER\\.TTQ\\.MENSYS\\.8\\.").removeAttr('disabled');
});
Example fiddle
$(document).ready(function() {
$("#ANSWER.TTQ.MENSYS.9.").bind('change',function() {
alert ('this script runs');
$("#ANSWER.TTQ.MENSYS.8.").removeAttr('disabled');
});
});
select is not input( i.e. text input)
I'm trying to make a change event trigger for several objects in the DOM. Let me show you; I have this code
$(document).ready(function() {
$(".select_something").change(function() {
if (!($(".select_something option[value='0']").attr("selected"))) {
$(".write_something").css('display','');
}
else
{
$(".write_something").css('display','none');
}
});
});
And with this I have several selectors/dropdowns all of which is called .select_something. When the option is not the default value (which is 0), it should show a <textarea></textarea> appear, again all of which is called .write_something.
All in all it's a quite simplistic function.
The problem I'm experiencing is that this only affects the very first .select_something, .write_something pair, and the rest is unaffected.
I've tried mixing around with .find(), .parent() and .children() to see if it could stick, but it don't.
How can I make it so all of my .select_something, .write_somethingpairs get changed when triggered?
Edit: The IDs was supposed to be classes, of course.
#select_something
Is an id. IDs must be unique over your entire page. If you have multiple elements with this same id, that's fundamentally wrong (and will cause you massive problems).
Having said that, the fix is easy: change those ids to css classes.
<select id="select_something">
becomes
<select class="select_something">
Then you could select against the css class, but of course you'll have to select the : write_something element relative to the current select. Something like this might work depending on your structure:
$(".select_something").change(function() {
if (!($("option[value='0']", this).attr("selected"))) {
$(this).siblings(".write_something").css('display','');
}
else
{
$(this).siblings(".write_something").css('display','none');
}
});
You should be using a common class for the multiple objects, not a common ID.
The ID attribute is used to IDentify a single item. The CLASS attribute is used to define that an item is part of a group of items, all which have the same class name.
Use the class name selectObject on all of them, and then..
$(document).ready(function() {
$(".selectObject").change(function() {
//inside of an event, $(this) refers to the object that triggers the event,
//in this case, the item that was clicked.
if (!($(this).val()==0)) {
...
}
else
{
...
}
});
});
Here is something for illustration.
http://jsfiddle.net/FxLSR/1/
As mentioned in other answers and comments, only use an ID for unique elements, use a class for multiple elements.
This is how I would setup my code:
HTML:
<div>
<select class="select_something"> ... </select>
<textarea class="write_something"> ...</textarea>
</div>
<div>
<select class="select_something"> ... </select>
<textarea class="write_something"> ...</textarea>
</div>
etc...
Javascript:
$(document).ready(function() {
$(".select_something").change(function() {
if (!($(this).val() == "0") {
$(this).next().show();
}
else
{
$(this).next().hide();
}
});
});
If the elements can't be placed next to each other as in the example HTML code I have given, then just make sure to select the textarea using some sort of relative selector such that you're not selecting all of the text areas. For example, if the two are siblings but they're not next to each other use: $(this).siblings(".write_something")
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.
Is it possible to append something to a div that was already appended? I tried but nothing happens.. (I'm not using linebreaks in the actual js)
$(document).ready(function() {
$('.add_text_input').click(function() {
$('li').append('<div class="input_label">Untitled</div>\
<div class="edit_label"></div>\
<input type="text" name="untitled" /><br />');
});
$('.input_label').click(function() {
var input_label = $(this).html();
$(this).hide();
$('.edit_label').append('<input type="text" name="untitled" value="' + input_label + '"/><br />');
});
});
The js is for creating text inputs and editing their labels. When clicking on the "input_label" div, it should hide using hide() and append a text input with the default "untitled" value in the "edit_label" div. It works if the divs already exist but I need to make it work via append.
Does anyone have any ideas please?
You just need to use a .live() handler here, like this:
$('.input_label').live('click', function() {
var input_label = $(this).html();
$(this).hide().next('.edit_label')
.append('<input type="text" name="untitled" value="' + input_label + '"/><br />');
});
This will work on elements regardless of when they're created, since it works off event bubbling, it'll work on any element's click event that matches the .input_label selector.
Currently with .click() it's finding all the elements that exist at document.ready time and binding to those elements, not to the selector, so it won't work for dynamically added elements.