Im trying to dynamically check a checkbox using JQuery 1.5, based on something the user selects from a dropdown list. When the list changes it returns to this function:
function displaySystemResults(html){
var v = html.split(",");
document.getElementById('fUpdateSystemName').value = v[0];
if (v[1] == "true"){
alert("true");
$('#fUpdateActiveFlag').setAttribute('checked','checked');
}
}
Here is the dropdown list:
<td valign="top"><form:checkbox path="fUpdateActiveFlag"
name='fUpdateActiveFlag' value="checked" /> </td>
I can't get the checkbox to put a tick in the box. Can anyone spot what im doing wrong? I know its hitting the setAttribute method as the alert box is displaying when it should be set to true.
$('#fUpdateActiveFlag') is the ID selector.
add it to your checkbox
<td valign="top"><form:checkbox ID="fUpdateActiveFlag" path="fUpdateActiveFlag"
name='fUpdateActiveFlag' value="checked" /> </td>
Also, jQuery function is incorrect. setAttribute is the JavaScript function, while it looks like you're using jQuery selector, hence the object you select is jQuery object, which does not have a method called setAttribute, instead, use .attr():
$('#fUpdateActiveFlag').attr('checked','checked')
see working example http://jsfiddle.net/ruslans/8xp9g/
Edit: as per #Dementic 's comment below, you can keep using the name attribute, but then you'll have to change your selector to:
$('[name="fUpdateActiveFlag"]').attr('checked','checked');
see working example: http://jsfiddle.net/ruslans/A4D8f/
Related
My Website is meant to have several carts per user and they are listed and updated via AngularJS like this:
<tr ng-repeat="cart in carts|orderBy:orderByField:reverseSort">
<td>
<input type="radio" ng-model="form['cart_id']"
ng-value="cart.cart.cart_id" />
</td>
<td>{{cart.cart.alias}}</td>
<td>{{cart.cart.description}}</td>
<td>{{cart.cart.created}}</td>
</tr>
When I add another cart in $scope.carts it gets updated pretty well, but I am not able to let the new cart be preselected when it is shown.
I tried using adding ng-checked=true which did not work, adding an ID and setting .attr('checked','checked') in JQuery, but the element is not known at that moment.
I am using Angular 1.2.22, JQuery 1.9.0 and Bootstrap 2.3.2. So I am well aware it's pretty outdated, but as I am new here, I am not able to change it. Yet.
Radio buttons are pre-selected by setting their model to the defined value. To select the last item in the carts array:
var last = $scope.carts.length-1;
$scope.form.cart_id = $scope.carts[last].cart_id;
For more information, see
AngularJS <input type=radio> Directive API Reference
Use value prop to make radio preselected, like: value=<value of ng-model variable which you want to get preselected>
Refer to this: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
I have some items to be selected,they are checkboxes with their certain titles in a table. I want to onclick on an item(I mean each "td") then the function do its job but besides I want the checkbox of that selected "td" t be checked. How can I do it with javascript?
note:I am learning javascript so please don't answer with a jquery solution.
the code below is an example of each items
<td id="1" onclick="chb('1')" ><input type="checkbox" />title</td>
This is pure JS to select a check box. You need to give your check box an Id (for example 'check1') and run the below code inside the function you call in the click event.
document.getElementById("check1").checked = true;
Actually I didn't understand what you told. But i think you want the checkbox to be checked already. Then use checked in <input> Like this : <input type="checkbox" checked>or You can use document.getElementById("check1").checked = true;
I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.
I have some jquery code where I am trying to select a checkbox when the user clicks on a div. My fiddle is below:
http://jsfiddle.net/5PpsJ/
What i have come up with is this, but it is not selecting the checkbox inside of the span:
$('span[name="' + current + '"]').closest('input:checkbox[id="CB_Selected"]').prop('checked', true);
The full code is in the link
My question is how can i get the select box inside of the span based on its unique name and select it?
n.b I have commented out the hide functio0n in jquery to visually see whether the checkbox is selected or not
EDIT
My ID's are the same because I am working inside of ASP.NET and using a repeater to create the HTML shown in the fiddle. Inside of Repeaters I can not set the ID of item as the Repeater control does not allow me to set the ID with Eval(datasource)
IDs are unique. All you need is this:
$("#CB_Selected").prop('checked', true);
Actually, you don't even need jQuery:
document.getElementByID('CB_Selected').checked = true;
As others have pointed out, it would be preferred to use a class rather than an ID if there are multiple checkboxes. In addition, an input cannot have children, so the closest function won't work; did you mean find (for children) or siblings?
Instead of giving several checkboxes the same ID -- which invalidates your html -- use a class on the checkboxes. Change:
<input id="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
To:
<input class="CB_Selected" type="checkbox" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$Repeater_Selected$ctl00$CB_Selected" />
Then you can use the code:
$('#s_' + this.id).find(':checkbox.CB_Selected').prop('checked', true);
I am trying to come up with some code that I can execute onclick that will check a specific checkbox on a page. The checkbox does not have a unique name and does not have an ID. The only usable identifier is the value.
I am limited to jQuery 1.4.2.
Nothing I have tried will work. Any ideas?
Thanks.
This is obviously something you want to avoid doing but if the value is all you got, you'll have to traverse through the DOM for that input field where type=checkbox and where value is the value that you are looking for. What you can do is write a jQuery select for $('input[type=checkbox]') and there loop through all the checkboxes that have the value that you are looking for.
$checkbox = $('input[type=checkbox]')
$checkbox.each( function(k,v){
if( $(v).attr('val') == somevalue ){ //using attr() instead of .val() since it's a checkbox
$(v).attr('checked',true)
}
}
So I checked out if you can just directly select it in jquery 1.4 using plunkr.
$("input:checkbox[value='someVal']").attr("checked", "checked")
And this works fine. Here's the plunk url to check out http://plnkr.co/edit/2sSjONghE5IfGlAvN2kk?p=preview
This should work in earlier versions of jQuery:
$("input:checkbox[value='someVal']").attr("checked", "checked")
Here is a fiddle.
You can try:
$("input[type=checkbox][value=myvalue]").click(function() {
alert('clicked');
});
You can refer it it by it's index id or by value