I have 3 checkboxes but they are showing as undefined in an alert box. Is there a trick to getting them to show a value? I tried putting a value of 1 in the input tag but it still reports as undefined.
Ok, thanks.. Here is some code.
else if (item.field == "admCustRptDly" && item.value == "1")
{
$('#admCustRptDly').attr('checked', true);
}
else if (item.field == "admCustRptSumm" && item.value == "1")
{
$('#admCustRptSumm').attr('checked', true);
}
else if (item.field == "admCustRptDtl" && item.value == "1")
{
$('#admCustRptDtl').attr('checked', true);
}
<input type="checkbox" id="admCustRptDly" name="admCustRptDly" class="admChkbx">
<input type="checkbox" id="admCustRptSumm" name="admCustRptSumm" class="admChkbx">
<input type="checkbox" id="admCustRptDtl" name="admCustRptDtl" class="admChkbx">
your jquery is off, this doesn't quite give the response you'd expect, rather to find if a check box is checked:
var checked = $("#admCustRptDtl:checked").val();
Also, the checked attribute will never equal true, the html is actually checked="checked"
else if (item.field == "admCustRptDly" && item.value == "1")
I don't understand what are you trying to do here? I'm guessing you are trying to verify the value of "admCustRptDply" checkbox. Maybe post also the code before this.
You can get the value like this:
var val = $("#admCustRptDly").val()
But in your HTML the checkboxes don't have a value attribute.
You can get the checked property of a checkbox like this:
var checked = $("#admCustRptDly").attr("checked")
And you can set it like this:
$("#admCustRptDly").attr("checked","checked")
Could you please expand? Some example code would be very helpful, you might've just misspelt the checkbox name when trying to use it.
Related
I have the below code in javascript, here location id is a text box in my UI:
var locationIdValue = $('[name="location_id"]').val();
var chainIdSelection = $('[name="chain_id"]').val();
if (chainIdSelection == "" && locationIdValue == "") {
this.displayFailureMessage("Chain # is required.", 10000);
canSearch = false;
}
The Chain Id is a drop-down for which I have the below code:
<select class="${prefix}ChainIdSelect" name="chain_id">
<option value=''><fmt:message key="select"/></option>
<c:forEach var="chainId" items="${ chainDescriptionList }" >
<option value="${chainId.chainId}"> ${chainId.chainId} - ${ chainId.description }</option>
</c:forEach>
</select>
chain Id declaration is:
{mData :"chain_id"
,sTitle :'<fmt:message key="location.summary.chain_id"/>'
,sClass :"chainId"
,bSortable:true
,"filter" :{selector:".${prefix}ChainIdSelect"}
}
I am trying to disable chain id drop down when my location id text box has some value. I tried the below solution:
if(locationIdValue != "" || locationIdValue != null){
document.getElementByName("chainid").disabled = true;
}
This has not worked, and so have many other things which I have tried so far. Can anyone suggest a solution please.
Not sure exactly about your code but probably you want to implement disabling logic in event callback. I want to say add callback which will be triggered every time when location_id is changed.
In your case it would be something like this:
$('[name="location_id"]').change(function(){
if(locationIdValue != "" || locationIdValue != null){
$('[name="location_id"]').prop("disabled", true);
}
});
Please verify that callback is executed when value is changed!
I have created UserControl that I wish to use on multiple pages. This control contains classic javascript but for some reason it will not load element to a variable. Client IDs look ok.
This is button that activates javascript:
<input type="submit" name="ctl00$ContentPlaceHolder1$ContactList$btn_NewContact" value="Potvrdit" onclick="javascript:return CheckContactName();" id="ContentPlaceHolder1_ContactList_btn_NewContact" class="MyButton" style="color:white;" />
This is the textbox:
<input name="ctl00$ContentPlaceHolder1$ContactList$con_fullname" type="text" id="ContentPlaceHolder1_ContactList_con_fullname" class="MyTextBox" />
This is Javascript function:
function CheckContactName() {
name = document.getElementById("ContentPlaceHolder1_ContactList_con_fullname");
if (name.value == '' | name.value == null) {
return false;
}
UploadContact();
return true;
}
Now, when I debug this in a console the name.value is undefined. The name variable itself is just "[object HTMLInputElement]".
So no matter what is in that textbox, this function is always false. I also checked all IDs inside final client page and there are no duplicates. Can you tell why this is? Thanks.
I supose you set the input's value in code behind right?
Anyways, you might try using document.querySelector, and it seems that your logical operator is wrong, you are using | instead of ||.
function CheckContactName() {
let name = document.querySelector(
'#ContentPlaceHolder1_ContactList_con_fullname'
);
if ((name.value == '') || (name.value == null) || (name == undefined)) {
return false;
}
UploadContact();
return true;
}
Changed name to cname.
It seems that when you use control on a page that already contains some JavaScript function and that function declares variable with the same name as the one in usercontrol - this happends.
I have these two radio buttons and I am checking to see if one of them is checked with the below javascript. As I type this question I realize that my script only checks if a specific radio button is checked. How can I check to verify that one of the two are checked?
jQuery(".GenderM1").each(function() {
var isChecked = jQuery(this).prop('checked');
if (isChecked == false) {
e.preventDefault();
pass = "false";
alert("Please select gender.");
return false;
}
});
<td>
<input type="radio" name="persinfo_gender[0]" <?php if($row_c->persinfo_gender == "0") echo "checked";?> id="maleradio" class="GenderM1" value="0" required>M
<br>
<input type="radio" name="persinfo_gender[0]" <?php if($row_c->persinfo_gender == "1") echo "checked";?> id="female_redio" class="GenderM1" value="1" required>F
</td>
Your code
jQuery(".GenderM1").each(function() {
var isChecked = jQuery(this).prop('checked');
if (isChecked == false) {
e.preventDefault();
pass = "false";
alert("Please select gender.");
return false;
}
});
You're comparing a boolean variable against a boolean value, use it directly:
isChecked == false// Use !isChecked
^
You're using an undeclared e, probably you thin that .each receives an event.
e.preventDefault();
^
The main problem is your loop comparing each radiobutton.checked attribute, you need to check is at least one of then is checked to stop your loop.
This code snippet show how to check if a radiobutton was checked:
var isChecked = false;
jQuery(".GenderM1").each(function() {
isChecked = isChecked || jQuery(this).is(':checked');
if (isChecked)
return false;
});
if (!isChecked) {
var pass = "false";
alert("Please select gender.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="persinfo_gender[0]" class="GenderM1" value="0" required>M
<br>
<input type="radio" name="persinfo_gender[0]" checked class="GenderM1" value="1" required>F
See?, the alert is not being shown when a radiobutton is checked.
Now, the best approach to know whether a radiobutton group has at least one of them checked:
$('.GenderM1:checked').length
The line above returns how many radiobuttons are checked (1 or 0) because you only can select one of then. That selector works with checkboxes as well.
the method .prop() is available since jQuery 1.6, in previous versions you have to use the method .attr()
which version do you use?
Still I think that what you want to do is that if you have not selected a genre that shows an error and with the code you have, it will not work well. To do this you must do the following:
1- Mark one of them selected by default, that is, establish it as checked by default, this eliminates the possibility that the error of not marking it will be committed.
2- Modify the validation you perform, otherwise it will always return false because only one will be selected and you will go through the entire radiobuttons arrangement, so that when you reach the unselected radiobuttons it will return false.
if ($('input[class="GenderM1"]').is(':checked')) {
// do something;
} else {
//do another thing;
}
I'm trying to populate multiple checkbox with the help of earlier mysql entries.
I have the data in a variabel:
var = ObjektLevHur;
The data can be: frittlev, frittfabrik or mont.
In my first .change id=1 is ticked. Then if i made a second change id=2 is ticked. etc?!
why?
HTML: Jquery should tick the boxes
<input type="checkbox" name="valt_objekt_lev_hur" id="valt_objekt_lev_hur-1" value="mont">
<input type="checkbox" name="valt_objekt_lev_hur" id="valt_objekt_lev_hur-2" value="mont">
JS: The select2('data').olevhur; is is populating var objektLevHur with: frittlev, frittfabrik or mont.
$(valtObjekt).change(function() {
var objektLevHur = $(valtObjekt).select2('data').olevhur;
if(objektLevHur == "frittlev"){
$('#valt_objekt_lev_hur-0').prop("checked",true);
}
else if(objektLevHur == "frittfabrik"){
$('#valt_objekt_lev_hur-1').prop("checked",true);
}
else if(objektLevHur == "mont"){
$('#valt_objekt_lev_hur-2').prop("checked",true);
}
PHP: "olevhur" is an array created in PHP, then encoded to JSON and sended to JS/AjaxCall
"olevhur"=>$row['objekt_lev_hur'],
first thing i see is that ObjektLevHur is not objektLevHur. change name
The problem was that the checkboxes didn't "un-tick" when a .change was called!
This solved my problem!
if(objektLevHur == "fritt_lev"){
$('#valt_objekt_lev_hur-0').prop("checked",true);
$('#valt_objekt_lev_hur-1').prop("checked",false);
$('#valt_objekt_lev_hur-2').prop("checked",false);
}
else if(objektLevHur == "fritt_fab"){
$('#valt_objekt_lev_hur-0').prop("checked",false);
$('#valt_objekt_lev_hur-1').prop("checked",true);
$('#valt_objekt_lev_hur-2').prop("checked",false);
}
else if(objektLevHur == "mont"){
$('#valt_objekt_lev_hur-0').prop("checked",false);
$('#valt_objekt_lev_hur-1').prop("checked",false);
$('#valt_objekt_lev_hur-2').prop("checked",true);
I'm trying to check an answer from radio buttons. There are only two option, I'm trying to use selectedIndex and then check the answer with a value put in another array. The question and answer arrays are both working fine, but regardless of the answer that is checked, the function considers it the correct one and adds a score to my global score counter variable. The answers array contains only the numbers 1 or 2 in each slot depending on the question, so I'm not sure why it's not working.
function checkAnswer0()
{
if((document.getElementById('trueorfalse0').selectedIndex = 1) && (answersPushed[0] == 1))
{
scoreCounter++;
document.getElementById("warning").innerHTML = "Correct Answer";
}
else if((document.getElementById('trueorfalse0').selectedIndex = 2) && (answersPushed[0] == 2))
{
scoreCounter++;
document.getElementById("warning").innerHTML = "Correct Answer";
}
else{
document.getElementById("warning").innerHTML = "Wrong Answer";
}
}
My form section looks like this and is held in the body within form tags.
<input name="Answer0" type="radio" id="trueorfalse0" value="true" onclick="checkAnswer0()"/> True <br/>
<input name="Answer0" type="radio" id="trueorfalse0" value="false" onclick="checkAnswer0()" /> False
If anyone can help me understand the nature of the problem I'd appreciate it. I know there are many alternative ways to have approached the problem but I'd like to sort out in my head why this one isn't happening for me. Thanks in advance!
I suspect the first part of your if condition should look like if((document.getElementById('trueorfalse0').selectedIndex == 1) && ..., notice the extra =, for it to make sense.
EDIT
selectedIndex is a property of select input. To check if radio input is checked, you have to loop over group of inputs and check the value of checked property.
var answers = document.getElementById('trueorfalse0');
var value;
for(var i = 0; i < answers.length; i++){
if(answers[i].checked){
value = answers[i].value;
}
}