JavaScript - Onclick - Add Field Into Form
Hi there,
I have a html form, and I need it so that when a user clicks a button, it adds a field into the form. I also need it to write <td></td> around the new field, and I need it to write this in a specific part row of a table. How would I go about doing this? I've tried searching for the past two hours, but no luck. Many thanks, I appreciate it, Jason Similar TutorialsI need when I click to type into a form field, I need an onclick event to show another form field. I would assume this would be a hiddin div or an on click event to post another form field. So in theory just because I actually clicked into one form field...another form field shows up underneath it...can anyone help... I would like to set up an image gallery so that when customer clicks on their chosen image, the image caption populates into the associated field in the form below the gallery, on the same page. Any way you know of to do this? I am not really a coder, I only know this and that, so examples or detailed instructions will be most helpful. Thanks very much. Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript"> fields = 1; function addMore() { if (fields = 1) { document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>"; fields = 2; } else if (fields = 2) { document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>"; fields = 3; } else { document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed."; document.form.add.disabled=true; } } </script> Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hi, I'm trying to make a comment field that only appears once you've clicked the "Add comment link". I'd like it to replace the add comment link. I assume this is an onclick event of some sort, but I'm not sure quite how to go about doing it. Help would be highly appreciated. Hello, i Have problem about clear value when ppl input data on text field Any idea? Code: <form action="http://www.packagetrackr.com/track/" method="get" name="track" target="_blank"> <div class="form-field-error-message hidden" style="display: none; "> <div class="CommonEmptyTrackingNumber"></div> </div> <div id="track-form-tracking-number-container"> <div id="track-form-tracking-number-inner-container" class="track-form-control-boxer"><input id="track-form-tracking-number" class="track-form-element " type="text" name="n" value="Type a tracking number" title="Type a tracking number..." onFocus="if(/^Type a tracking number...$/i.test(this.value)){this.value='';}" onBlur="if(this.value==''){this.value='Type a tracking number...';}"> <input value="Track!" name="submit" type="submit" title="Track your package" class="track-form-submit-button sprite-master"> </div> </div> <div id="track-form-jss-carrier-container" class="hidden" style="z-index: 1000; display: none; "> <div id="track-form-jss-carrier-content"> <label id="jss-carrier-auto" class="track-form-jss-carrier-label jss-carrier-label"> <input id="jss-carrier-auto-value" value="" type="radio" name="c" checked="checked"> <span>Auto Detect Carrier</span> </label> </div> </div> </form> Hi all, I'm a beginner in JavaScript can someone please help me to resolve this issue and thanks in advance for your help! What I'm trying to do is.. When you select multiple <div> get the value of each one and save in separate hidden fields accordingly. What needs to happen is... Click div 1 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Click div 2 --> if hidden field1 value is "none", save there, else check hidden field 2 if that's "none" save in hidden field 2 Here's what I've come up with so far (currently I'm using JQuery) The problem with this is that no matter what div I click in which order it only updates the 1st hidden field Code: <div id="click1" name="click1" value="123" onclick="abc()"/>Click 1</div> <div id="click2" name="click2" value="225" onclick="def()"/>Click 2</div> <input id="passenger_1" name="passenger_1" type="hidden" value="none" /> <input id="passenger_2" name="passenger_2" type="hidden" value="none" /> <script> function abc() { var pasvalue = $('#click1').attr('value'); var pas1_value = $('#passenger_1').attr('value'); var pas2_value = $('#passenger_2').attr('value'); if(pas1_value == "none"){ $('#passenger_1').attr('value', pasvalue); }else if (pas2_value == "none"){ $('#passenger_2').attr('value', pasvalue); }} function def() { var pasvalue = $('#click2').attr('value'); var pas1_value = $('#passenger_1').attr('value'); var pas2_value = $('#passenger_2').attr('value'); if(pas1_value == "none"){ $('#passenger_1').attr('value', pasvalue); }else if (pas2_value == "none"){ $('#passenger_2').attr('value', pasvalue); }} </script> I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: .... <script type="text/javascript"> window.onload = function() { document.forms[0].username.focus(); } function validate(form) { var form = document.getElementById("reg"); var e = document.getElementById("error"); e.style.background = "red"; for(var i = 0; i < form.elements.length; i++) { var el = form.elements[i]; if(el.type == "text" || el.type == "password") { if(el.value == "") { e.innerHTML = "Please fill in all fields!"; el.style.border = "1px solid red"; el.focus(); return false; } else { el.style.border = "1px solid green"; return false; } } } var un = form.username; un.value = un.value.replace(/^\s+|\s+$/g,""); if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value))) { e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters"; un.focus(); return false; } var pw = form.password; pw.value = pw.value.replace(/^\s+|\s+$/g,""); if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value))) { e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters"; pw.focus(); return false; } e.innerHTML = "You filled in all the fields, well done!"; e.style.background = "green"; return false; } </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>My Cool Website</h1> </div> <div id="content"> <div class="padding"> <h2>Registration</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <form id="reg" action="#" method="post" onsubmit="return validate(this)"> <div id="error"></div> <div><label for="username">Username</label></div> <div><input type="text" name="username" id="username" size="30" maxlength="16" /></div> <div><label for="password">Password</label></div> <div><input type="password" name="password" id="password" size="30" maxlength="16" /></div> <div><label for="c_password">Confirm Password</label></div> <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div> <div><label for="email">Email address</label></div> <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div> <div><label for="c_email">Confirm Email address</label></div> <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div> <div><label for="firstname">First name</label></div> <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div> <div><label for="surname">Surname</label></div> <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div> <div><label for="gender">Gender</label></div> <div> <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div> <div><input type="radio" name="gender" value="f" />Female</div> </div> <div><input type="submit" value="Register" name="submit" /></div> </form> </div> </div> <div id="footer"> <p>Copyright © 2009 My Cool Website</p> </div> </div> </body> </html> I'm trying to set up a post preview to use before submitting a post. I need button 1 to open a pop-up with the preview of the post, and then button 2 should submit the post after the poster is satisfied. With the code below, when either button is clicked, each work as expected. The problem I'm having is, after the preview (OnButton1) is clicked, the submit button (OnButton2) will only open in a new tab, and not submit to the opened page from where it is being executed. This could lead to many double posts, if someone who's not sure what is going on, keeps clicking the submit button. I am wondering if there is a target "_self", or another method to make this work. I'm very happy with the preview window popping up, as it should, but will try any suggestions that are offered. function OnButton1() { var popUp = window.open ('','popUp','scrollbars=yes,resizable=yes,width=800, height=450'); document.form.action = "index.php?page=Preview" document.form.target = "popUp"; // Open in a new window document.form.preview(); // Submit the page return true; } function OnButton2() { document.form.action = "index.php?page=post" document.form.submit(); // Submit the page return true; } Below is the code that is using the name FFF in various places. The effect of all this is that the onclick function is not executed. I would expect a pop up alert when clicking the submit button. This only happens if I rename either the form id or the js variable. Can anyone explain what is going on here ? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Title</title> </head> <script type="text/javascript"> function newobject(){ this.exec=exec; function exec(){ alert("exec"); } } FFF = new newobject(); </script> <body> <form id=" FFF " name="somename" action="" method="GET"> <input type="text" id="someid" name="somename" value="value"> <input onclick=" FFF .exec()" type="submit" id="submitid" name="somesubmit" value="xxx"> </form> </body> </html> Regards Heinz How can I add a form field value to a url. I tried the below but it no work. Code: href="index2.php?q=4&id=+document.theForm.lists.value+&picklist" Greetings! I'm trying to disable some form elements using the onclick from a radio input element. It ain't working so great! I googled around and finally scraped together some code that in theory 'I' think should work. I'm no javascript guru! It has to be some tiny tiny thing I'm missing. Here's my code and mind you this is a project in the making! I still have along way to go! Thanks for you time and help! Code: <!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" xml:lang="en"> <head> <title>Empty Page</title> <script type='text/javascript'> function setReadOnly(obj) { if(obj.value == "1") { document.shiftreport.artprogs.disabled = true; document.shiftreport.artprog_stat.disabled = true; } else { document.shiftreport.icprogs.disabled = true; document.shiftreport.icprog_stat.disabled = true; } } </script> </head> <body> <?php include_once('form_input_functions.php'); $artprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $artprog_wfls = array('no_job' => '------- select a job -------', 'ARTPROG/WFL/DAILY/BATCH' => 'ARTPROG/WFL/DAILY/BATCH', 'ARTPROG/WFL/OPERATIONS/IMAGE' => 'ARTPROG/WFL/OPERATIONS/IMAGE', 'ARTPROG/WFL/WKLY/BATCH' => 'ARTPROG/WFL/WKLY/BATCH', 'ARTPROG/WFL/DAILY/CLAIMS' => 'ARTPROG/WFL/DAILY/CLAIMS' ); $bllyprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $bllyprog_wfls = array('no_job' => '------- select a job -------', 'BLLYPROG/WFL/DAILY/SISCHEDPAY' => 'BLLYPROG/WFL/DAILY/SISCHEDPAY', 'BLLYPROG/WFL/DAILY/REPORTS' => 'BLLYPROG/WFL/DAILY/REPORTS', 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM' => 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', '$UTIL/O/AUDIT/CLOSE/BLLY' => '$UTIL/O/AUDIT/CLOSE/BLLY', 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL' => 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL', ); $sbwcprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $sbwcprog_wfls = array('no_job' => '------- select a job -------', 'WORKPROG/WFL/DAILY/WAREHOUSE' => 'WORKPROG/WFL/DAILY/WAREHOUSE', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', '$UTIL/O/AUDIT/CLOSE/WORKCOMP' => '$UTIL/O/AUDIT/CLOSE/WORKCOMP' ); $tcsprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $tcsprog_wfls = array ('no_job' => '------- select a job -------', 'TCS/WFL/DAILY/BATCH' => 'TCS/WFL/DAILY/BATCH', 'BLPROG/WFL/COPY/REMOVE/GLCHECKS' => 'BLPROG/WFL/COPY/REMOVE/GLCHECKS' ); $icprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $icprog_wfls = array ('no_job' => '------- select a job -------', 'BLPROG/WFL/DAILY/INDCONT' => 'BLPROG/WFL/DAILY/INDCONT', 'INDCON/WFL/PRINT/IDCARDS' => 'INDCON/WFL/PRINT/IDCARDS', 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' => 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' ); $truckprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $truckprog_wfls = array('no_job' => '------- select a job -------', 'TRUCKPROG/WFL/DAILY/TKINTMARSH' => 'TRUCKPROG/WFL/DAILY/TKINTMARSH', 'TRUCKPROG/WFL/DAILY/TKINTERNET' => 'TRUCKPROG/WFL/DAILY/TKINTERNET', 'TRUCKPROG/WFL/DAILY/BATCH' => 'TRUCKPROG/WFL/DAILY/BATCH', 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY' => 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY', 'TRUCKPROG/WFL/DAILY/REPORTS' => 'TRUCKPROG/WFL/DAILY/REPORTS', 'BLPROG/WFL/DAILY/CLAIMS' => 'BLPROG/WFL/DAILY/CLAIMS', 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM' => 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM', 'TRUCKPROG/WFL/DAILY/BALRPT' => 'TRUCKPROG/WFL/DAILY/BALRPT', 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT' => 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT', 'AGPROG/WFL/DAILY/AGNUCOPREM' => 'AGPROG/WFL/DAILY/AGNUCOPREM', 'BL/WFL/WKLY/FEDEX/0005' => 'BL/WFL/WKLY/FEDEX/0005', 'TRUCKPROG/WFL/WKLY/DE542' => 'TRUCKPROG/WFL/WKLY/DE542', 'TRUCKPROG/WFL/WKLY/FDXDISAB' => 'TRUCKPROG/WFL/WKLY/FDXDISAB', 'TRUCKPROG/WFL/WKLY/FDXDISERR' => 'TRUCKPROG/WFL/WKLY/FDXDISERR', 'BL/WFL/ONLINE/DUMP/TRUCKING' => 'BL/WFL/ONLINE/DUMP/TRUCKING', 'DATATKWH/EXTRACTALL/DAILY/WFL' => 'DATATKWH/EXTRACTALL/DAILY/WFL', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' ); $smallprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $smallprog_wfls = array('no_job' => '------- select a job -------', 'SMALLPROG/WFL/DAILY/BATCH' => 'SMALLPROG/WFL/DAILY/BATCH', 'SMALLPROG/WFL/DAILY/CERTS' => 'SMALLPROG/WFL/DAILY/CERTS', 'SMALLPROG/WFL/OPERATIONS/PRINT' => 'SMALLPROG/WFL/OPERATIONS/PRINT', 'SMALLPROG/WFL/WKLY/BATCH' => 'SMALLPROG/WFL/WKLY/BATCH', 'SFCLAIMS/WFL/DAILY/DWHCLAIMS' => 'SFCLAIMS/WFL/DAILY/DWHCLAIMS', 'SFCLAIMS/WFL/DAILY/REPORTS' => 'SFCLAIMS/WFL/DAILY/REPORTS', 'SFCLAIMS/WFL/WEEKLY/REPORTS' => 'SFCLAIMS/WFL/WEEKLY/REPORTS', 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER' => 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER', '$UTIL/O/AUDIT/CLOSE/SFDB' => '$UTIL/O/AUDIT/CLOSE/SFDB', 'DATASFWH/EXTRACTALL/DAILY/WFL' => 'DATASFWH/EXTRACTALL/DAILY/WFL', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' ); $persauto_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $persauto_wfls = array('no_job' => '------- select a job -------', 'PERSAUTO/WFL/DAILY/BATCH' => 'PERSAUTO/WFL/DAILY/BATCH', 'PERSAUTO/WFL/OPERATIONS/IMAGE' => 'PERSAUTO/WFL/OPERATIONS/IMAGE', 'PERSAUTO/WFL/OPERATIONS/PRINT' => 'PERSAUTO/WFL/OPERATIONS/PRINT', 'PERSAUTO/WFL/WKLY/BATCH' => 'PERSAUTO/WFL/WKLY/BATCH', 'PERSAUTO/WFL/DAILY/CLAIMS' => 'PERSAUTO/WFL/DAILY/CLAIMS', 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL' => 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL', '$UTIL/O/AUDIT/CLOSE/DB1' => '$UTIL/O/AUDIT/CLOSE/DB1', 'DATAWH/EXTRACTALL/DAILY/WFL' => 'DATAWH/EXTRACTALL/DAILY/WFL', 'BL/WFL/OFFLINE/DUMP/WAREHOUSE' => 'BL/WFL/OFFLINE/DUMP/WAREHOUSE' ); $isoprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $isoprog_wfls = array('no_job' => '------- select a job -------', 'ISOPROG/WFL/BATCH/ISOSAGDAILY' => 'ISOPROG/WFL/BATCH/ISOSAGDAILY' ); $bkuplive_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $bkuplive_wfls = array('no_job' => '------- select a job -------', 'BL/WFL/ONLINE/DUMP/BLDB' => 'BL/WFL/ONLINE/DUMP/BLDB', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', '$UTIL/O/AUDIT/CLOSE/BLDB' => '$UTIL/O/AUDIT/CLOSE/BLDB', 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL' => 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', 'BL/WFL/FICHE/DISK' => 'BL/WFL/FICHE/DISK' ); $testsite_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $testsite_wfls = array('no_job' => '------- select a job -------', 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE' => 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE', 'UTIL/WFL/REMOVE/TESTLYON/BDFILES' => 'UTIL/WFL/REMOVE/TESTLYON/BDFILES', 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' ); ?> <form method="POST" name="shiftreport" action="<?php print $_SERVER['PHP_SELF']; ?>"> <p>1st Shift <?php input_radiocheck('radio','shift','0','1','1'); ?></p> <p>2st Shift <?php input_radiocheck('radio','shift','0','2','1'); ?></p> <p>3st Shift <?php input_radiocheck('radio','shift','0','3','1'); ?></p> <table> <thead> <tr> <th>Application</th> <th>Job Stream</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>ARTISAN</td> <td> <?php input_select('artprogs',$artprog_wfls['no_job'], $GLOBALS['artprog_wfls'], '390px'); ?> </td> <td> <?php input_select('artprog_stat', $artprog_status['none'] , $GLOBALS['artprog_status']); ?> </td> </tr> <tr> <td>SELF INSURED</td> <td> <?php input_select('bllyprogs',$bllyprog_wfls['no_job'], $GLOBALS['bllyprog_wfls'], '390px'); ?> </td> <td> <?php input_select('bllyprog_stat', $bllyprog_status['none'] , $GLOBALS['bllyprog_status']); ?> </td> </tr> <tr> <td>SBWC</td> <td> <?php input_select('sbwcprogs',$sbwcprog_wfls['no_job'],$GLOBALS['sbwcprog_wfls'], '390px'); ?> </td> <td> <?php input_select('sbwcprog_stat', $sbwcprog_status['none'] , $GLOBALS['sbwcprog_status']); ?> </td> </tr> <tr> <td>TCS</td> <td> <?php input_select('tcsprogs',$tcsprog_wfls['no_job'], $GLOBALS['tcsprog_wfls'], '390px'); ?> </td> <td> <?php input_select('tcsprog_stat', $tcsprog_status['none'] , $GLOBALS['tcsprog_status']); ?> </td> </tr> <tr> <td>IC</td> <td> <?php input_select('icprogs',$icprog_wfls['no_job'], $GLOBALS['icprog_wfls'], '390px'); ?> </td> <td> <?php input_select('icprog_stat', $icprog_status['none'] , $GLOBALS['icprog_status']); ?> </td> </tr> <tr> <td>TRUCKING</td> <td> <?php input_select('truckprogs',$truckprog_wfls['no_job'], $GLOBALS['truckprog_wfls'], '390px'); ?> </td> <td> <?php input_select('truckprog_stat', $truckprog_status['none'] , $GLOBALS['truckprog_status']); ?> </td> </tr> <tr> <td>SMALL FLEET</td> <td> <?php input_select('smallprogs',$smallprog_wfls['no_job'], $GLOBALS['smallprog_wfls'], '390px'); ?> </td> <td> <?php input_select('smallprog_stat', $smallprog_status['none'] , $GLOBALS['smallprog_status']); ?> </td> </tr> <tr> <td>PERSONAL AUTO</td> <td> <?php input_select('persauto',$persauto_wfls['no_job'], $GLOBALS['persauto_wfls'], '390px'); ?> </td> <td> <?php input_select('persauto_stat', $persauto_status['none'] , $GLOBALS['persauto_status']); ?> </td> </tr> <tr> <td>ISO</td> <td> <?php input_select('isoprog',$isoprog_wfls['no_job'], $GLOBALS['isoprog_wfls'], '390px'); ?> </td> <td> <?php input_select('isoprog_stat', $isoprog_status['none'] , $GLOBALS['isoprog_status']); ?> </td> </tr> <tr> <td>BACKUPS LIVE</td> <td> <?php input_select('bkuplive',$bkuplive_wfls['no_job'], $GLOBALS['bkuplive_wfls'], '390px'); ?> </td> <td> <?php input_select('bkuplive_stat', $bkuplive_status['none'] , $GLOBALS['bkuplive_status']); ?> </td> </tr> <tr> <td>TEST SITE INSTRUCTIONS</td> <td> <?php input_select('testsite',$testsite_wfls['no_job'], $GLOBALS['testsite_wfls'], '390px'); ?> </td> <td> <?php input_select('testsite_stat', $testsite_status['none'] , $GLOBALS['testsite_status']); ?> </td> </tr> </tbody> </table> </form> </body> </html> The included functions file that I didn't include is below: Code: <?php function input_text($element_name, $value) { print '<input type="text" name="' . $element_name . '" value="'; print htmlentities($values[$element_name]) . '">'; } function input_submit($element_name,$label) { print '<input type="submit" name="' . $element_name .'" value="'; print htmlentities($label) .'"/>'; } function input_textarea($element_name,$values) { print '<textarea name="' . $element_name . '">'; print htmlentities($values[$element_name]) . '</textarea>'; } function input_radiocheck($type,$element_name,$values,$element_value,$clicker = '0') { print '<input type="' . $type . '" name="' . $element_name . '" value="' . $element_value . '" '; if ($element_value == $values[$element_name]) { print ' checked="checked"'; } if ($clicker == '1') print ' onclick="setReadOnly(this)"'; print '/>'; } function input_select($element_name, $selected, $options, $drop_width = '100px', $multiple = false) { print '<select style="width:' . $drop_width . ';" name="' . $element_name; if ($multiple) { print '[]" multiple="multiple'; } print '">'; $selected_options = array(); if ($multiple) { foreach ($selected[$element_name] as $val) { $selected_options[$val] = true; } } else { $selected_options[ $selected[$element_name] ] = true; } foreach ($options as $option => $label) { print '<option value="' . htmlentities($option) . '"'; if (isset($selected_options[$option])) { print ' selected="selected"'; } print '>' . htmlentities($label) . '</option>'; } print '</select>'; } ?> Is there a way to give an input or textarea field the focus and set the focus to begin right at the end of the current text in the field?
I need to learn how to clear form fields when a user clicks on them. Here is the site in question: http://www.yourvancouvermortgagebroker.ca/apply They used to work, but then I changed the field value and now it doesn't work on some of the fields (whichever ones I changed). Here is a link to the .js file: http://www.yourvancouvermortgagebroker.ca/js/apply.js function checkValidFormInput() { if (document.getElementsByName('customerName').value != '') { document.getElementById('customerNameImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerNameImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } if (document.getElementsByName('customerEmail').length > 0) { document.getElementById('customerEmailImg').innerHTML = '<img alt="Valid" src="images/greenTick.png">'; } else { document.getElementById('customerEmailImg').innerHTML = '<img alt="Invalid" src="images/redX.png">'; } } Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript"> function textCounter1(field,counter,maxlimit,linecounter) { // text width// var fieldWidth = 137; var charcnt = field.value.length; // trim the extra text if (charcnt > maxlimit) { field.value = field.value.substring(0, maxlimit); } else { // progress bar percentage var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ; document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" // color correction on style from CCFFF -> CC0000 setcolor(document.getElementById(counter),percentage,"background-color"); } } function setcolor(obj,percentage,prop){ obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)"; } </script> This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin I have a form which has various fields which are arrays (so the name of a field may be myField[]). The reason for this is that the form has add buttons to add another field or fields for the purpose of entering another email address, etc., to send invitations and do other things. The problem that I am running into is how to access the individual fields in an array of fields inside javascript to do form validation. So if I have an email address field name emailAddress[], and using the add button, the user of my site adds 3 other copies of the emailAddress[] field, I want to then do form validation onSubmit to ensure those email address are valid using standard procedures. However, inside the javascript code, how do I access the individual fields that make up emailAddress[]? I just cannot find anywhere online the proper way to get at these values. If anyone can help me, I would greatly appreciate it. Happy Holidays hi all, i was hoping somebody could help me out. i'm trying to write a code that generates a random number between 1 and 9999 on page load, concatenates it with "pwn" at the start, and adds it to a disabled form text input box. this is the code i have below, but it's not working at all. any help would be greatly appreciated. in the head section Code: <script type="text/javascript"> function createcode() { var randomnumber = Math.floor(Math.random()*10000); var homecode = 'pwn' + randomnumber; } </script> my body tag Code: <body onload="createcode()"> and the form field itself Code: <input type="text" name="homename" id="homename" disabled="disabled" /> <script type="text/javascript"> document.getElementByID("homename").value = homecode; document.write(homecode); </script> thanks in advance. Though I know nothing about Javascript, that didn't stop them from assigning me the task of mothballing our Excel spreadsheets and going to fillable .PDF forms. Here's my first of many questions: In one of my fillable PDF forms, I take the numbers (entered by the user) from two or three fields and calculate those placing the answer in a seperate field. Since we work with very large, and very small numbers, I want the number in the answer field to be displayed in scientific notation. Adobe Acrobat is not very flexible when it comes to selecting a number format, so a script is obviously needed to do the conversion. I've also noticed that Adobe doesn't like the user entering a number in a field in scientific notation. My number calculates out correctly if you enter .000000274 in the field, but does nothing if you enter 2.74E-7. Help with that would also be greatly appreciated. Don use in form fields - onBlur="chkalpha(this)" function chknum(field) { var valid = "0123456789"; var ok = "yes"; var temp; for (var i=0; i<field.value.length && ok == "yes"; i++) { temp = "" + field.value.substring(i, i+1); if (valid.indexOf(temp) == "-1") { var ok = "no"; } } if (ok == "no") { alert("Invalid entry! Only numeric data is accepted!"); field.value=""; field.focus(); field.select(); } } function chkalpha(field) { var valid = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ "; var ok = "yes"; var temp; for (var i=0; i<field.value.length && ok == "yes"; i++) { temp = "" + field.value.substring(i, i+1); if (valid.indexOf(temp) == "-1") { var ok = "no"; } } if (ok == "no") { alert("Invalid entry! Only alphabetic data is accepted!"); field.value=""; field.focus(); field.select(); } } function chkalphanum(field) { var valid = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@_-. "; var ok = "yes"; var temp; for (var i=0; i<field.value.length && ok == "yes"; i++) { temp = "" + field.value.substring(i, i+1); if (valid.indexOf(temp) == "-1") { var ok = "no"; } } if (ok == "no") { alert("Invalid entry! Only alphanumeric data is accepted!"); field.value=""; field.focus(); field.select(); } } |