|
JavaScript - Disable Button Based On Outcome Of If Statement
i need to disable a button if a table cell has a certain value inside of it.
Code: if (document.getElementById('ba' + roid.value + 'r' + roid2.value + 'c1').innerHTML = " ")
{
document.getElementsByName('open')[0].disabled=true;
}
else
{
document.getElementsByName('open')[0].disabled=false;
}
That is what i have got. The problem is that the button is constantly disabled no matter what the value and also when it executes it gives that cell the value of . i really dont know what is going on. any help apreciated Similar TutorialsHi I have the following code...
Code:
<!doctype html>
<html>
<head>
<title>Loops</title>
</head>
<body>
<form id = "frmOne">
<table border="1" >
<p>Items Remaining: <a id="clicks">5</a></p>
<tr>
<th> Number One:</th>
<th> Number Two:</th>
</tr>
<tr>
<td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td>
<td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td>
</tr>
<tr>
<td colspan="2"> Totals: <textarea Name="totals" style="width: 400px; height: 300px;"></textarea></td>
</tr>
<tr>
<td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td>
</tr>
</table>
</form>
<script>
var Totals = [ ];
var clicks = 5;
function calculate() {
var form = document.getElementById("frmOne");
var A = form.txtFirstNumber.value;
var B = form.txtSecondNumber.value;
Totals.push( A + " + " + B + " = " + (1*A+1*B) );
form.totals.value = Totals.join("\n");
form.txtFirstNumber.value = form.txtSecondNumber.value = "";
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</body>
</html>
I want to add in an if statement that checks to see if the number of items remaining is 0. If it is 0, I want it to say finished and the button be disabled / disappear. Can anyone help? TIA I have a javascript controlling the display of a DIV that I did a while back that needs a bit more tweaking to add function to hide the DIV on specific holidays. As it is now, by default, the DIV is being hidden unless it is M-F between 8:00AM-6:00PM: Code: <script type="text/javascript">
onload=function(){
var rightNow = new Date();
var day = rightNow.getDay();
var hour = rightNow.getHours();
var minute = rightNow.getMinutes();
var formDisplay = 'none'; // unless we see otherwise
var forwardDisplay = 'block'; // unless we see otherwise
if(day==1 || day==2 || day==3 || day==4 || day==5) { // if chat is avalable on these days
if((hour>=8) && (hour<=17)) // if chat is avalable between these times
formDisplay = 'block', forwardDisplay = 'none';
}
document.getElementById('ChatForm').style.display = formDisplay;
document.getElementById('ChatForward').style.display = forwardDisplay;
}
</script>
Im assuming that I would just add more else if statements, but not really sure the cleanest way to assign specific dates using this format. Any help is appreciated I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript. When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page. I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good. Thank Hello Friends, i have a small problem and need your help. I have a form with 4 radio buttons, the scenario is, when a user click on a radio button a hidden content will be displayed and the other three radio buttons will be disabled so that at one time a user can only click and view single radio button and the hidden content. Here is my code to show hide the hidden content but i need when the user select one radio button the other radio buttons should disable. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test</title> <style type="text/css" media="screen"> .hide{ display:none; } </style> </head> <body> <div id="tabs"> <div id="nav"> <p>Show Div 1:<input type="radio" name="tab" value="value1" class="div1" /></p> <p>Show Div 2:<input type="radio" name="tab" value="value2" class="div2" /></p> <p>Show Div 3:<input type="radio" name="tab" value="value3" class="div3" /></p> <p>Show Div 4:<input type="radio" name="tab" value="value4" class="div4" /></p> </div> <div id="div1" class="tab"> <p>this is div 1</p> </div> <div id="div2" class="tab"> <p>this is div 2</p> </div> <div id="div3" class="tab"> <p>this is div 3</p> </div> <div id="div4" class="tab"> <p>this is div 4</p> </div> </div> <script type="text/javascript" charset="utf-8"> (function(){ var tabs =document.getElementById('tabs'); var nav = tabs.getElementsByTagName('input'); /* * Hide all tabs */ function hideTabs(){ var tab = tabs.getElementsByTagName('div'); for(var i=0;i<=nav.length;i++){ if(tab[i].className == 'tab'){ tab[i].className = tab[i].className + ' hide'; } } } /* * Show the clicked tab */ function showTab(tab){ document.getElementById(tab).className = 'tab' } hideTabs(); /* hide tabs on load */ /* * Add click events */ for(var i=0;i<nav.length;i++){ nav[i].onclick = function(){ hideTabs(); showTab(this.className); } } })(); </script> </body> </html> Thank you for your help in advance. Hi, Well I wanted to ask that how to disable the function of hide button in meebo bar, its that small arrow like button on the right side, which is when clicked hides meebo bar, I want to disable it, so that even if it is clicked it doesn't hide the bar. To see the bar you can visit http://www.meebo.com/websites hello, i have this script that doesn't work exactly right yet. but i can't figure it out what i need to chance to let it work. in the script i want the button to be enabled when both text boxes are filled, atm when i fill in 1 it will already enable the button and thats exactly what i don't want. im quite a nooby in this so could some1 help me ? tyvm in advance code___________________ <html> </head> <script type="text/javascript"> function ButtonDisable1(text) { if (text.length > 0) document.getElementById("submit_button").disabled = false; else document.getElementById("submit_button").disabled = true; } </script> </head> <body> <input type="text" id="search_text" onchange="ButtonDisable1(this.value)"> <input type="text" id="search2_text" onchange="ButtonDisable1(this.value)"> <input type="submit" id="submit_button" value="Search" disabled="true"> </body> </html> Hi Experts .. not sure if this is the right forum. However here is my question: I have a date field with 25 values (prepopulated Radio Buttons) where we are asking the members to select one day to volunteer. Once a member selects a day we would like to disable that Radio button value (Greyed out) for other members. So basically out of 25 available days we would like to disable values as soon as a member selects one. The field is on a classic ASP form with SQL Server backend. How can I accomplish the above? Please advice. Regards Vinny All, I have the following code: Code: <input type="button" name="button" value="Submit" onclick="javascript:get(this.myform);"> How can I change this to make this button disabled after the onclick? Thanks in advance. Hi, I have two buttons save and finish. I want to enable the button finish whenever I click the save button. page1.jsp. <script> InitialLoad() { document.getElementById('finish').disabled = true; } save(){ document.getElementById('finish').disabled = false; } </script> <html> <body onload= "InitialLoad()"> <input type="submit" name="finish" id=="finish" value="finish"> <input type="submit" name="save" value="save" onclick= save();> </body> </html> strutsconfig.xml <forward name="success" path="atre.dodUpgrade.show.page1"/> Using the above I can enable it temporarly. But whenever I call the forward page it on action class forward = mapping.findForward("success"); The Problem is page Refresh again and it shows disabled button for finish. what could be the solution for this? Thanks Hi, I have a button with a class name as below: <input type="button" class="test" value="Add" onclick=Dothis(this);> class test { background-image: url("test.png"); } I would like to disable the button when clicked function Dothis (element) { element.disabled = 'true'; } This is working fine (i'm seeing it as disabled(grayedout)) when i wont set any class. But when i set the class to "test" i'm not seeing any change. Can you please let me know how i can resolve this. Hi guys, At the moment i have this code which disable the middle button in Safari and Chrome.. Code: $('body').mousedown(function(e){
if(e.button==1)
return false
}
);
How can I disable it in Firefox and IE?.. i think IE middle button ==4 but its not working for me. Thanks in advance! Hi Everyone, I want to create some web pages in asp.net on which I want to avoid the user to refresh the page. I have disabled the refresh options using key board event which are as follows: 1) F5 2) Ctrl + F5 3) Ctrl + R But I want to avoid user clicking on the Refresh Button of the browser. So please help me how can we disable the Browser Refresh button/menu using Javascript ? Thanks & regards, Anthony D'souza. Hello all, I have 2 radio buttons update bsc value update mnr value when user selects update mnr value, two more radio buttons should appear. I have mnr value I do not have mnr value. On selecing I do not have mnr value im submitting the form and enabling the user to select values from dropdown. ( not shown in the code as it is a coldfusion code.). On submit I am not able to still keep the 'but2', and 'my_select3' elements disabled. Please advice. I have been working on this since quite sometime. <script language="JavaScript"> function makeChoice() { var obj1 = document.getElementById('box1') var obj2 = document.getElementById('box2') if (document.getElementById('but1').checked) { obj2.setAttribute('readOnly','readonly'); obj1.removeAttribute('readOnly'); document.getElementById('but1').disabled=true; document.getElementById('but2').disabled=true; } else if (document.getElementById('but2').checked) { obj1.setAttribute('readOnly','readonly'); obj2.removeAttribute('readOnly'); document.getElementById('but2').disabled=true; document.getElementById('but1').disabled=true; } } </script> <script type="text/javascript"> function showSelect() { if (document.getElementById('but2').checked) { document.getElementById('but2').disabled=true; } } </script> <script type="text/javascript"> function showSelect1() { if (document.getElementById('but2').checked) { document.myform.submit(); document.getElementById('but2').disabled=true document.getElementById('my_select3').disabled=true } } </script> <td><input type="radio" id="but1" name="vals" onclick="makeChoice()"></td> <td>Update BSC Value </td> <tr> <td><input type="radio" id="but2" name="vals" onclick="makeChoice();showSelect();" ></td> <td>Update MNR Value </td> <td> <input id="my_select1" class="show" type="radio" name="my_select1" onclick="this.myform['my_select1'].disabled=true"></td> <td> I have a Position Number </td> <td><input id="my_select3" class="show" type="radio" name="my_select3" onclick="showSelect1();"></td> <td> I do not have a Position Number </td> how can i make a button disable when the page is loaded first time and then make it enable on the click of other button in javascript.
hi again hi i want to create a form Form have 2 submit buttons also have one drop down list when selecting dropdown list item disable the one submit button plzzzzzz help m for do this with sample code needed. Hi, I am having a problem with my script used to disable my submit button. I want the button to disable upon correct submission of the form, and the button to be kept enabled if the required fields are not filled in. I have the following code at the moment (which only does the first if statement). Code: SCRIPT CODE:
<script type="text/javascript" >
function validateForm()
{
var amount=document.forms["expenserecord"]["amount"].value;
var picker=document.forms["expenserecord"]["picker"].value;
var desc=document.forms["expenserecord"]["description"].value;
if (amount==null || amount=="" || picker==null || picker=="" || desc==null || desc=="") {
alert("All required fields must be filled out.");
document.getElementById("sub").disabled = false;
return false;
}
else {
document.getElementByID("sub").disabled = true;
}
}
</script>
BUTTON CODE:
<p><input type="submit" value="Submit" onClick="return validateForm()" id="sub"></p>
Dear All, The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <script language="javascript"> function enable_text(status) { status=status; var form = document.forms[0]; var rads = form.elements.radio1; for (var i=0; i < rads.length; i++) { var color = rads[i].checked? "red" : ""; document.getElementById("check"+i).style.backgroundColor = color; document.getElementById("check"+i).disabled = status; } } </script> <body onload=enable_text(false);> <div> <form name="form1" method="post" action=""> <table cellspacing="0" cellpadding="0" width="100%" border="0"> <tr> <td class="PortletText1" nowrap><strong>ALL Data</strong></td> <td class="PortletText1" nowrap><strong>YES</strong></td> <td class="PortletText1" nowrap><strong>NO</strong></td> <td class="PortletText1" nowrap><strong>N/A</strong></td> <td class="PortletText1" nowrap><strong>Comments</strong></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td class="PortletText1" nowrap>Data 1:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td> <td class="PortletText1" nowrap> <input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 2:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td> </tr> <tr> <td class="PortletText1" nowrap>Data 3:</td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td> <td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td> <td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td> </tr> <tr> </div> </form> </body> </html> </body> </html> thanks in advance. Regards sona I am having some trouble trying to adapt some code to create a better user experience. I use a Rapid E-learning Dev Tool called Udutu. Its limited in some functionality but I'm hoping to find a workaround. As with a lot of e-learning, user activity including their assessment score is passed to the LMS via a Scorm connection. I need to get that score and then based on the percentage (i.e <= 79) re-direct the user automatically to a page. To get the score within Udutu is as follows: Code: <p>Your score is: <span id=theScore></span>
<script>try{var theScoreEl = document.getElementById('theScore');theScoreEl.innerHTML= Math.round(UDUTU_API.generateScore());}catch(ex){}</script>
% </p>
This bit works fine but now I need to include a if statement to look at the value that it produces and redirect the user accordingly. I've tried to do this but I keep breaking the above code. Any help would really be appreciated I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery How would I go about having a button similar to this display within an if statement if the statement is true? Thank you in advance for the help. Code: <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="HEZUCTL9VASYW"> <table> <tr><td><input type="hidden" name="on0" value="Color">Color</td></tr><tr><td><select name="os0"> <option value="White">White </option> <option value="Transparent">Transparent </option> </select> </td></tr> </table> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> |
|||||||