I have several images with the class "red".
When the user clicks on any of them, a form field with the Id of "red" should be incremented.
I'm trying to write this in a way that is easy to re-use.
I can't figure out if there is a way of incrementing the form field value without using a global variable. Simply writing
$(#red).val(++);
doesn't do anything.
If I first declare a global variable like
var redAmount;
$(#red).val(redAmount++);
it works, but I don't like the idea of having to type the color + Amount each time I re-use this for other colors.
Which made me try to form the variable name dynamically like
var redAmount;
var currentColor = $(obj).attr("class"); //getting the class of the clicked element
$('#' + currentColor).val(currentColor+'Amount'++); //trying to form the variable name dynamically but failing
Sorry for the long explanation. What I'm trying to ask is this:
Can I increment the form value without a global variable
If not, how do I form the variable name dynamically based on the class of the clicked element
You can do this with the increment operator in plain-old JavaScript:
document.getElementById("red").value++;
jsFiddle
Code revised with tested sample.
http://jsfiddle.net/webwarrior/CrjY9/25/
Are you not trying to increment the value of item you are clicking on?
jQuery("img").click(function () {
jQuery("#" + jQuery(this).attr("class"))[0].value++;
});
Hope this helps.
This is the true JQuery way, but I guess the JavaScript value++ way is just as good, in some browsers.
Related
I have a drop-down menu in a form with elements retrieved from a database. Something like this :
for($i=0;$i<count($resq);$i++){
print("<li><a class=\"dropdown-item\" href=\"#\" id=\"$i\">{$resq[$i][0]}</a></li>");
}
$resq being an array containing the result of the query (i used mysqli_fetch_all).
As you can see I tried to dynamically generate the id of the items(first item has id=0, second has id=1 and so on till the final value of $i) but I think this is not correct.
Previously, I had the following JS code(which worked) which I used to set the drop-down value to the one selected by the user and to set the value of a hidden input to that value.(I know the code isn't elegant but I just wanted to test the logic in the first place)
var x=document.getElementById('dropdownMenuButton1slct');//dropdown
var c1=document.getElementById("0");//i - categories(IDs of the dropdown elements)
var c2=document.getElementById('1');
var c3=document.getElementById('2');
var c4=document.getElementById('3');
var c5=document.getElementById('4');
var p=document.getElementById('iaval');//hidden input from form
function clic(z){
z.onclick=function () {
x.innerHTML=z.innerHTML;
p.value=x.innerHTML;
};
}
clic(c1);
clic(c2);
clic(c3);
clic(c4);
clic(c5);
But now the same method won't work. If you can, please suggest me a different way or something, I am kinda stuck. I can provide more info if this seems vague or something like that. Thanks.
I am trying to do what seems to be simple but am unable to accomplish
I am trying to set the value of a column after a row focus change in a grid to a hidden value in java script.
My imbedded javascript code:
function OnGridFocusedRowChanged() {
grdA.GetRowValues(grdA.GetFocusedRowIndex(), 'ClientID', OnGetRowValues);
}
function OnGetRowValues(values) {
//Set hidden value
document.getElementById('<%=hdnClientID.ClientID%>').value = values[0];
//Fire button click
btnPopulateGrids_Click();
}
where hdnClientID is the name of my hidden field
In GridA I have the setting as such that OnGridFocusedRowChanged gets executed each time a row focus change takes place.
To this point, it works fine, the values[0] in OnGetRowValues() contains the correct value from the corresponding row in GridA.
But in the corresponding code behind, I cannot access the value from hidden field hdnClientID. Always comes up null when accessing
Current_Client_ID = CInt(hdnClientID.Value);
cannot access or convert any value from
hdnClientID.ClientID.
either.
I'm missing something simple.
I had to complete a similar task recently and I too was unable to access the value from codebehind. I researched and found out that it is not that simple and that you can't do it with javascript. What I would recommend is to check if you have jQuery installed and if you do, change your function to this:
function OnGetRowValues(values) {
//Set hidden value
$('#<%=hdnClientID.ClientID%>').val(values[0]);
//Fire button click
btnPopulateGrids_Click();
//If you change your HiddenField to have OnValueChange event, you can trigger it with this
//__doPostBack('<%= CompanyCode.ClientID %>', '');
}
Also, I guess you are firing some function from code behind with btnPopulateGrids_Click();.
I would recommend adding OnValueChanged="hdnClientID_OnValueChanged"/> to your <asp:HiddenField/> and using my supplied function triggering method.
I have 2 forms on 1 page. I am trying to get the value of the name field from the first form using jQuery but jQuery is always getting the name value from the 2nd form. The code looks like this:
$('#registration-form').each(function(){
var $this = $(this);
$this.submit(function (event) {
var firstName = $(this).find('input[name="firstName"]').val();
console.log(firstName);
});
});
Why is this code not working? Your help is much appreciated!
Firstly you're selecting by id attribute, so you cannot have more than one element with the same id. This is why only one is found. The each() is also redundant in this case.
If you want to group elements use a class instead, although note that the each() is still redundant as jQuery will loop over each selected element internally so you can just attach the submit event handler directly, like this:
$('.reg-form').submit(function (e) {
var firstName = $(this).find('input[name="firstName"]').val();
console.log(firstName);
});
JSFIDDLE
I am having trouble letting a user enter their name into a text box and when they click continue it changes another input value for testing reeaons its a textbox but when I put it in my website when its working the input it will be changing will be a hidden value
current javascript
function enterUsername(){
document.getElementById("ign").value = 'test';
};
Your function is only in the local scope. Make it global like this:
enterUsername = function(){...
JSFIDDLE
So, I have in my script the following code to assign the value of several text boxes that is working ok.
However, when I attempt to assign the value of a checkbox, nothing seems to be set for the checkbox. I have tried using .prop and .attr, so I am thinking my entire approach is wrong.
Some help would be greatly appreciated.
Here is my unchanged code. I am trying to assign the value of the "#id_language_detail_multiple_languages":
function setLanguageDetailsFormValues() {
$('#id_language_detail_display_type').val('{{ language_details.language_detail_display_type }}');
$('#id_language_detail_multiple_languages').val('{{ language_details.language_detail_multiple_languages }}');
....
If you want to assign the "value" of your text boxe, you will add to do something like this:
$('#YourId').attr('value', 'setYourValueHere')
If you want to have the value of your text box, just do:
var myValue = $('#YourId').attr('value')
That is the same thing for '.prop' !
If it wasn't what you wanted, be a little more specific or give us a http://jsfiddle.net/ :-)
By the way, you can also do:
if you go 1 checkbox:
$("input[type='checkbox']").val('yourValue');
Or just:
document.getElementById('yourCheckbox').value = 'YourValue';
If the value isn't set, it will return undefined, so be aware and check if it is !
Hi You can do it like following.Properties for checkboxes are different from textboxes.
$("#CheckboxID").prop("checked","True");
if you want to read the checkbox value use like following
$("#CheckboxID").prop("checked");
Thanks.