469,271 Members | 1,399 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

How to hide and Unhide the editfield using check box in xml file(using javascript)

Does anyone know how to have a user click a checkbox to unhide a editfield Unclick of the checkbox would hide it again. There is an example of html file on the Javascript .But I want hide and unhide same as in xml file plz give me the answer with example any body knows.
[php]
<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<input type="checkbox" name="c1" onClick="showMe('div1', this)">Show Hide Checkbox
<input type="text" id="div1" name="some" value="good">
</body>
</html>
[/php]
Oct 16 '07 #1
4 2772
nathj
938 Expert 512MB
Hi,

I've recently done this very thing using some very simple code. I'll try to help you out with this.

Front End - pre edit
In my case this is a list of items that can be reviewed., or that have already been reviewed and can now be edited.
[html]
<img src="image/edit.png" title="Click to write review" alt="Write Review" onmouseover="this.style.cursor='pointer' onclick="loadReviewControl();" />' ;
[/html]
Note: the loadReviewControl function takes a numebr of parameters as you will see in the function definition:

The JavaScript
Expand|Select|Wrap|Line Numbers
  1. function loadReviewControl(pnMode, pnItemID, pnItemType, pcElementID, pcEventName, pnRating, pcReview)
  2. {
  3.     GetXmlHttpObject() ;  // defines a global variable for the XMLHTTP object                                           
  4.     gcItemID = pcElementID ;
  5.     lcStartDisplay = document.getElementById(pcElementID).innerHTML ; 
  6.     gcUrl = '../lib/loadReviewData.php? // QS completed passed on parameters...
  7.     goXMLHTTP.onreadystatechange = function()
  8.     {
  9.         // use a 'ghost' function to control the flow more accuratley
  10.         writeResponse();
  11.     };
  12.     goXMLHTTP.open("GET",gcUrl,true) ;
  13.     goXMLHTTP.send(null) ;
  14. }
  15.  
This uses the XMLHTTP Object and then rites the responsetext back to the innerHTML of the element defined by the fourth parameter.

Part of this process is to call a php file with a query string. Using the query string to control what is returned. In my case the PHP simply builds up the form controls to display. This is done by defining one variable to be the full output and then having one echo line at the bottom.

This is just a sample of the way I tackled this problem. I can't show you this in operation as it is on an access controlled site that is yet to be launched but it does work very well. Especially when you complete the submission side of the process using the same technology - they need never leave the page.

What happens in my case is they click an icon to load the controls, edit the review and click an icon to either close or save and close. This process generates and destroys controls as required, giving the impression of hiding and showing controls.

I hope this helps you out, if you have any questions post back and I'll try to help.

Cheers
nathj
Oct 16 '07 #2
ronverdonk
4,258 Expert 4TB
somasekhar: Next time enclose any code within the proper code tags. See the Posting Guidelines on how to do that.

moderator
Oct 17 '07 #3
somasekhar: Next time enclose any code within the proper code tags. See the Posting Guidelines on how to do that.

moderator
Hello this is our xml file I need in that file one edit field but it works on the base of check box when check box checked the editfield is visible other wise it disable plz give me answer with useful example.



Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE form SYSTEM "..\..\docs\dtd\php2go_forms.dtd">
  3. <form>
  4.     <section id="Invoice" name="Invoice">
  5.     <lookupfield id="emp" name="empid" label="Employee Name" width="150" length="99" required="T">
  6.             <datasource>
  7.                 <keyfield>distinct(empid)</keyfield>
  8.                 <displayfield>empname</displayfield>
  9.                 <lookuptable>tblemployee</lookuptable>
  10.                 <clause>empname!='admin' and status='Active'</clause>
  11.                 <orderby>empid</orderby>
  12.             </datasource>
  13.     <listener    type="JSRS" event="onchange" file="get_college.php"    remote="getTaskid"  callback="loadTaskid" params="this.value" debug="F"/>         
  14.   </lookupfield>    
  15.     <lookupfield id="taskid" name="taskid" label="Task Id" width="150" length="99" required="T">
  16.  
  17.     <listener    type="JSRS" event="onchange" file="get_college.php"    remote="getCustomer"  callback="loadCustomer" params="this.value" debug="F"/>         
  18.   </lookupfield>
  19.     <lookupfield id="custname" name="customerid" label="Customer Name" width="150" length="99" required="T">
  20.     </lookupfield>
  21.     <memofield name="details" label="Details" size="25" length="250" required="T"/>
  22.     <editfield name="amount" label="Amount" size="20" length="50"  required="T"/>
  23.     <combofield name="modeofamount" label="mode" width="100%"  required="T"  default="admin">
  24.             <option value="Cheque" caption="Cheque"  />
  25.             <option value="DD" caption="DD"/>
  26.             <option value="Cash" caption=" Cash"/>
  27.             <option value="Deposit" caption="Deposit"/>
  28.             </combofield>
  29.             <memofield name="amountdetails" label="Amount Details" size="15" length="150" required="F"/>
  30.     <editfield name="invoicedate" label="Invoice Date" size="20" length="50"  required="T" mask="DATE" default="TODAY"/>
  31.     <editfield name="item" label="Item" size="20" length="50"  required="T" />    
  32.         <buttons>
  33.             <button name="save" value="Save" alignment="Left" type="SUBMIT"/>
  34.             <button type="BUTTON" name="Close" value="Close" alignment="Right">
  35.             <listener type="JS" event="onClick" action="window.close()"/>
  36.             </button>
  37.         </buttons>
  38.     </section>
  39. </form>
Oct 18 '07 #4
Motoma
3,237 Expert 2GB
I have taken the liberty of moving this thread tot he Javascript forum, as it appears to me to be more relevant to that forum.
Oct 18 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by tokcy | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.