|
JavaScript - Disabling A Textbox When Checkbox Is Ticked
Hi,
I have a checkbox on a page which I have styled using some jquery code. I want the textbox underneath the checkbox to be disabled if the checkbox is ticked and enabled if it is unticked. I tried using javascript to do this but I beleive it didn't work because I have existing javascript/ jquery code on the page. Any help/advice would be fantastic, here is a link to the page : http://recipesuggester.co.uk/index.php Thankyou Similar TutorialsHey guys I've got a really simple form: Code: <form name="nextform" method="post" action="page2.php"> <input type="checkbox" name="accepted" />I have read and accept the <a href="tsandcs.php" target="_blank">terms and conditions</a><br /><br /> <input type="image" name="next" alt="Next" src="'.$imagefolder.'next.jpg" /> </form> What I need to do is have it so that the form won't submit unless the tick box has been ticked. If they haven't ticked the box, then a little alert prompting them to do so would be great. I want to use JavaScript to do this, but if someone doesn't have JS enabled, I would like the form to submit anyway. I don't really want to grey the button out a tad. Any ideas guys? Cheers hi.. i have a jsp page in which there is a table. the number of rows is variable and depends on a pre-defined query. every row has 2 editable textboxes which are initially disabled. i need to activate these textboxes according to the radio button which corresponds to the particular row in question. can anybody pls tell me how to do that. the code that i have written is as follows.if there is any tweaking to be done pls suggest the same. code: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page import="java.util.ArrayList" %> <%@page import="DTO.UserGroupDTO"%> <html> <head> <script type="text/javascript">} funtion enable(){ document.getElementById("inp1").disabled=false; document.getElementById("inp2").disabled=false; } function disable(){ document.getElementById("inp1").disabled=true; document.getElementById("inp2").disabled=true; } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Update User Group Inquiry Results</title> </head> <body bgcolor="#aabbcc"> <center> <h3>Update User Group Inquiry Results</h3><br><br> <%ArrayList arrayList=(ArrayList)request.getAttribute("myList"); ArrayList list; int size=arrayList.size(); Integer groupId=null; String userGroupName=null; String description=null; %> <form action="/test/BankServlet"> <table style="color: highlight" border="5"> <% if(!(arrayList.isEmpty())){%> <tr><th>Group ID</th><th>User Group Name</th><th>Description</th><th>Selection</th></tr> <% for(int i=0;i<size;i++){ UserGroupDTO userGroupDTO=(UserGroupDTO)arrayList.get(i); userGroupName=userGroupDTO.getUserGroupName(); groupId=userGroupDTO.getGroupId(); description=userGroupDTO.getDescription(); %> <tr> <td><%out.println(groupId); %></td> <td><input id="inp1" disabled="disabled" value="<% out.println(userGroupName); %>"></td> <td><input id="inp2" disabled="disabled" value="<%out.println(description); %>"> </td> <td> <input type="radio" name="radio2" value="<%=groupId %>" onclick="enable()"> </td> </tr> <% } } else{ out.println("No match found"); } %> <tr> <td><input type="hidden" name="strTitle" value="UpdateUserGroup"></td> </tr> <tr> <td><input type="hidden" name="value" value="<%=groupId%>"></td> </tr> </table><br> <input type="submit" value="Update User Group" style="background-color: gray"> </form> <form action="/test/jsp/UserGroup.jsp"> <input type="submit" value="Go Back to User Group Operations Page" style="background-color: gray"> </form> <br><br><br><br> </center> </body> </html> I have a simple html form with 2 text fields and submit button 1 user name 2 pwd/token and 1 checkbox 'First time user' if 'first time user' is selected then the 'Submit' button to be enabled only if the customer puts exactly 6 digits on pwd/token. if it's unchecked then the submit button to be enabled only if the customer enters 10 digits(pin_token code) please send me code will be very thankful for your help Hi.. I have form and i want to input data using barcode and it will display on textbox and after input on the first textbox the focus will go to next textbox untill it will go on the last textbox and on the last textbox it will automatically save the data's on the database. How is it possible? here is my sample code: Code: <?php
error_reporting(0);
date_default_timezone_set("Asia/Singapore"); //set the time zone
$con = mysql_connect('localhost', 'root','');
if (!$con) {
echo 'failed';
die();
}
mysql_select_db("mes", $con);
?>
<html>
<head>
<script type="text/javascript">
function ini()
{
// Retrieve the code
var code =document.getElementById ("code_read_box1").value;
var code =document.getElementById ("code_read_box2").value;
var code =document.getElementById ("code_read_box3").value;
var code =document.getElementById ("code_read_box4").value;
var code =document.getElementById ("code_read_box5").value;
var code =document.getElementById ("code_read_box6").value;
// Return false to prevent the form to submit
return false;
}
</script>
</head>
<body onLoad="document.barcode.code_read_box1.focus()">
<form name=barcode onsubmit = "return ini()">
<input type="text" id="code_read_box1" value="" /><br/>
<input type="text" id="code_read_box2" value="" /><br/>
<input type="text" id="code_read_box3" value="" /><br/>
<input type="text" id="code_read_box4" value="" /><br/>
<input type="text" id="code_read_box5" value="" /><br/>
<input type="text" id="code_read_box6" value="" /><br/>
</form>
</body>
</html>
Hello. I've been teaching myself HTML and CSS for a while, and now I've moved into the world of Javascript (but I'm still very much a beginner). For practice, I've been building a sample sign up form for a mock website, and I'm having problems with the birthdate section. The idea I had was to have MM, DD, and YYYY be the default values of my 3 textboxes (as an example for users), then set the value to nothing when the box gained focus. That all works fine, but I ran into problems when I tried to write an if statement to set the value back to MM, DD, or YYYY if the value was still nothing when the user clicked away. As it is now it just replaces the text inputted into the textbox (which of course is not good). Any ideas for what the problem might be? Code: <form name="signup" action="javascript:void(0);" method="post">
<table>
<tr>
<td>Date Of Birth:</td>
<td>
<input name="DOBmonth" type="text" value="MM" size="2" style="color: #555555;" onFocus="clearDOBmonth()" onBlur="restoreDOBmonth()" />
<input name="DOBday" type="text" value="DD" size="2" style="color: #555555;" onFocus="clearDOBday()" />
<input name="DOByear" type="text" value="YYYY" size="4" style="color: #555555;" onFocus="clearDOByear()" /></td>
</tr>
<tr>
<td></td>
<td><button name="Submit" type="submit" style="font-size: 1em;">Sign Up</button></td>
</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
<!--
document.signup.DOBmonth.value="MM";
document.signup.DOBday.value="DD";
document.signup.DOByear.value="YYYY";
function clearDOBmonth() { document.signup.DOBmonth.value="";}
function clearDOBday() { document.signup.DOBday.value="";}
function clearDOByear() { document.signup.DOByear.value="";}
function restoreDOBmonth()
{
if ('document.signup.DOBmonth.value = ""')
{
document.signup.DOBmonth.value = "MM";
// alert(document.signup.DOBmonth.value);
}
}
//-->
</script>
Another side question, if I set a variable equal to the value of a textbox, then change the value of the variable, does that also change the value of the textbox? or is the variable no longer associated with the textbox. Example: Code: var a = document.form.textbox.value; a = blue; does document.form.textbox.value = blue? or is var a now completely independent of the textbox value? Thanks! irst post here, i'll try to be simple: I need to create a form where participants of a medical convention register to classes, each class lasts 3 hours, so a person who wants to attend to class starting at 10 am cannot register to 11 am, 12pm and 1pm classes, but he can register to 2pm and so on. There are 3 different classes per hour. i thought doing this using javascript, but i'm absolutely lost. Can you please give me a hint on how to do this? Thanks!! this is the part of the form that has the checkboxes. <form method="post" action="process.php"></form> <input type="checkbox" value="101" name="convention1"> 10 am: Cariovascular desease<br> <input type="checkbox" value="102" name="convention2"> 10 am: Changes on toracic surgeon<br> <input type="checkbox" value="103" name="convention3"> 10 am: New drugs on heart<br> <input type="checkbox" value="111" name="convention4"> 11 am: New drugs on heart (II)<br> <input type="checkbox" value="112" name="convention5"> 11 am: Dynamic process on blood pressure<br> <input type="checkbox" value="113" name="convention6"> 11 am: Aortic disease<br> <input type="checkbox" value="121" name="convention7"> 12 am: Pulmonar Pressure<br> <input type="checkbox" value="122" name="convention8"> 12 am: Open table<br> <input type="checkbox" value="131" name="convention9"> 1 pm: Neurological aspects on heart rate<br> <input type="checkbox" value="132" name="convention10"> 1 pm: Cardiovascular disease (II)<br> <input type="checkbox" value="133" name="convention11"> 1 pm: Mioresponse on heart failure<br> <input type="checkbox" value="141" name="convention12"> 2 pm<br> <input type="checkbox" value="142" name="convention13"> 2 pm<br> <input type="checkbox" value="143" name="convention14"> 2 pm<br> <input type="checkbox" value="151" name="convention15"> 3 pm<br> <input type="checkbox" value="152" name="convention16"> 3 pm<br> <input type="checkbox" value="153" name="convention17"> 3 pm<br> <input type="submit"></input> </form> So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie. Code: var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
return document.getElementById(id);
}
var temperature = function (){//This function converts the value the user provides
if($("to_celcius").checked == true)//if checked, then do this conversion
{
$("degrees_celcius").disabled = true;
var far = parseFloat($("degrees_fahrenheit").value );
if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
{
alert("Please enter a valid temperature.")
return;
}
var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
$("degrees_celcius").value = far_cel;
}else ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
{
$("degrees_fahrenheit").disabled = true;
var cell = parseFloat($("degrees_celcius").value);
if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
{
alert("Please enter a valid temperature.")
return;
}
var cel_far = Math.round(cell * 9/5 + 32);
$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
}
}
function reset()//resets the text box fields
{
$("foofoo").reset();
}
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;
}
Code: <body>
<form id="foofoo" name="foofoo">
<div id="content">
<h1>Convert temperature</h1>
<input type="radio" name="conversion_type" id="to_celcius" />From Fahrenheit to Celcius<br />
<input type="radio" name="conversion_type" id="to_fahrenheit" />From Celcius to Fahrenheit<br />
<br />
<label>Degrees Fahrenheit:</label>
<input type="text" id="degrees_fahrenheit" name="cat" class="disabled" /><br />
<label>Degrees Celcius:</label>
<input type="text" id="degrees_celcius" name="poo" class="disabled" /><br />
<br />
<input type="button" id="convert" value="Convert" /><br />
<br />
</div>
</form>
</body>
Ok I just gota ask... I read this originally and nearly killed my self laughing... then my brain got the best of me and my curiosity took over... is it possible to write a javascript code that makes your web browser disable javascript? is it even possible for Javascript to access a web browser in that sort of fashion? Like can a script have that much control? ... or rather lack of control and self suicidal... but anyways Is it possible? I need to disable some keys from their default behaviour in Google Chrome on Windows with javascript. The script below works for most keys but not for F10, left Windows key, right Windows key, NumLock and left Alt. (which are the keys I need to disable) Code: <script type="text/javascript">
addEventListener("keydown", function (event) {
if(KeyID == 121 KeyID == 91 || KeyID == 92 || KeyID == 144|| KeyID == 18 ){
event.preventDefault();
}
}, true);
</script>
I have also without luck tried event.stopPropagation () - event.cancelBubble = true - return false og void(). I would like to know if their is a solution or it simply isn't possible to disable the mentioned keys. Hey all i have this piece of code before that disables the given dates i put into an array. This works great for day 2-30 (out of a 31 day month) but it does not seem to work when i select either day 1 or day 31. For day 1 it blocks out day 1 and i do not want that. The user should be able to select that day since it was selected. It does not do this for any other day. If the user selects day 2 then day 2 is selected on the calender and is not blocked. As for day 31, i don't know whats wrong with it because it never shows me an error. It's the type of error that shuts down the website with "System Unavailable" for about a minute before i can connect to the page again. Here is my code: Code: var disabledDays = ['3-31-2010','3-30-2010','3-29-2010','3-28-2010','3-27-2010','3-26-2010','3-25-2010','3-24-2010','3-23-2010','3-22-2010','3-21-2010','3-20-2010','3-19-2010','3-18-2010','3-17-2010','3-16-2010','3-15-2010','3-14-2010','3-13-2010','3-12-2010','3-11-2010','3-10-2010','3-9-2010','3-8-2010','3-7-2010','3-6-2010','3-05-2010'];
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
function noWeekendsOrHolidays(date) {
return nationalDays(date);
}
function ArrayIndexOf(array,item,from){
var len = array.length;
for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){
if (array[i] === item) return i;
}
return -1;
}
function ArrayContains(array,item,from){
return ArrayIndexOf(array,item,from) != -1;
}
Any help would be great! David What have I done wrong here? <INPUT id="purchase" onclick="document.getElementById("purchase").disabled = true;" type="submit" value="PURCHASE"> Hi, I am trying to submit a form in javascript on clicking 'Button1'.On submission,it will disable the html table 'HTMLTable1' present in it.The code which I am using is as: Code: function OnButton1_Click ( ) {
var oRows = document.getElementById('HTMLTable1').getElementsByTagName('tr');
var irows = oRows.length ;
if (confirm("Are you sure you want Submit?"))
{
for(k=1; k<=irows; k++)
{
if(document.getElementById("list"+k).selectedIndex == 0)
{
document.getElementById("list"+k).selectedIndex = 1;
document.getElementById("list"+k).options[1].style.backgroundColor = "green";
}
}
Saver();
document.getElementById("HTMLTable1").disabled = true;
}
else{
alert("Submit cancelled!");
}
}
But On submit,the html table is getting disabled just for a moment then again it becomes active and user can interact with it.Can anyone tell me where this code is misbehaving? Thanks, Anil Hi, I am using the jQuery UI Datepicker - Event Search. as a booking-system. I want to automatically disable days from my MYSQL table in my booking-system (datePicker). So, here is the deal: In my website, there is booking-system, you can reserve a room from datePicker. I have successfully created a PHP, which sends the information (name, room, date etc.) to my MYSQL. Then I have successfully created a datesonly.php, which prints only a dates from my MYSQL. So now I have to make javascript (?) which reads dates from datesonly.php and draws a booked-note to my datePicker at website (so people can see which days are booked --> no double-books!). Booked-note should be something like that day in datePicker is red. Thank you! And sorry for my bad english, I'm from Finland. EDIT: Sorry, the title should be: Disabling days from datePicker via JavaScript Hi everybody... I have some radio group boxes and according to select one of the values, the other values in another radio boxes should be enabled and checked. In the onClick method of each radiobox i call a setDefault() function to reset the value of radioboxes.... (e.g for (i;i<document.NPOrder.pSubstrate.length;i++){ document.NPOrder.pSubstrate[i].disabled=false; document.NPOrder.pSubstrate[i].checked=false; } and after that i disabled and checked the other's value...) Problem: The code in setDefault() doesn't work properly and after disabling the radios, i can't enable them again Please help me and thanks in advance... Hany I'm using meta refresh to refresh my web page. I have a small compose email window that appears via ajax when the user clicks on a name. Is there a way I can disable the screen refresh in my ajax code while they are composing their message? Hi, I have a HTML table in a form with a submit button.In HTML table I have links present in first three rows for each columns of HTML table.I want to disable those links when user submit the form.How can I handle this in javascript? Please help. Thanks in advance. Anil. Hi there, This is my request. I don't know if it CAN be done via JS, but it just seemed likely it could: Basically, I have a table echoed out by PHP: PHP Code: while($row = mysql_fetch_array($result)){ echo "<tr>"; echo "<td>".$row['Name']."</td>"; echo "<td>".$row['gig_count']."</td>"; echo "<td>" .$row['dob']."</td>"; echo "<td>".$row['Mail']."</td>"; echo "<td><a href=\"/records/add_gigs.php?id=".$row['Member_ID']."&?name=".$row['Name']."\"><button class=\"submit\">Add new Gig</button></a></td>"; echo "<td><a href=\"/certsend.php?name=".$row['Name']."&?mail=".$row['Mail']."\"><button class=\"submit\">Make Certificate!</button></a></td>"; echo "</tr>"; And if the value of gig_count is less than 20, then the 'make certificate' button will be disabled. Once gig_count is 20 or more, then it is re-enabled for that particular row. Any code towards this is greatly appreciated. Hi, Does anybody know of an example of creating a draggable iFrame in a similar way what can be done on iGoogle with the iFrame gadget using javascript? The problem that I'm having is that the elements within the iFrame can still steal the input focus when dragging the frame using the bar I'm using to initate the drag process. For example when clicking and holding the mouse down on a bar that I'm using to initiate the drag positioned above the iFrame and then moving the mouse to drag the whole frame containing the bar and iFrame I have a problem whereby if the cursor strays over the google search box on http://www.google.com the editbox steals the input focus and the dragging stops until you carefully move the mouse carefully out of the editbox control. Can anybody point me to a page/the html/css containing an iFrame containing http://www.google.com that can't be interacted with because it has a div on top of it e.g. a semitransparent one would look nice for example. Then hopefully I can incoperate the changes into my javascript on initiation of the drag of the frame to disable the elements within the iFrame? If there are any other solutions to this problem, prefereably with an example that works with browsers back as far as ie6 please let me know? Cheers Ben W Hi all, I am writing an administration panel for a web site. I want to check if the client's browser javascript enabled and if it is not enabled, a warning DIV comes telling the client to enable javascript and disable the actual page (make the actual page non-usable). Is there a way to do that? Thanks in advance telmessos Not 100% sure why or how to make this work. I have 5 options in a select drop-down. Only two of them are to disable a text field. I have written it successfully to disable on one option. How would I add the second option? I have tried many different ways, and i know its something small that i am missing. Below is the code that does not work but shows the 2 options that disable my text field. Code:
<script type="text/javascript">
function type_disable() {
var qr_type = document.getElementById('qr_type');
var qr_owner = document.getElementById('qr_owner');
if(qr_type.value == 'bio' || 'rebrand')
qr_owner.disabled = true
else
qr_owner.disabled = false
}
</script>
Code: <tr> <td align="right"><span class="re">*</span>Type: </td> <td align="left"> <select id="qr_type" name="qr_type" onChange="type_disable()"> <option value="0">Select Type</option> <option value="property">Property Code</option> <option value="ipw">IPW Code</option> <option value="bio">Biography Code</option> <option value="rebrand">Rebrand Code</option> <option value="property_rebrand">Property-rebrand Code</option> </select> </td> <td ></td> </tr> <tr> <td align="right"><span class="re">*</span>Owner: </td> <td align="left"> <input type="textbox" name="qr_owner" id="qr_owner" size="30" value=""/></td> <td ></td> </tr> Thanks for any help! |
|||||||