techker Posted January 18, 2011 Share Posted January 18, 2011 Hey guys i have a form that clients fill out for a credit application.. in my address section i have address and if less then 2 years previous address.. but it takes alot of space for a rare usage.. i would like to make like a check box if less then 2 years and it would open on check the added fields for address... i was looking up accodion ..seen ajax and JQ.... what would be the best? Quote Link to comment Share on other sites More sharing options...
Maq Posted January 18, 2011 Share Posted January 18, 2011 AJAX is just a concept, JQuery is a framework for javascript which would be able to perform AJAXian actions. I personally use JQuery, it's a solid framework but any of them would work for what you're trying to do. Quote Link to comment Share on other sites More sharing options...
techker Posted January 18, 2011 Author Share Posted January 18, 2011 so what would i be looking for? Quote Link to comment Share on other sites More sharing options...
Maq Posted January 18, 2011 Share Posted January 18, 2011 so what would i be looking for? Check this link out: http://api.jquery.com/show/ There are examples and demos that show you. Quote Link to comment Share on other sites More sharing options...
techker Posted January 18, 2011 Author Share Posted January 18, 2011 its all good but there is a on button funstion so it gets confused with my form submit.. Quote Link to comment Share on other sites More sharing options...
Maq Posted January 18, 2011 Share Posted January 18, 2011 its all good but there is a on button funstion so it gets confused with my form submit.. Sorry, what's the issue? Quote Link to comment Share on other sites More sharing options...
techker Posted January 18, 2011 Author Share Posted January 18, 2011 its in a form you know when you fill out a for and it says use this address for shipping if not click heer and there is another form that appears to fill in.. thas what i need.. Quote Link to comment Share on other sites More sharing options...
Maq Posted January 18, 2011 Share Posted January 18, 2011 its in a form you know when you fill out a for and it says use this address for shipping if not click heer and there is another form that appears to fill in.. thas what i need.. Right. That concept is in the link I provided for you earlier. You can easily hide/show HTML with JQuery, check out some of the demos. The code for all of them is provided. Quote Link to comment Share on other sites More sharing options...
techker Posted January 18, 2011 Author Share Posted January 18, 2011 the click function is confusing the submit vise versa,... when i click on view it shows for 2 seconds but refreshes to another page like my submit.. Quote Link to comment Share on other sites More sharing options...
Maq Posted January 18, 2011 Share Posted January 18, 2011 the click function is confusing the submit vise versa,... when i click on view it shows for 2 seconds but refreshes to another page like my submit.. Can you post the relevant code please? Quote Link to comment Share on other sites More sharing options...
techker Posted January 18, 2011 Author Share Posted January 18, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0014)about:internet --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CAR LOAN APPLICATION </title> <link rel="stylesheet" type="text/css" media="screen" href="css-form.css" /> <style type="text/css"> <!-- input:focus, textarea:focus{ background-color: lightyellow; } --> </style> <style type="text/css" media="all"> @import "css/global.css"; body { background-color: #FFF; } </style> <style> div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; } </style> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jtip.js" type="text/javascript"></script> </head> <body> <form id="form1" name="form1" method="post" action="add2.php"> <p>ONLINE APPLICATION:</p> <ol> <li> <label for="name">Last Name</label> <input type="text" name="PERS_L_NAME" id="PERS_L_NAME" /> </li> <li> <label for="name">First Name</label> <input type="text" name="PERS_F_NAME" id="PERS_F_NAME" /> </li> <li> <label for="name">Date of Birth</label> <input type="text" name="PERS_DATE_BIRTH" id="PERS_DATE_BIRTH" /> </li> <li> <label for="name">Social Sec.Num.</label> <input type="text" name="PERS_SSN" id="PERS_SSN" /><span class="formInfo"><a href="ajax.htm?width=375" class="jTip" id="one" name="Why SSN:">?</a></span> </li> <li> <label for="name">Drivers License</label> <input name="PERS_DRIVERS_L" type="text" id="PERS_DRIVERS_L" size="50" /> </li> <li> <label for="name">Address</label> <input name="PERS_ADD" type="text" id="PERS_ADD" size="50" /> </li> <li> <label for="name">City</label> <input type="text" name="PERS_CITY" id="PERS_CITY" /> </li> <li> <label for="name">Postal Code</label> <input type="text" name="PERS_CODE" id="PERS_CODE" /> </li> <li><u>Previous information ,if less the 2 years:</u></li> <li><button id="showr">CLICK HERE</button> <button id="hidr">Hide</button> <div>Address<input name="PERS_ADD_2" type="text"></div> <div>City<input name="PERS_CITY_2" type="text"></div> <div>Postal Code<input name="PERS_CODE_2" type="text"></div></li> <script> $("#showr").click(function () { $("div:eq(0)").show("fast", function () { /* use callee so don't have to name the function */ $(this).next("div").show("fast", arguments.callee); }); }); $("#hidr").click(function () { $("div").hide(2000); }); </script> <li></li> <li> <label for="name">Home #</label> <input type="text" name="PERS_NUMBER" id="PERS_NUMBER" /> </li> <li> <label for="name">Cell #</label> <input type="text" name="PERS_CELL" id="PERS_CELL" /> </li> <li> <label for="name">Fax #</label> <input type="text" name="PERS_FAX" id="PERS_FAX" /> </li> <li> <label for="name">Employer</label> <input type="text" name="EMPL_E" id="EMPL_E" value="Present" /> </li> <li> <label for="name">Empl.Add</label> <input name="EMPL_ADD" type="text" id="EMPL_ADD" size="50" /> </li> <li> <label for="name">Empl.City</label> <input type="text" name="EMPL_CITY" id="EMPL_CITY" /> </li> <li> <label for="name">Empl.Postal C.</label> <input type="text" name="EMPL_CODE" id="EMPL_CODE" /> </li> <li> <label for="name">Empl. Type</label> <input name="EMPL_TYPE" type="text" id="EMPL_TYPE" size="50" /> </li> <li> <label for="name">Since</label> <input type="text" name="EMPL_SINCE" id="EMPL_SINCE" /> </li> <li> <label for="name">Position</label> <input type="text" name="EMPL_P" id="EMPL_P" /> </li> <li> <label for="name">Contact Info</label> <input type="text" name="EMPL_SUP" id="EMPL_SUP" /> </li> <li> <label for="name">Contact #</label> <input type="text" name="EMPL_N" id="EMPL_N" /> </li> <li> <label for="name">Gross Salary</label> <input type="text" name="EMPL_GS" id="EMPL_GS" /> </li> <li><u>Employment information ,if less the 2 years:</u></li> <li> <label for="name">Previous Empl.</label> <input type="text" name="EMPL_2_E" id="EMPL_2_E"/> </li> <li> <label for="name">Prev.Add</label> <input name="EMPL_2_ADD" type="text" id="EMPL_2_ADD" size="50" /> </li> <li> <label for="name">Prev.City</label> <input type="text" name="EMPL_2_CITY" id="EMPL_2_CITY" /> </li> <li> <label for="name">Prev.Postal C.</label> <input type="text" name="EMPL_2_CODE" id="EMPL_2_CODE" /> </li> <li> <label for="name">Prev.Type</label> <input name="EMPL_2_TYPE" type="text" id="EMPL_2_TYPE" size="50" /> </li> <li> <label for="name">Since</label> <input type="text" name="EMPL_2_SINCE" id="EMPL_2_SINCE" /> </li> <li> <label for="name">Prev.Contact</label> <input type="text" name="EMPL_2_P" id="EMPL_2_P" /> </li> <li> <label for="name">Prev.Contact #</label> <input type="text" name="EMPL_2_N" id="EMPL_2_N" /> </li> <li> <label for="name">Gross Salary</label> <input type="text" name="EMPL_2_GS" id="EMPL_2_GS" /> </li> <li><u>Other source of revenue:</u>Assets & liabilities</li> <li> <label for="name">Residential info</label> <select name="OTHER_OWN_RENT" id="OTHER_OWN_RENT"> <option value="OWN">OWN</option> <option value="RENT">RENT</option> </select> </li> <li> <label for="name">Details</label> <input name="OTHER_OWN_RENT_D" type="text" id="OTHER_OWN_RENT_D" value="DETAILS" size="60" /> </li> <li> <label for="name">Value</label> <input name="OTHER_OWN_RENT_V" type="text" id="OTHER_OWN_RENT_V" size="15" /> </li> <li> <label for="name">Owed </label> <input name="OTHER_OWN_RENT_AM" type="text" id="OTHER_OWN_RENT_AM" size="15" value="AMOUNT LEFT TO PAY"/> </li> <li> <label for="name">Rent Amount</label> <input name="OTHER_OWN_RENT_MP" type="text" id="OTHER_OWN_RENT_MP" size="15" value="MONTHLY PAYMENT" /> </li> <li> <label for="name">Other<br /> </label> <select name="OTHER_CC_REER" id="OTHER_CC_REER"> <option value="CREDIT CARD">CREDIT CARD</option> <option value="REER">REER</option> </select> </li> <li> <label for="name"> Details </label> <input name="OTHER_CC_REER_D" type="text" id="OTHER_CC_REER_D" value="DETAILS" size="60" /> </li> <li> <label for="name">REER $</label> <input name="OTHER_CC_REER_V" type="text" id="OTHER_CC_REER_V" size="15" value="IF REER IS SELECTED" /> </li> <li> <label for="name">Owed</label> <input name="OTHER_CC_REER_AM" type="text" id="OTHER_CC_REER_AM" size="15" /> </li> <li> <label for="name">Monthly Value</label> <input name="OTHER_CC_REER_MP" type="text" id="OTHER_CC_REER_MP" size="15" /> </li> <li> <label for="name">Other </label> <select name="OTHER_INV_CAR" id="OTHER_OWN_RENT3"> <option value="INVESTMENT">INVESTMENT</option> <option value="CAR">CAR</option> </select> </li> <li> <label for="name">Details</label> <input name="OTHER_INV_CAR_D" type="text" id="OTHER_OWN_RENT_D3" value="DETAILS" size="60" /> </li> <li> <label for="name">Value</label> <input name="OTHER_INV_CAR_V" type="text" id="OTHER_OWN_RENT_V3" size="15" /> </li> <li> <label for="name">Amount Owed</label> <input name="OTHER_INV_CAR_AM" type="text" id="OTHER_INV_CAR_AM" size="15" /> </li> <li> <label for="name">Monthly Value</label> <input name="OTHER_INV_CAR_MP" type="text" id="OTHER_INV_CAR_MP" size="15" /> </li> <li> <label for="name">Other</label> <select name="OTHER_OTHER_L" id="OTHER_OTHER_L"> <option value="OTHER">OTHER</option> <option value="LOAN">LOAN</option> </select> </li> <li> <label for="name">Details</label> <input name="OTHER_OTHER_L_D" type="text" id="OTHER_OTHER_L_D" value="DETAILS" size="50" /> </li> <li> <label for="name">Value</label> <input name="OTHER_OTHER_L_V" type="text" id="OTHER_OTHER_L_V" size="15" /> </li> <li> <label for="name">Amount Owed</label> <input name="OTHER_OTHER_L_AM" type="text" id="OTHER_OTHER_L_AM" size="15" /> </li> <li> <label for="name">Monthly Value</label> <input name="OTHER_OTHER_L_MP" type="text" id="OTHER_OTHER_L_MP" size="15" /> </li> <li> <label for="name">EMAIL</label> <input name="EMAIL" type="text" id="EMAIL" size="50" /> </li> I have read the <span class="formInfo"><a href="priv.html?width=755" class="jTip" id="two" name="PRIVACY:">Policy</a></span> <li> <label for="name">ACCEPT</label> <select name="ACCEPT" id="ACCEPT"> <option value="YES">YES</option> <option value="NO">NO</option> </select> <input type="hidden" name="STATUS" value="NEW" /> </li> <li> <input type="submit" name="SUBMIT" id="SUBMIT" value="Submit" /> </li> </ol> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.