Jquery prop function is not working as expected - javascript

I am trying to enable/disable some hidden fields based on some calculation and using jquery
prop function, here is the code
function enableSelectedFieldsData(count, mapKey, index) {
$("#code_" + mapKey + "_" + index).prop("disabled", false);
$("#description_" + mapKey + "_" + index).prop("disabled", false);
$("#crossRefrence_" + mapKey + "_" + index).prop("disabled", false);
$("#image_" + mapKey + "_" + index).prop("disabled", false);
$("#price_" + mapKey + "_" + index).prop("disabled", false);
// disable all other fields
for (var i = 0; i < count; i++) {
if (i != index) {
$("#code_" + mapKey + "_" + i).prop("disabled", true);
$("#description_" + mapKey + "_" + i).prop("disabled", true);
$("#crossRefrence_" + mapKey + "_" + i).prop("disabled", true);
$("#image_" + mapKey + "_" + i).prop("disabled", true);
$("#price_" + mapKey + "_" + i).prop("disabled", true);
}
}
}
Initially i am setting disable=true for all fields and based on the selection i m trying to enable selected fields while disabling other fields, since as per my knowledge disable fields never got submitted to the server on submitting the form, but in my case they are getting submitted.
on checking using firebug i saw that the disable field value for non selected item is getting set as "" like disable=""
i am not sure where i am setting things wrong, any help or pointer in this regard will really be helpful.
Edit
I have taken out the relevant section from my generated HTML and placed it at jsfiddle
please have a look

Do you have prop() available?
prop() was added in jQuery 1.6 and is used like this:
$("input").prop('disabled', true);
$("input").prop('disabled', false);
If you are using jQuery 1.5.x or lower you can use attr() instead as seen in this FAQ - How to enable/disable form elements from the jQuery site:
// Disable #x
$('#x').attr('disabled', true);
// Enable #x
$('#x').attr('disabled', false);
// -- or --
// Disable #x
$("#x").attr('disabled', 'disabled');
// Enable #x
$("#x").removeAttr('disabled');
Assuming you are using jQuery 1.6 or higher
Your syntax looks fine.
I would guess your problem is then most likely incorrect selectors.
To validate the selector contains the element reference you expect do:
// output the selector to the console
console.log($("#code_" + mapKey + "_" + index));
If you see an element in your browser's debugging console you are looking at a valid selector, if instead you see [] the your selector is invalid.
Alternatively you can check it using the length property and alert that out:
// alert out the length of the jQuery selector
alert($("#code_" + mapKey + "_" + index).length);
If you see 0 then your selector is invalid, if you see 1 or more then your selector is correct.

The disabled attribute in HTML is a bit different to (most) other attributes, in that its presence alone is enough to disable the element.
<input type="text" name="test" disabled>
<input type="text" name="test" disabled="">
<input type="text" name="test" disabled="true">
<input type="text" name="test" disabled="false">
Those elements will all be disabled (yes, even the one with disabled="false") because the disabled attribute is present in the HTML. If you're seeing disabled="" in Firebug's HTML tab after calling
.prop('disabled', true);
then that's the correct behaviour, and the element is disabled. There's another reason why the values are still being submitted, despite being disabled.

I found that .prop("disabled", true/false) is only working on input element types (i.e. button, checkbox ect.) I was trying to call this on an anchor tag and it was not working. What I ended up doing was using .attr("disabled", true) and .removeAttr("disabled") to toggle the disabled attribute as it works on all html elements.

Related

Radiobuttons set attribute checked is not working in function

Why is this not working with JQuery?
The property wont be checked to true so or with asnyc function... I tried everything, but it only will working if i set the attribute checked true in browser at console. Not even with outsourced async callback functions.
for (var i = 0; i < user.benutzer.length; i++)
{
var user_var = user.benutzer[i].benutzer;
user_rep = user_var.replace(/ /g, '_');
$('#div_buttongroup').append('<label for="' + user_rep + '" class="btn btn-primary" id="label_'+user_rep+'"><input type="radio" class="user_radio" id="' + user_rep + '" value="' + user_var + '" name="radio" autocomplete="off"></input>' + user_var + '</label>');
if (i === 0)
{
t = user_rep;
$('#label_'+user_rep).addClass("btn btn-primary active");
$('#'+user_rep).prop("checked",true);
}
}
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
$('#'+user_rep).attr("checked");
I think it was a JQuery bug in combination with radiobuttons. I used a selectbox and everything was working

Change attributes dynamically using jquery

I am running a loop which is appending input fields. Now, as I am using a loop, all the attributes are similars. So, when I need to grab any one of the then I am grabbing more than one field.
How do I dynamically change the attributes according to the index, so that I can grab the correct input field ?
ebs_no = data.number_ebs;
for(i=0;i<ebs_no;i++){
$('form.ebs').append("<br>EBS"+(i+1)+"</br>");
$('form.ebs').append('<br> SNAPSHOTNO <input type="text" name="'+i+'"></br>');
$('form.ebs').append('<input type="submit" name="submit">');
$('[name='+i+']').on('submit',function(){
alert($('[name='+i+']').val());
});
}
Replace this:
alert($('[name='+i+']').val());
by this:
alert($(this).val());
The code $(this) refers to the element being treated
Your are looking for event delegation.It is used for created Dynamically DOM elements and use class instead of iterare i in the loop
ebs_no = data.number_ebs;
for (i = 0; i < ebs_no; i++) {
$('form.ebs').append("<br>EBS" + (i + 1) + "</br>");
$('form.ebs').append('<br> SNAPSHOTNO <input type="text" class="someClass" name="' + i + '"></br>');
$('form.ebs').append('<input type="submit" name="submit">');
$('[name=' + i + ']').on('submit', function () {
alert($('[name=' + i + ']').val());
});
}
$(document).on('submit', '.someClass', function () {
alert($(this).val());
});

Radio Input gets unchecked after jQuery html operation

I'm getting an extremely weird error. My radio button gets unchecked after doing the following operations:
var $page = $('[data-shortcode-page="' + shortcode + '"]', $webrock).html();
//CHECKED
console.log($('[data-shortcode-page="' + shortcode + '"] :checked', $webrock).length)
$('.webrock-page-content', $addPage).replaceWith($page);
//UNCHECKED
console.log($('[data-shortcode-page="' + shortcode + '"] :checked', $webrock).length)
Does anyone know why this is happening? Here's a jsFiddle: http://jsfiddle.net/mVB2q/1/
Thank you very much!
You are cloning a radio group with the same name. You need to update the name of the cloned radio group. Here is a simple solution where I am hardcoding in "test1" for the new group name, but you may want to modify it to fit your needs:
var shortcode = 'object';
var $page = $('[data-shortcode-page="' + shortcode + '"]');
console.log($('[data-shortcode-page="' + shortcode + '"] :checked').length);
//after cloning the radio buttons, find radio buttons and update the name attribute.
$('.webrock-page-content').html($page.clone().find("input[type='radio']").attr("name", "test1").end().html());
console.log($('[data-shortcode-page="' + shortcode + '"] :checked').length);
Updated fiddle.

how to delete a value between <input> tags?

I'm creating checkboxes using JQuery as following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
Then later it is removed whenever the user checks the box in:
if (this.checked) {
$(this).remove();
}
However, The input box is deleted, but the number (id) stays on the page, along the <br/> Tag, so I can see the #i there on the HTML Page.
I would like to remove them as well.
So, to in order to make my question as complete as possible, here is how the HTML is laid:
<input id="1" type="checkbox">
1
<br>
Could someone please give me a clue how to remove #i and <br/> from the page?
Thanks
as stated by other answers - input don't have closing tags
You will still need to remove all id and <br />. You can find those with .next() function in jquery. You should put your id in <label> or <span>.
Then. for example:
$(this).next('label').remove();
$(this).next('br').remove();
$(this).remove();
Code can be written shorter but it's for you to see how it works.
The text in <input> text boxes is not set with a textnode (like for textareas), but with the value attribute. (Sorry for the confusion)
Yet, you want to have a checkbox. Best, create a <label> for it, instead of a text node plus a <br /> (which is not handleable with jQuery):
<div class="inputcell">
<input type="checkbox" id="check5">
<label for="check5">5</label>
</div>
With this DOM, you can easily remove the whole box by $("#check5").parent().remove(). Note that single numbers are no valid element ids.
that's because input tags don't have closing tags and remove ignores everything after the >, change this:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
to:
$('<input type="checkbox" ' + 'id=' + (i+1) + 'value="' + (i+1) +'"><label>'+ (i+1) +'</label>')
$(this).next('label').andSelf().remove();
input tags don't have closing tag, to create a checkbox you just need the following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>');
and if you want also to use a label for that checkbox, create appropriate label or any other element, because you can't put closign tag for input and a text between them

How to update value of a radio using Jquery

I have this HTML code for radios:
<input type='radio' name='a_27' value='Yes' id='a_27_0' />
<input type='radio' name='a_27' value='No' id='a_27_1' />
I'm trying to set the selected value of the radio using this code:
var field="a_" + this.id;
$('[name="' + field + '"]').val(this.value);
console.log("name is " + field + ", val is " + this.value);
However it doesn't work, nothing happens when this runs. Here's the output from Firebug's console which occurs after the 3rd line:
name is a_27, val is Yes
Any ideas?
I would prefer a method which would also work on <select>s, so I wouldn't need to write additional/seperate code for radios and selects.
Edit: A weird problem I've noticed that although my html code gives a different value (yes/no), in firebug it shows both radios as having the value 'yes'. If I select no and click save, the javascript function still receives 'yes' instead of no. Am I doing something wrong?
Edit 2: The full function:
function processMultiOptAnswers()
{
$.each(multiOpts,function()
{
var field="a_" + this.id;
console.log("name is " + field + ", val is " + this.value);
$('[name="' + field + '"]').val(this.value);
}
);
}
your log should be if this.value is different.
$('[name="' + field + '"]').val(this.value);
console.log("name is " + field + ", val is " + $('[name="' + field + '"]').val());
To make it selected
$('[name="' + field + '"]').attr("checked", "checked");
I haven't tested this, but you might have to remove that attribute from the other ones.

Categories