JavaScript - Disable/enable Textbox From Drop Down
Hi there.
I came across this forum while searching for an example of how to do something in Javascript, and found the post helpful, but didn't quite answer my query completely... It was a very old thread, few years old, though so I thought best not to revive it from the murky depths Basically, I very rarely use JavaScript... in fact, I rarely do any programming at all, but I'm trying to build a basic site at the moment, and I'm wanting to disable/enable a text box based on the value of a drop down menu... The idea behind it is that I have a sub title, and in the admin panel, I want to be able to set whether the sub title is picked randomly from a database, or whether it chooses one, and only one... So in the admin panel, I've got a page that has a drop down menu with two options. Static, and Random. Below this, I've got a text box called Static ID... In this text box, the administrator would insert the database row ID for the specific sub title they want... Obviously this Static ID field only applies if you select a Static sub title, rather than a Random sub title... So what I want to happen is for the text box to be disabled if the drop down menu is selected as Random... and then enabled if the drop down is selected as Static... So I came across the following script on an old post as mentioned earlier: Code: <script type = "text/javascript"> function enableTextbox() { if (document.getElementById("dropdown").value == "New") { document.getElementById("txt1").disabled = false; } else { document.getElementById("txt1").disabled = true; } } </script> <form action="adm_subtitle.php" method="post"> Static or Random? <select name="staticrand" id"staticrand" onchange="enableTextbox()"> <option value="static">Static</option> <option value="rand selected="selected">Random</option> </select> Static ID <input type="text" value="0" name="staticid" id="staticid" maxlength="3" disabled="true" /> <input type="submit" name="submitsubtitleset" value="Submit" /> </form> With a bit of other formatting that isn't necessary for this example... Now, this works if I change the drop down box to Static, it'll enable the text box, and then disable the text box if I select Random... The problem I've got though, is with a bit of PHP code mixed in with the form, it will check the current value of the setting, and then choose which drop down menu to pick as selected... so if in the backend config it's set to "rand", it'll automatically pick Random when the page loads, and if it's set to "static", it'll automatically pick Static when it loads the page... If it's already set to Static, the page loads and the text box is disabled. I have to select Random from the drop down list, and then select Static again to enable the box... Is there anyway that I can enable it if Static is already selected when the page loads and then disable it when Random is selected, but still keep the functionality that it is already disabled when the Random option is selected on load? I hope that makes sense... Cheers, Mike. Similar Tutorialshi again i have form with name age payment mode ( combo boxe include payment mode 1,payment mode 2 , payment mode 3) when i select a payment mode-01 enabbleling 5 combo boxes if slect payment mode 2 dissabling that combo boxes... how do i do this thing plzz give me sample code...................... 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 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 I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question. The code is in Jquery and Javascript and i'm still learning. I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too.... Code: //Next Page Function $('.next').click(function() { if (current_page == no_pages){ //do nothing } else{ if (flag==false) { try { checkAnswer(document.getElementById('quizForm')) flag=true; return false; } catch(err) { if (err.number !=-2146823281) { alert(err.description); } } } next_page = (current_page + 1); $("#content").fadeOut("slow",function(){ $("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')} ); current_page ++; $("#current_page").html(current_page); progress_bar(); } }); This is what the code looks like now without the changes.... Code: //Next Page Function $('.next').click(function() { if (current_page == no_pages){ //do nothing } else{ next_page = (parseInt (current_page) + 1); $("#content").fadeOut("slow",function(){ $("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')} ); current_page ++; $("#current_page").html(current_page); progress_bar(); } }); I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing. I put this bit together but it doesn't do anything.... Code: else{ if (document.getElementById('quizForm')){ if (document.quizForm.cc.disabled==true) document.quizForm.cc.disabled=false else {return true;} Any advise? Thanks. Hello. I have a for loop, that automatically creates textfields and checkboxes. These of course have the same name and I am using request.getParameterValues to retrieve them. However, I am struggling on this rather simple issue. I am no javascript guru, so maybe you guys could help me out. I have tried googling for this answer, but havent found anything that can help my problem exactly. I have three text fields on each row and one checkbox. I would like for each checkbox I click, that the textfields to be enabled. A sample code he Code: <td><input type="text" size="10" name="pris" disabled="disabled"></td> <td><input type="text" size="10" name="toppfart" disabled="disabled"></td> <td><input type="text" size="10" name="motorinstallasjon" disabled="disabled"></td> <td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>" onclick="(pris.disabled=!this.checked)& (toppfart.disabled=!this.checked)& (motorinstallasjon.disabled=!this.checked)"> </td> However this doesnt quite work :-) I have tried with document.Form.pris but that didnt help either. Within my project, using PHP/HTML/Javascript, I am trying to set up a page where a corresponding submit button is enabled when a given checkbox is checked. What complicates my attempt is that the checkboxes and submit buttons are in the form of arrays. Here is a snippet of my code: Code: <form name="myform4" id="list_apps" method="post"> <?php for ($i=0; $i<$num_rows;$i++) { ?> <p> <input type="checkbox" name="app[]" id="app[]" onclick="enable_perm()"> <input name="set_perm[]" type="submit" id="set_perm[]" value="Set Permissions"> </p> <?php } </form> Here is my attempt at using Javascript to disable the first submit button after clicking any check box: Code: function enable_perm() { document.myform4.set_perm[0].disabled = true; } What am I missing here, or, how do I enable/disable submit buttons that are part of an array? Hi guys, it's been a while since I've been here Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button. I googled it but didn't find anything too useful except for this: http://www.aHappyDeal.com/wj_r.asp?lid=2109 but I'm not sure how to edit it for the toggle. Thanks! How can I make this code disable the submit button once it has been pressed, then if the user hits back or GOES back, it will re-enable it again? Code: <SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript"> function formControl(submitted) { if(submitted=="1") { commentForm.Submit.disabled=true alert("Thanks for your comments!") } } </SCRIPT> Thanks! ShadowIce~ I'm trying to enable/disable a textarea. I am able to do a mouseout disable, but cannot do a mouseover enable. For instance, when I click on the image, a textarea shows up. When I move my mouse to a different location, the textarea disables fine. Then when I try to move my mouse back over the textarea, it DOES NOT enable for me to write in it. What am I doing wrong? Thanks! Another bonus question, I just happen to try out this code in IE and the textareas are not showing up where I click. I assume that I'm capturing the X/Y coordinates incorrectly for an IE browser. Any pointers? ********* CODE ************* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mouse position</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> var posx, posy; // initialize cache var cache= []; var count=0; function getMouse(e){ posx= posy= 0; var ev= (!e) ? window.event : e;//IE:Moz if (ev.pageX){//Moz posx=ev.pageX+window.pageXOffset; posy=ev.pageY+window.pageYOffset; } else if(ev.clientX) {//IE posx=ev.clientX+document.body.scrollLeft; posy=ev.clientY+document.body.scrollTop; } else { // old browsers return false; } } function showP(){ // object to store this coordinate var thisCoord= {}; // x & y values stored as object attributes thisCoord.posx= posx; thisCoord.posy= posy; // check the cache for this coordinate object if ( !cache[thisCoord] ) { // if it hasn't been cached yet, push it onto the stack cache.push(thisCoord); var newDiv= document.createElement("textarea"); newDiv.setAttribute("class","div3"); newDiv.setAttribute("id",count); newDiv.style.width='180px'; newDiv.style.height='45px'; newDiv.style.visibility="visible"; newDiv.style.top= (thisCoord.posy -10) +'px'; newDiv.style.left= (thisCoord.posx -6) +'px'; newDiv.setAttribute("onmouseout","this.disabled=true"); newDiv.setAttribute("onmouseover","this.disabled=false"); // append to the document BODY document.getElementsByTagName("body")[0].appendChild(newDiv); count++; } } </script> <style type="text/css"> .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5} .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;} .div3 {position:absolute;visibility:hidden;z-index:10;font-size:14px;font-weight:450;color:black;} textarea[disabled='disabled'] { background:yellow; color:blue; cursor:default; } </style> </head> <body> <div id="div1" class="div1"> <img id="theImage" src="./YourImage.jpg"> </div> <script type="text/javascript"> // setup event handlers // document BODY onmousemove document.getElementsByTagName("body")[0].onmousemove= function(e){ getMouse(e); }; // the image onclick document.getElementById("theImage").onclick= showP; //onMouseOut </script> </body> </html> Hi guys, it's been a while since I've been here Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button. I googled it but didn't find anything too useful except for this: http://www.codetoad.com/javascript/e...rm_element.asp but I'm not sure how to edit it for the toggle. Thanks! 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> Guys Need Help here... here i send attach my script. i need combine 2 function script into . but i can figure it out. can everyone helps me. Code: <?php require_once('../Connections/koneksi.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cant delete all rows"); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } function selectnama() { var i = 0; i = document.form1.txtcustomer.value; i= i.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' '); //alert(cust[i]); document.form1.select2.value = i; } function change2() { document.form1.txtcustomer.value = document.form1.select2.value; } function enable_text(status) { status=!status; document.form1.qty_material.disabled = status; } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form name="form1" method="post" > <table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="6"> <tr> <td style="width:20px;"><INPUT type="checkbox" name="chk" /></td> <td> <input type="text" name="txttipe[]" placeholder="Tipe" id="txttipe" size="40"/> / <input name="txtcustomer" type="text" id="txtcustomer" onkeyup="selectnama()" size="10" maxlength="10"/> <select name="select2" style="color:blue;" onchange="change2()" > <option></option> <?php $query = mysql_query("select right(KUNNR,6), NAME1 from kna1 order by NAME1") or die(mysql_error()); $query3 = mysql_query("select * from spg_kna1_exception order by NAME1") or die(mysql_error()); while($row = mysql_fetch_array($query)) { echo "<option value=".$row[0].">$row[1] - $row[0]</option>"; } while($row3 = mysql_fetch_array($query3)) { echo "<option value=".$row3[0].">$row3[1] - $row3[0]</option>"; } ?> </select>; <input type="checkbox" name="qty_matnr" onClick="enable_text(this.checked)" > Qty <input type="text" name="qty_material"> </td> </tr> </table> <INPUT type="button" value="Add Model" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Model" onclick="deleteRow('dataTable')" /> </form> </body> </html> Hi, I have a form consisting of nine text fields (labelled 1-9) and nine radio buttons for each of the text fields. I want to enable the radio buttons when text is entered into the field corresponding to that particular radio button. Is there a way of achieving this using a JavaScript onChange event? Thank you in advance. hi, i am using <input type = "file" id = "upload"> in my html page. i want to disable the textbox of this control so that user cannot type any file location here. user can upload file only through browse button. is there a way to disable this textbox thru javascript? thnx I found this script, and it works great: Code: <script type="text/javascript"> function disable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","true"); } } </script> I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript"> function enable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","false"); } } </script> But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> disable<br/> <input type="radio" name="test" onclick="enable('D1')" /> enable<br/> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/> </fieldset> </form> Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /> </fieldset> <input type="radio" name="test" onclick="disable('D2')" /> <fieldset id="D2"> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /> </fieldset> <input type="radio" name="test" onclick="disable('D3')" /> <fieldset id="D3"> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /> </fieldset> </form> And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo My problem has to do with having more then two drop down menus and disabling selected items. In this example whenever anyone selects an option from either of the drop-down menus the opposing drop-down menu greys out the selection: Code: <script type="text/javascript"> function updateSelect(changedSelect, selectId) { var otherSelect = document.getElementById(selectId); for (var i = 0; i < otherSelect.options.length; ++i) { otherSelect.options[i].disabled = false; } if (changedSelect.selectedIndex == 0) { return; } otherSelect.options[changedSelect.selectedIndex].disabled = true; } </script> Code: <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'subject2');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" > <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> The above code works perfect. My problem is extending this to even more drop-down menus. I'm not a javascript guy but my logic was thinking something like this: Code: ARRAY = "subject1, subject2, subject3"; <select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'ARRAY');" > ...either an array to include multiple drop-down menus or what about something like this? Code: <select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1, subject2, subject3, subject4');" > Obviously I know my code solutions don't work, however, I'm hoping they can provide someone with clarity with respect to what I'm trying to accomplish. I sincerely would appreciate anyone's help on this. Hi. Please help in validating both a drop down list and textbox if the other is not empty alert message will pop-up and vice versa. The validation will be such as follows: 1. If each drop down list is selected and the textbox next to it is not equal to 0 or not empty, DO NOTHING. 2. If drop down list is not selected and textbox is empty DO NOTHING. Below condition will check if both drop down list and textbox if one of the other is empty then message will appear: 3. If drop down list is selected or index is not equal to 0 AND textbox is empty or equal to 0, alert will pop-up. 4. If drop down list is not selected or index is equal to 0 AND textbox is not empty or not equal to 0, alert will pop-up. I guess with the condition above will validate each drop down list and textboxes show to each other. Below is my code that I use and it doesn't work. Please help making it work. Of course I didn't include the <script tag> but it is oncluded in the original page. Thanks. Code: function validation_OK(iRows,iCols) { var iRows; var iCols; var desigamt = new Array(iRows); desigamt[0] = Number(document.getElementById('i').value); desigamt[1] = Number(document.getElementById('j').value); desigamt[2] = Number(document.getElementById('k').value); desigamt[3] = Number(document.getElementById('l').value); desigamt[4] = Number(document.getElementById('m').value); desigamt[5] = Number(document.getElementById('n').value); desigamt[6] = Number(document.getElementById('o').value); desigamt[7] = Number(document.getElementById('p').value); desigamt[8] = Number(document.getElementById('q').value); desigamt[9] = Number(document.getElementById('r').value); var i; var j; for (i=0; i < iRows; i++) { desigamt[i] = new Array(iCols); iCols[0] = document.getElementById('I').value; iCols[1] = document.getElementById('J').value; iCols[2] = document.getElementById('K').value; iCols[3] = document.getElementById('L').value; iCols[4] = document.getElementById('M').value; iCols[5] = document.getElementById('N').value; iCols[6] = document.getElementById('O').value; iCols[7] = document.getElementById('P').value; iCols[8] = document.getElementById('Q').value; iCols[9] = document.getElementById('R').value;; for (j=0; j < iCols; j++) { if(a[i][j] = "" || a[i][j] != "") { return true; } else { if (a[i].selectedIndex!=0 && a[j].value == "") { var answer = confirm("Please enter the amount to designate on the selected partner agency. Clicking the CANCEL button will delete the partner agency selected. Do you want to continue?") if (answer) { a[j].focus(); } else { a[i].selectedIndex=0; } } else { var answer = confirm('Please select a partner agency to designate the amount you entered. Clicking the CANCEL button will delete the amount you entered. Do you want to continue?') if (answer) { a[i].focus(); } else { a[j].value=0; } } } } } return (desigamt); } Below is my html code. FYI: I have lots of function included and this function I am trying to make it work is one of them. Please help!!!!! Code: <table> <tr> <td> <select id="I" name="I" size="1" style="overflow-x:scroll; width:380px; " onchange="return validation_OK();"> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['I']); ?> value="<?php echo $prompt; ?>"><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="i" name="i" class="text" type="text" value="<?php safeEcho($form['i'])?>" style="width:90px;" onChange="CalculateTotal();return validation_OK();" /> <?php helper_error('i');?> </td> </tr> <tr> <td> <select id="J" name="J" size="1" style="overflow-x:scroll; width:380px; " onchange="return validation_J();"> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['J']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="j" name="j" class="text" type="text" value="<?php safeEcho($form['j'])?>" style="width:90px;" onChange="CalculateTotal();return validation_J();" /> <?php helper_error('j');?> </td> </tr> <tr> <td> <select id="K" name="K" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['K']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="k" name="k" class="text" type="text" value="<?php safeEcho($form['k'])?>" style="width:90px;" onChange="CalculateTotal()" /> <?php helper_error('k');?> </td> </tr> <tr> <td> <select id="L" name="L" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['L']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="l" name="l" class="text" type="text" value="<?php safeEcho ($form['l'])?>" style="width:90px;" onChange="CalculateTotal()" /> <?php helper_error('l');?> </td> </tr> <tr> <td> <select id="M" name="M" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['M']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="m" name="m" class="text" type="text" value="<?php safeEcho($form['m'])?>" style="width:90px;" onChange="CalculateTotal();" /> <?php helper_error('m');?> </td> </tr> <tr> <td> <select id="N" name="N" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['N']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="n" name="n" class="text" type="text" value="<?php safeEcho($form['n'])?>" style="width:90px;" onChange="CalculateTotal();" /> <?php helper_error('n');?> </td> </tr> <tr> <td> <select id="O" name="P" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['O']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="o" name="o" class="text" type="text" value="<?php safeEcho($form['o'])?>" style="width:90px;" onChange="CalculateTotal();" /> <?php helper_error('o');?> </td> </tr> <tr> <td> <select id="P" name="P" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['P']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="p" name="p" class="text" type="text" value="<?php safeEcho($form['p'])?>" style="width:90px;" onChange="CalculateTotal();"/> <?php helper_error('p');?> </td> </tr> <tr> <td> <select id="Q" name="Q" size="1" style="overflow-x:scroll; width:380px; " > <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['Q']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="q" name="q" class="text" type="text" value="<?php safeEcho($form['q'])?>" style="width:90px;" onChange="CalculateTotal();" /> <?php helper_error('q');?> </td> </tr> <tr> <td> <select id="R" name="R" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['R']); ?> value="<?php echo $prompt; ?>" ><?php safeEcho($descode); ?> </option> <?php endforeach; ?> </select> </td> <td> $<input id="r" name="r" class="text" type="text" value="<?php safeEcho($form['r'])?>" style="width:90px;" onChange="CalculateTotal();" /> <?php helper_error('r');?> </td> </tr> </table> I hope you can help me. Thanks a lot. when user populate info it will appear like this: ------------------------- chkbox | name | number ------------------------- radbtn | MJ | 234123 radbtn | MD | 343543 radbtn | AB | 453466 Is uncertain that how many info will appear as its from database. I am able to enable the radbtn with chkbox by getting radbtn name. How can i enable only the selected radbtn textbox under name and number in order for user to edit it ? thanks anyone who can solve it! 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> |