I don't know why I am struggling with this. Should I be taking a different approach?
I have a form being generated in vb based off a database and then I am trying simply to make a text-box be disabled unless you check a checkbox.
Here is what I have so far. It needs to be dynamic (what I have commented out).
I can't seem to get it to work. The difficult part is referencing
document.form1.el.id.toString() + "_other".disabled
disabled is a binary property, not an attrbute.
You must use disabled='disabled' or remove the attribute to enable the element. It is not a true/false value.
Here is one way:
http://jsfiddle.net/C2WaU/1/
If I understand you correct, this should work for you:
function enable_text(el) {
var textbox_name = el.id.toString() + "_other";
document.getElementById(textbox_name).disabled =
(el.checked) ? "" : "disabled";
}
A working example: http://jsfiddle.net/ve9Gz/3/
Related
I have a bunch of HTML number inputs, and I have grabbed them by
x=document.querySelectorAll('input[type="number"]');
I then try and iterate through this with a for-loop, and apply an onkeyup function. The function is this:
t=function(elem){
elem.onkeyup=function(e) {
if(!/[\d\.]/.test(String.fromCharCode(e.which))) {
elem.value='';
}
};
};
Basically, what it does is clear the value of the input if there is a letter typed in. I know I can apply it via HTML:
<input type='number' onkeyup='t(this)'/>
But how can I do it with Javascript? I tried iterating through it with:
x=document.querySelectorAll('input[type="number"]');
for(i=0; i<x.length; i++){
x[i].onkeyup=t(this);
}
but it doesn't work. What am I doing wrong? How can I do this? Please regular JavaScript answers only, no jQuery or other frameworks/libraries.
change
x[i].onkeyup=t(this);
to
x[i].onkeyup=t(x[i]);
because this isn't what you want it to be
Apologies, all. I found my answer. Agreeing with Jaromanda X, I needed to change
x[i].onkeyup=t(this);
to
x[i].onkeyup=t(x[i]);
This (pun intended ;)was part of the problem, but the main problem was that the valid property name is
keyup=function();
and not
onkeyup=function(){}'
I am writing a Greasemonkey script and I need to be able to take the value from a hidden form element and set it to a variable.
The hidden form value looks like this:
<input type="hidden" name="ASIN" value="B009MO89Y4" />
I have no ID, class, or any way I can see to set the "value" to a variable. This needs to work dynamically and I currently have no way to establish a class or ID to this value.
Is there a Javascript (or jQuery) method to set this?
In other words:
Find "input" with name "ASIN" and set .val() to a variable?
This selector and assignment:
$("input[name='ASIN']").val(); <---- returns value of that input
var inputVal = $("input[name='ASIN']").val(); <-- Assigns it
var temp = "Stuff";
$("input[name='ASIN']").val(temp); <----Assigns the value of the temp var.
You can use the jQuery attribute equals selector
$('input[name="ASIN"]').val(foo);
You can select it via. name in jQuery like so:
var bar = "Example"; // Example text, to be used in val().
var x = $('input[name="ASIN"]').val(bar);
// Sets the variable x to be the value bar for the input with the name ASIN.
Here's a working jQuery jsFiddle.
In pure Javascript *:
var bar = "Example";
document.getElementsByName("ASIN")[0].value = bar;
Here's a working Javascript jsFiddle.
*Please note that although document.getElementsByName is supported well in Firefox, Chrome and Safari, it has limited browser support. in IE and Opera.
Like this:
$('input[name="ASIN"]').val();
Var:
var hiddenAsin = $('input[name="ASIN"]').val();
You can filter your selection with any attribute.
$('input[name=ASIN]').val("New Value")
You can use selector that targets inputs of type hidden. It should look like that:
$('input[type=hidden]');
or simpler:
$(':hidden');
Use this method
var inputs = document.getElementsByTagName('input');
for(var i = 0...)
{
//go through each input and look for the name "ANSI" and the type is hidden.
//and do your changes.
}
this is for javascript remember.
with this you should be able to get that specific hidden form without an ID nor a Class assigned to that specific form.
For pure javascript:
Try document.getElementsByName('name').
Note that cmptrgeekken pointed out that this has limited browser-support (although that would not be an issue with greasemonkey in FF).
As an alternative, if that hidden element has a fixed place you could also access it by index-number in a predictable collection that you got from knownParent.getElementsByTagName('tag')[#] (So the first hidden inputtag inside a form would be number 0).
Another variation is to get (again) knownParent.getElementsByTagName('tag') and loop over that collection to see what element has the 'name' attribute set that you seek.
Simply do:
var target=knownParent.getElementsByTagName('input'), L=target.length;
while(L--){ if(target[L].name==='name'){target=target[L]; break;} }
alert(target.value); //target is now the element you seek.
Example fiddle here.
Good luck!
Ok. No one is listening to me, so I'm going to try rephrasing the question by showing you WORKING CODE that does what I want, but not in the way that I want.
NOTE: I am not asking how to do this. I am asking more like...what's the best way...
// First I need the proper value
$select.find("option:selected").prop("selected", false);
$select.find("option:first").prop("selected", true);
// Now I need the event to fire
$select.trigger("change");
I'd like to do this in one line though...like the last line of code on this question.
Please don't tell me anything that you would expect someone that's been doing front end stuff for 10 years to know.
ORIGINAL - DONT ANSWER BASED ON THE BELOW
Doesn't really have to be jQuery, but I'm using it so it might as well be.
Basically, what I'd like to do is say
var $option = $select.find("option:first");
$option.trigger("click");
But that doesn't really work. I mean, it sort of does, but it doesn't seem to also fire the change event on the select...so I'm thinking I should actually be doing something more like...
$select.triggerEvent(new Event({
type : "change",
target : $option
});
But that can't be right.
Use .val() to change the value of a select dropdown:
$select.val($select.find('option:first').val());
You can use the .attr method
var $option = $select.find("option:first");
$option.attr('selected', true);
OR use the .val() for the select
var $option = $select.find("option:first").val();
$select.val($option);
You can use the prop() jQuery method as follows :
$select.find('option:first').prop('selected',true);
This is semantically the right way to set an option as selected, it's also seems to be right way to set properties in jQuery since 1.6.
If you are using jQuery prior to 1.6, you should do that instead :
$select.find('option:first').attr('selected',true);
If you need to trigger the change event on your select, you can do this :
$select.find('option:first').prop('selected',true);
$select.change();
Here is a working example
If you need to do it one line, you can extend jQuery in some ways (not tested code) :
;(function($){
$.fn.changeToOption = function(n) {
var option;
option = this.find('option').eq(n);
if (option.prop('selected',true)) {
this.change();
}
return this;
}
})(jQuery)
and then simply :
$select.changeToOption(0);
I have a loop for my input checkboxes (see below).
<cfloop query="qGetCBList">
<input name="#qGetCBList.CheckBox#" type="checkbox" id="#qGetCBList.CheckBox#"onclick="CheckBoxSelect('#qGetCBList.CBNum#','#qGetCBList.CheckBox#','#qGetCBList.RecordCount#');"> #qGetCBList.CBDesc#
<br /><br />
</cfloop>
and my javascript function is,
<script language="JavaScript">
CheckBoxSelect = function(CB,cbID,rCnt){
var myVar_CB=CB;
var myVar_CB_ID=cbID;
var myVar_RCNT=rCnt;
if(myVar_CB == 2) //"Chemical(s)........."
{
for(i=1;i<=myVar_RCNT;i++){
var myVar_CB_ID_FMT="cb"+i; //check box ID format
if(i!=2){
//alert(myVar_CB_ID_FMT);
document.getElementById("myVar_CB_ID_FMT").disabled=true;
}
}
}
else{
alert('good to go');
}
}
</script>
what's happening here is, if the selected checkbox is 2 (which is the CBNum), then I want all other checkboxes to be disabled.
P.S. This is the bind page of the main page. When I un-comment my alert tag, it gives me the correct CBNums, but the disabling is not working. If it any useful I'm using CF8.
Feedbacks and/or alternate methods are appreciated. Thank you.
I know nothing about ColdFusion but the basic JavaScript tips you can use are:
Check the return value of document.getElementById(); don't assume it'll always return a node you can disable.
Most browsers have a built-in or downloadable debugger that allows you to inspect variables. Use that instead of plain alerts. E.g.:
console.log(myVar_CB_ID_FMTT, document.getElementById(myVar_CB_ID_FMT));
getElementById("myVar_CB_ID_FMT") is looking for an element called myVar_CB_ID_FMT. Does that element exist? No. Your variable myVar_CB_ID_FMT is not going to be evaluated as getElementById just sees it as the string "myVar_CB_ID_FMT".
Try document.getElementById("cb"+i)
The id in getElementById(id) is case sensitive so ensure that "cb"+i exists.
#Barry Jordan answer kinda woke me up and I was error checking along the line #Álvaro G. Vicario mentioned, I then finally figured out what's going on.
In my loop when I trim my id value ...id="#trim(qGetCBList.CheckBox)#"... it works.
of course it had be something simple stupid and my fault.
Thanks guys for support, you all rock.
The idea: I'm setting the value of an input with type="hidden" via regular Javascript or jQuery.
The issue: neither jQuery nor document.getElementById will find the hidden input, even though I'm absolutely sure the selector is correct and there are no conflicting elements.
The code:
I can't really post much of it, because it's full of rather complicated PHP that confuses me when I just look at it.
Here's the javascript:
$("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total);
Note: there's nothing wrong with the selector, and the "input" is a different element that I'm using to reference the hidden.
Here's the HTML:
<input type="hidden" name="s<?=$step_counter?>_budget_hidden"
id="s<?=$step_counter?>_budget_hidden" value="0" />
The code is kind of out of context, but it's more of a general problem with Javascript than a syntactical error. Thoughts?
In $("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total); you take two chars before the first underscore in your hidden id. However your hidden id have only one char 's'
EDIT
Ok the <?= ?> was hidden before the question edit.
Do you call your script after the body onload event?
EX:
$(document).ready(function(){
$("#" + input.id.substr(0,2) + "_budget_hidden").bind("keyPressed",function(){
$("#" + input.id.substr(0,2) + "_budget_hidden").val(budg_total);
}
});
FYI: We can get the hidden input value using jQuery, even we can also edit any hidden input value using jQuery.
I think your way of getting the hidden value using 'substr' method is causing some problem. You are using like substr(0, 2) so are sure that the variable $step_variable is a single digit number, otherwise your code will not return correct result.
I am giving some sample code below, check it once.
Here's the javascript:
var input_id = $("hidden_val").attr("id").substr(1);
$("#" + input_id + "_budget_hidden").val(budg_total);
Here's the HTML:
input type="hidden" class="hidden_val" name="s_budget_hidden" id="s" value="0"
I think this will help you. Let me know if you are not following this flow to solve your issue.
I think that input.id.substr(0,2) says to start at the start of the string, take 2 characters and use that.
http://www.w3schools.com/jsref/jsref_substr.asp
Try using Firebug to see what the result of that method call is.