i have 3 check boxes in 3 different pages,i want to check one check box at time means at first all 3 are unchecked and if i checked one check box remaining 2 check boxes should be disable.
each check box value i am storing in 3 different text file using array in the form of 1's and 0's.
now for one page i am reading check box values and based condition trying to disable check box but its not working.
I have Tried this
check box html code:
input type="checkbox" id="cb1" name="check[0]" value="1" />
java script:
<script type="text/javascript">
var cb1 =document.getElementById("cb1");
var cb2 = "<?php echo $cb2_arr[5] ?>" ; //cb2=1 or 0
var cb3 = "<?php echo $cb3_arr[6] ?>"; //cb3=1 or 0
if(cb2 ==1 || cb3 == 1){
cb1.disabled = true;
}else{
cb1.disabled = false;
}
</script>
cb1.disabled = true; for me its not working i kept alert statements above and below it ,only above one is displayed
Please help me how to set disabled property, thanks
try this to disabled and remove disabled,
if ($('#cb3').is(':checked') || $('#cb2').is(':checked')) {
$('#cb1').setAttribute('disabled', true);
}else{
$('#cb1').setAttribute('disabled', false);
}
You need to check input1.value == "", not simply input1 == ""
You also need to fire your method originally, and also run it every time your select lists change value.
Give the function a name
function setCheckState(evt) {
if (input1.value == "" || input2.value == "") {
result.disabled = true;
} else {
result.disabled = false;
}
}
Add event listeners
input1.addEventListener('change', setCheckState);
input2.addEventListener('change', setCheckState);
// Fire the method to get the initial checkbox state set
setCheckState();
Finally, you can reduce your if() statement to a simple assignment...
function setCheckState(evt) {
result.disabled = input1.value == "" || input2.value == "";
}
Related
I am adding multiple controls on an .aspx page from the .vb page based on certain conditions.
My code looks like following:
Dim sb As New StringBuilder
sb.Append("<table border='0'cellpadding='0' cellspacing='0' width='50%' class ='tabledata' id='tblContent'>")
For Each item As myObject In myLst
sb.Append("<tr><td style='width:50%;' valign='top'>")
sb.Append("<textarea id=txt_comments" & i & " name='txt_comments' rows='5' cols='60'></textarea></td>")
sb.Append("<td style='width:15%' valign='top' align='center'><select ID = validate" & i & " name=ValidateValues style ='border:1;width:150px'><option value = ''>Select</option><option value = 'Yes'>Yes</option><option value = 'No'>No</option><br /><br /></td>")
sb.Append("</tr><tr>")
Next
sb.Append("</table>")
myContent.InnerHtml = sb.ToString
So here I am creating <textarea> and <select> dynamically and adding them to my div(myContent)
<div id="structuredContent" runat="server">
</div>
I have a button next where I need to validate for few conditions.
My validation rule is:
User has to select either yes or no from the dropdown(<select>)
If user select 'yes', they have to enter text in
<textarea>(minimum1 character, maximum 1000 characters)
If user select 'No', <textarea> should be disabled.
I am trying to validate like following:
function validateComments() {
var errorcheck = 0;
$("[id^=txt_comments]").each(function () {
var comment = $.trim($(this).val());
$("[id^=validate]").each(function () {
debugger;
var value = $(this).val();
if (comment == 0 && value == "Yes") {
debugger;
errorcheck = 1;
}
});
}); if (errorcheck == 1) {
//show error message
}
else {
ErrorHide();
return true;
}
}
I am able to validate only for one control(which is textarea) from the above code.
The textbox and respective dropdown should be validated along.
How do I add validation for dropdown and can I combine with in the same function.
Any help?
Thanks in advance.
I don't know how do you expect this like if (comment == 0) { to work.
You'll always get a string as a value and checking it with 0 would always return false. Rather you need to check it with "".
And to enable/disable textarea you'll have to attach an event to select tag and do whatever you want to do.
here is an example
$("#d").change(function(){
if($(this).val() === 'n'){
$("#t").prop('disabled', 'disabled')
}else{
$("#t").prop('disabled', false)
}
});
$('body').on('click', '#b', function() {
var text = $.trim($("#t").val());
if(text === "" && !$("#t").prop('disabled')){
alert("yo! not valid")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="d">
<option value="0">Select</option>
<option value="y">Yes</option>
<option value="n">No</option>
</select>
<textarea maxlength="50" id="t"></textarea>\
<button id="b">Validate</button>
I have two textboxes and one checkbox in a form.
I need to create a function javascript function for copy the first txtbox value to second textbox on checkbox change event.
I use the following code but its shows null on first time checkbox true.
function ShiptoBill()
{
var billing = document.getElementById("txtbilling").value;
var shipping = document.getElementById("txtshipping").value;
var check = // here i got checkbox checked or not
if(check == true)
{
// here I need to add the txtbilling value to txtshipping
}
}
Given that form controls can be accessed as named properties of the form, you can get a reference to the form from the checkbox, then conditionally set the value of txtshipping to the value of txtbilling depending on whether it's checked or not, e.g.:
<form>
<input name="txtbilling" value="foo"><br>
<input name="txtshipping" readonly><br>
<input name="sameas" type="checkbox" onclick="
this.form.txtshipping.value = this.checked? this.form.txtbilling.value : '';
"><br>
<input type="reset">
</form>
Of course you might want to set the listener dynamically, the above just provides a hint. You could also conditionally copy the contents over if the user changes them and the checkbox is checked, so a change event listener on txtbilling may be required too.
Try like following.
function ShiptoBill() {
var billing = document.getElementById("txtbilling");
var shipping = document.getElementById("txtshipping");
var check = document.getElementById("checkboxId").checked;
if (check == true) {
shipping.value = billing.value;
} else {
shipping.value = '';
}
}
<input type="text" id="txtbilling" />
<input type="text" id="txtshipping" />
<input type="checkbox" onchange="ShiptoBill()" id="checkboxId" />
function ShiptoBill()
{
var billing = document.getElementById("txtbilling");
var shipping = document.getElementById("txtshipping");
var check = document.getElementById("checkboxId").checked; // replace 'checkboxId' with your checkbox 'id'
if (check == true)
{
shipping.value = billing.value;
}
}
To get the event when it changes, do
$('#checkbox1').on('change',function() {
if($(this).checked) {
$('#input2').val($('#input1').val());
}
});
This checks for the checkbox to have a change, then checks if it is checked. If it is, it places the value of Input Box 1 into the value of Input Box 2.
EDIT: Here's a pure JS solution, and a JSBin too.
function ShiptoBill()
{
var billing = document.getElementById("txtbilling").value;
var shipping = document.getElementById("txtshipping").value;
var check = document.getElementById("thischeck").checked;
console.log(check);
if(check == true)
{
console.log('checked');
document.getElementById("txtshipping").value = billing;
} else {
console.log('not checked');
}
}
with
<input id="thischeck" type="checkbox" onclick="ShiptoBill()">
I have checkboxes created dynamically on the JSP page as follows
<form name="CancelForm" onsubmit="return validate();" action="ServletCancel" method="post">
<%
for(int index=0 ; index<lstID.size() ; index++)
{
String strBookingID = lstID.get(index);
%>
<input type="checkbox" name="BookingID" value="<%=strBookingID%>">
<%
}%>
<input type="submit" value="Cancel" class="button1"/>
</form>
For validating same I have the below JavaScript code to validate that atleast one Checkbox in the Form is checked, if so it should return "true" else "false" with an alert to check atleast one option.
function validate() {
var flag = "false";
var CHKBBookingID = document.CancelForm.BookingID;
alert("length of checkboxes >> "+CHKBBookingID.length)
for (var i = 0; i < CHKBBookingID.length ; i++) {
if (CHKBBookingID[i].checked == true) {
flag = "true";
}
}
if(flag == "false"){
alert("You have not selected any passenger yet!");
return false;
} else {
return true;
}
}
This validation is working Perfectly fine if I have 2 or more Checkboxes in the form.
But on the other hand if I have only one Checkbox the validation alert shows the "Length" of Checkbox as "undefined" as well as fails even though the only Checkbox on the form is checked
var CHKBBookingID = document.CancelForm.BookingID;
Causes the problem. if you are naming it as var it is considered as the variable , as you pass a single element.
so you need to initialize the javascript array as ,
var CHKBBookingID = Array(document.CancelForm.BookingID)
will input them into the array
Learn More. .
Update:
Using jquery you can easily get the number of checkboxes,
var CHKBBookingID = new Array();
$.each($("input[name='BookingID[]']:checked"), function() {
values.push($(this).val());
// or you can do something to the actual checked checkboxes by working directly with 'this'
// something like $(this).hide() (only something useful, probably) :P
});
Hello I have a site with several Questions and i want an survey to click throw a few "divs" and with a check box if they want to give no answer:
!!! Every thing works but if i type in 0 in the input field the alert comes but then i Can't get further ? WHY !!!
My code for the Checkbox:
<input type="checkbox" id="CheckBoxFeld" name="CheckBox2" >
My Code For the Next Button:
<input type="button" value="Next">
My Code for the TEST:
function check2(){
var field = document.Survey.Answer2.value;
var checkbox2 = document.Survey.CheckBox2.checked;
if (field == 0 && checkbox2 == false){
alert("Please answer question 2");
}
else{
showHideDiv('Question2', 'Question3');
}
}
And my Code for the ShowHide Function:
// Show and Hide Div
function showHideDiv(idHide, idShow){
//document.getElementById(idShow).style.display = "block";
//document.getElementById(idHide).style.display = "none";
document.getElementById(idHide).style.visibility = "hidden";
document.getElementById(idShow).style.visibility = "visible";
}
Try checking the length of the value:
function check2(){
var field = document.Survey.Answer2.value;
var checkbox2 = document.Survey.CheckBox2.checked;
if (field.length == 0 && checkbox2 == false){
alert("Please answer question 2");
}
else{
showHideDiv('Question2', 'Question3');
}
}
Try using, onclick="check2();" instead of onclick="onclick=check2();"
<input type="button" class="Button" value="Next" onclick="check2();">
Javascript:
function check2(){
var field = document.Survey.Answer2.value;
var checkbox2 = document.Survey.CheckBox2.checked;
if (field == 0 && checkbox2 == false){
alert("Please answer question 2");
}
else{
showHideDiv('Question2', 'Question3');
}
return false;
}
A few issues
poor practice and illegal html to wrap a button in a link
if you use a link, return false to avoid the HREF to be followed. In this case the browser would likely go to top and some browsers would partially unload the page, making for example animations stop
Like this
Next
OR
<input type="button" onclick="check2()" value="Next">
using
function check2(){
var field = document.Survey.Answer2.value;
var checkbox2 = document.Survey.CheckBox2.checked;
if (field == 0 && !checkbox2){
alert("Please answer question 2");
}
else{
showHideDiv('Question2', 'Question3');
}
return false;
}
But only if your field contains 0.
If you want to test if it is empty, you need field.length==0 instead
I'm working with Javascript and ASP in this scenario. When this particular page opens, one of my drop-down menus is already populated with a status of "Open" or "Closed" - you can see the value comes from an ID in my recordset.
What I would like to do now is this: If the status on the page when it first loads is "Closed" and the user decides to change it to "Open" they must re-enter a "Reopen Reason" - so, that would display the header and text box below the drop-down....
Here's what I have tried thus far: I have created a showHide() function and placed it inside of the select in the drop-down, but it doesn't do anything, so am now stuck. Any help is appreciated. Thanks!
<select name="cboStatus" id="cboStatus" style="width:200px" onchange="showHide();"> <%
RSStatus.MoveFirst
If Not RSStatus.EOF Then
Do While Not RSStatus.EOF
%><option value='<%= RSStatus("ID")%>'
<%If RSStatus("ID") = RS("prjStatus") Then Response.Write "selected"%>><%= RSStatus("prjStatus")%></option><%
RSStatus.MoveNext
Loop
End If
%>
</select>
The HTML that should be produced from the above JS:
<tr id="lbReopenReason" style="display:none">
<td bordercolor="#f0f0e4" bgcolor="#f0f0e4"><h3>Reopen Reason</h3></td>
</tr>
<tr id="trReopenReason" style="display:none">
<td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<input name="txtReopenReason" type="text" id="txtReopenReason" value="<%If (RS("reOpenReason")) <> "" Then Response.Write(RS("reOpenReason"))%>" size="100" />
</td>
</tr>
Javascript:
function showHide()
{
var cboStatus = document.getElementById("cboStatus");
var cboStatusValue = cboStatus.options[cboStatus.selectedIndex].text;
var lbReopenReason = document.getElementById("lbReopenReason"); var trReopenReason = document.getElementById("trReopenReason");
//If the status of the project is Closed at the time of page load, and that status changes, then the user must enter a re-open reason.
if ( (status == 3) && (cboStatusvalue == 'Open' )
{
lbReopenReason.style.display = "";
trReopenReason.style.display = "";
}
else
{
lbReopenReason.style.display = "none";
trReopenReason.style.display = "none";
}
}
Looks like there are two problems here:
1) Your function is called "statusShowHide()", not "showHide()", so that could be the reason it's not getting called.
2) Your onchange attribute is missing its closing quotes after the function call, so that could be it as well.
Give those fixes a shot and see if it works now.
EDIT: A few more suggestions:
In your showHide() method you say:
if ( (status == 3) && (cboStatusvalue == 'Open' )
when it should be:
if ( (cboStatus === 3) && (cboStatusValue === 'Open' ) )
Also, instead of the way you're currently getting the value of the element:
var cboStatusValue = cboStatus.options[cboStatus.selectedIndex].text;
Try using:
var cboStatusValue = cboStatus.value;
Have finally resolved this one with the following:
Window onload to populate initial record value:
window.onload = findStatus;
function findStatus()
{
var cboStatus = document.getElementById('cboStatus');
statusShowHide(cboStatus);
}
Followed by this Javascript for changing statuses:
function statusShowHide(obj)
{
var txtStatusFirstLoad = document.getElementById("txtStatusFirstLoad");
var lbReopenReason = document.getElementById("lbReopenReason");
lbReopenReason.style.display = "none";
if (txtStatusFirstLoad.value == 3 && obj.value == 1)
{
lbReopenReason.style.display = "block";
}
}
And added this hidden text box to capture initial status value:
<input name="txtStatusFirstLoad" id = "txtStatusFirstLoad" type="hidden" value="<%=RS("Status")%>" />