JavaScript - Split Text From Listbox And Input Into Multiple Textboxes
<!-- ** Need help completing the javascript in this example ** -->
<html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> Similar Tutorials<!-- ** Need help completing the javascript in this example ** --> Code: <html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> Hello! coding forums pals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next row down after the previous row has been filled? basically what logic and programming structure do I need in my function that will know when the first row in the invoice is filled. I'm struggling at the part where when the "add to invoice" button is clicked. some data is added to the invoice, and if the user wants to book another trip, the second trip should be appended in the second row of the invoice. what is happening in mine is that whenever I book another trip, the first one gets overwritten when in fact it should be left intact and the data should get appended in the next row down. Code: <html> <head> </head> <script type="text/javascript"> function addit() { var f = document.myform; var cost = 0; var percentage = 0; if(f.destination.selectedIndex == -1) { alert("please select a trip from the list"); return false; } if((f.travelers[0].checked == false) && (f.travelers[1].checked == false) && (f.travelers[2].checked == false) && (f.travelers[3].checked == false) && (f.travelers[4].checked == false) && (f.travelers[5].checked == false)) { alert("please specify the number of people traveling") return false; } if(f.accomodation.selectedIndex == -1) { alert("please specify your place of stay") return false; } switch(f.destination.selectedIndex) { case 0: document.myform.trip1.value="Mt. Kilimanjaro"; cost="2600"; break; case 1: document.myform.trip1.value="Denali"; cost="2000"; break; case 2: document.myform.trip1.value="Mt. Everest"; cost="3500"; break; case 3: document.myform.trip1.value="Maui"; cost="2700"; break; case 4: document.myform.trip1.value="Machu-Pichu"; cost="3100"; break; } for(i=0;i<f.travelers.length;i++) { if(f.travelers[i].checked) f.num1.value=f.travelers[i].value; } f.cost1.value=parseInt(f.num1.value) * parseInt(cost); switch(document.myform.accomodation.selectedIndex) { case 0: percentage="0.00"; break; case 1: percentage="0.05"; break; case 2: percentage="0.15"; break; case 3: percentage="0.22"; break; } f.accom1.value=f.cost1.value * parseFloat(percentage); f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value); } function deleteit() { var f = document.myform; var txtbox = document.getElementsByClassName("text"); var rad = document.getElementsByClassName("rad"); f.destination.selectedIndex=-1; f.accomodation.selectedIndex=-1; for(j=0;j<txtbox.length;j++) { txtbox[j].value=""; } for(x=0;x<rad.length;x++) { rad[x].checked=false; } } function submitform() { document.myform.submit(); } </script> <body> <form name="myform"> <table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0"> <tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr> <tr><td align="center"><select name="destination" id="Select1" size="4"> <option>Mt. Kilimanjaro</option> <option>Denali</option> <option>Mt. Everest</option> <option>Maui</option> <option>Machu-Pichu</option> </select></td> <td align="center">1<input type="radio" name="travelers" value="1" class="rad"></br>2<input type="radio" name="travelers" value="2" class="rad"/></br>3<input type="radio" name="travelers" value="3" class="rad"/></br>4<input type="radio" name="travelers" value="4" class="rad"/></br>5<input type="radio" name="travelers" value="5" class="rad"/></br>6<input type="radio" name="travelers" value="6" class="rad"/></td> <td align="center"> <select name="accomodation" id="Select2" size="3"> <option value=0>Tents</option> <option>Yurts</option> <option>Hostels</option> <option>Hotels</option> </select></td> <td><table width="90%" align="center" cellpadding="2"> <tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr> <tr><td><input type="text" name="trip1" class="text" readonly></td><td><input type="text" name="num1" size="1" class="text" readonly></td><td><input type="text" name="cost1" class="text" readonly></td><td><input type="text" name="accom1" class="text" readonly></td><td><input type="text" name="total1" class="text" readonly></td></tr> <tr><td><input type="text" name="trip2" class="text" readonly></td><td><input type="text" name="num2" size="1" class="text" readonly></td><td><input type="text" name="cost2" class="text" readonly></td><td><input type="text" name="accom2" class="text" readonly></td><td><input type="text" name="total2" class="text" readonly></td></tr> <tr><td><input type="text" name="trip3" class="text" readonly></td><td><input type="text" name="num3" size="1" class="text" readonly></td><td><input type="text" name="cost3" class="text" readonly></td><td><input type="text" name="accom3" class="text" readonly></td><td><input type="text" name="total3" class="text" readonly></td></tr> <tr><td><input type="text" name="trip4" class="text" readonly></td><td><input type="text" name="num4" size="1" class="text" readonly></td><td><input type="text" name="cost4" class="text" readonly></td><td><input type="text" name="accom4" class="text" readonly></td><td><input type="text" name="total4" class="text" readonly></td></tr> </table></td></tr> </tr> <tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear" onclick="deleteit()"/></td><td><input type="button" value="Buy Now" onclick="submitform()"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr> </table></form> </body> </html> Hello, I have an entry form using multiple select boxes as data entry in the upper portion of my page. below i want additional details of the item selected in a table like textboxes by clicking an add button.So whenever i click the add button a new row of text boxes is again created. problem: upon selecting an additional/new item from the select boxes the first row of textboxes doesn't retain it's value it reflects the currently selected values. all the data mentioned above is contained in a single page is it possible? using a classic asp using javascript to do this?please help, i'm really lost..attach is a snopshot of my page... print "<Font face=\"calibri, Arial\"><table id=\"rnatable\" border=2px width=100%>"; print "<th></th>"; print "<th>a</th>"; print "<th>b</th>"; print "<th>c</th>"; print "<th>d</th>"; print "<th>e</th>"; print "<th>f</th>"; print "<th>g</th>"; while($array = mysql_fetch_array($sql_query)) { $id=$array['a']; print "<tr id=\"newtr\">"; print "<td><input id=\"check\" type=\"checkbox\" name=\"keyword[]\" value=\"$id\" ></td>"; print "<td>".$array['a']."</td>"; print "<td>".$array['b']."</td>"; print "<td>".$array['c']."</td>"; print "<td>".$array['d']."</td>"; print "<td>".$array['e']."</td>"; print "<td>".$array['f']."</td>"; print "<td> <a href=\"http://localhost/rnasearch/retrieve.php?a=$id\">bla</a> </td></tr></font>"; } print "</table>"; } this is part of a php searchengine script that i wrote to retrieve data from a database and as you can see the last column that is g contains a link which when clicked takes the user to the second php script which retrieves additional information of that entry, but this is done for only single entries so as you can see i introduced checkboxes so that the user can check any number of checkboxes and retrieve information as per their wish now to do this i created a <input type=text where i want the value of these checkboxes i.e. $id to be posted in a delimited format so that the user can then click the corresponding button and retrieve the information this is the code <div id="floatMenu"> <ul class="menu1"> <center><li><form name="senddata" method="POST" action="http://localhost/retrieve.php" style="display:inline;"><input id="fasta" type="text" class="multitext"><input name="Fasta" type="Submit" value="Retrieve Fasta"></form> this is a css floating menu....so far so good....everything went fine.... after this i had to write a javascript to do this and i've been stuck there searching forums for the last 4 days! this is the javascript i found from somewhere which came close to doing wht i wanted it to do window.onload = function () { var cb = document.getElementById('check'); var fasta = document.getElementById('fasta'); cb.onclick = function () {fasta.value = cb.value + ","; };}; this script only sends the value of the first checkbox in the table, the others are not found by it, mind you its not the first checkbox selected its the first checkbox that is present in the table how can i resolve this problem so that even if i have n number of checkboxes in my table, if the user chooses to do so they can retrieve n number of information....please help i've almost lost hope in this! Hello! coding forums gals, I am resorting to you for help with a html form that uses javascript to validate data. the form is an invoice for a trip order where the user can select a trip location out of a listbox, a number of people traveling, and where they wish to stay(ex. hotel, tent, etc.) after the user selects one for each category and hits the "add to invoice" button, the fields in the invoice should get filled with the corresponding information. Now my question is how can I write code that will insert information in the next line down and all other lines below if the user wants to schedule more than one trip at a time? basically what logic and programming structure do I need in my function that will know when the first line in the invoice is filled and will add data in the next line down. after I have successfully placed an order, and I want to make another one, how do I get javascript to output data on the second line? Code: <html> <head> </head> <script type="text/javascript"> function addit() { var f = document.myform; var cost = 0; var percentage = 0; switch(f.destination.selectedIndex) { case 0: document.myform.trip1.value="Mt. Kilimanjaro"; cost="2600"; break; case 1: document.myform.trip1.value="Denali"; cost="2000"; break; case 2: document.myform.trip1.value="Mt. Everest"; cost="3500"; break; case 3: document.myform.trip1.value="Maui"; cost="2700"; break; case 4: document.myform.trip1.value="Machu-Pichu"; cost="3100"; break; } for(i=0;i<f.travelers.length;i++) { if(f.travelers[i].checked) f.num1.value=f.travelers[i].value; } f.cost1.value=parseInt(f.num1.value) * parseInt(cost); switch(document.myform.accomodation.selectedIndex) { case 0: percentage="0.00"; break; case 1: percentage="0.05"; break; case 2: percentage="0.15"; break; case 3: percentage="0.22"; break; } f.accom1.value=f.cost1.value * parseFloat(percentage); f.total1.value=parseInt(f.cost1.value) + parseInt(f.accom1.value); } </script> <body> <form name="myform"> <table align="center" border="1" bgcolor="skyblue" cellpadding="0" cellspacing="0"> <tr><th>Trips Available</th><th>Number</br> Traveling</th><th>Accomodation</br> Type</th><th>Invoice</th></tr> <tr><td align="center"><select name="destination" id="Select1" size="4"> <option>Mt. Kilimanjaro</option> <option>Denali</option> <option>Mt. Everest</option> <option>Maui</option> <option>Machu-Pichu</option> </select></td> <td align="center">1<input type="radio" name="travelers" value="1"></br>2<input type="radio" name="travelers" value="2"/></br>3<input type="radio" name="travelers" value="3"/></br>4<input type="radio" name="travelers" value="4"/></br>5<input type="radio" name="travelers" value="5"/></br>6<input type="radio" name="travelers" value="6"/></td> <td align="center"> <select name="accomodation" id="Select2" size="3"> <option value=0>Tents</option> <option>Yurts</option> <option>Hostels</option> <option>Hotels</option> </select></td> <td><table width="90%" align="center" cellpadding="2"> <tr><th>Trip</th><th>Num</th><th>Base</br>cost</th><th>Accom.</br>Surcharge</th><th>Total</th></tr> <tr><td><input type="text" name="trip1" readonly></td><td><input type="text" name="num1" size="1" readonly></td><td><input type="text" name="cost1" readonly></td><td><input type="text" name="accom1" readonly></td><td><input type="text" name="total1" readonly></td></tr> <tr><td><input type="text" name="trip2" readonly></td><td><input type="text" name="num2" size="1" readonly></td><td><input type="text" name="cost2" readonly></td><td><input type="text" name="accom2" readonly></td><td><input type="text" name="total2" readonly></td></tr> <tr><td><input type="text" name="trip3" readonly></td><td><input type="text" name="num3" size="1" readonly></td><td><input type="text" name="cost3" readonly></td><td><input type="text" name="accom3" readonly></td><td><input type="text" name="total3" readonly></td></tr> <tr><td><input type="text" name="trip4" readonly></td><td><input type="text" name="num4" size="1" readonly></td><td><input type="text" name="cost4" readonly></td><td><input type="text" name="accom4" readonly></td><td><input type="text" name="total4" readonly></td></tr> </table></td></tr> </tr> <tr><td><input type="button" value="Add to Invoice" onclick="addit()"/></td><td><input type="button" value="Clear"/></td><td><input type="button" value="Buy Now"/></td><td align="right">Total Sale:<input type="text" name="total" readonly/></td></tr> </table></form> </body> </html> I am creating a recipe cookbook program. On the main page, I have a top frame (named "nav") and bottom frame (named "recipe_layout"). There is a listbox in the BOTTOM frame containing the recipe names, and a "View Recipe" button in the TOP frame. The user would select a recipe and then click the button to view the recipe in the bottom frame. I believe that I need to insert the code to make this work with the button (?), and I think my problem is that I'm not accessing the bottom frame correctly: CURRENT CODE FOR LISTBOX IN BOTTOM FRAME <form name="recipe_form" style="margin-top:30"> <select name="name_dropdown" multiple size="2"> <option selected="selected">Search byName</option> <option value="applepie.html">Apple Pie</option> CURRENT CODE FOR BUTTON IN TOP FRAME <input type="button" value="View Recipe" onclick="parent.recipe_layout.location.href='recipe_form.name_dropdown.options[selectedIndex].value'"> Thank you so much in advance!! i see alot of forms where the phone number field is split into 3 boxes and you can type smoothly from the first box to the last....here is the beginning code i have now for my form Code: <form id="contactform" action="contact-submit.php" method="post"> <!-- form fields --> <div class="form"> <label for="name">Name<em>•</em></label> <input class="textbox required" type="text" name="name" id="name" /><br /> <label for="email">E-Mail<em>•</em></label> <input class="textbox required email" type="text" name="email" id="email" /><br /> how do i add a phone number field in there that has 3 connected fields? Is it possible to SplitText this way? The SplitText function has a unique name for each task Split1 - Split1(this.value) Split2 - Split2(this.value) Split3 - Split3(this.value) Code: <script type="text/javascript"> function Split1 (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('field1').value = tarr[0]; document.getElementById('field2').value = tarr[1]; } function Split2 (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('field3').value = tarr[2]; document.getElementById('field4').value = tarr[3]; } function Split3 (info) { if (info == '') { return; } var tarr = info.split(","); document.getElementById('field5').value = tarr[4]; document.getElementById('field6').value = tarr[5]; } </script> Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. Evening all With a single file input, if you use JS to get the value of a file input field it returns the filename. In HTML 5 though you can upload multiple files at once. However, using JS to read the value of the field just returns a single filename, even if multiple files are there. This is slightly complicated as I can't click on the input box to see whether all the filenames are listed there or just one, because doing so opens the choose file dialogue box. However, all the files are being uploaded. What I want to do is use JS to validate the filenames prior to upload, but it only seems to be doing the last one selected. Any ideas on how to return all the filenames? Thanks, Chris Hi, please help. I've been trying to check what I did wrong in my code but still the total doesn't show. Below is my javascript function: Code: function CalculateTotal(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r) { var tota= document.getElementById('a'); var totb= document.getElementById('b'); var totc= document.getElementById('c'); var totd= document.getElementById('d'); var tote= document.getElementById('e'); var totf= document.getElementById('f'); var totg= document.getElementById('g'); var toth= document.getElementById('h'); var toti= document.getElementById('i'); var totj= document.getElementById('j'); var totk= document.getElementById('k'); var totl= document.getElementById('l'); var totm= document.getElementById('m'); var totn= document.getElementById('n'); var toto= document.getElementById('o'); var totp= document.getElementById('p'); var totq= document.getElementById('q'); var totr= document.getElementById('r'); var grandTotal = tota + totb +totc + totd + tote + totf + totg + toth + toti +totj + totk + totl + totm + totn + toto + totp +totq + totr; document.getElementById('Total').value = grandTotal.toFixed(2); } Below is my textbox where there are more than 10 textboxes for user to enter donation amount. I'd like to calculate all the donation amount entered then show total in the bottom. Code: <fieldset id="fieldset-in_registration"> <table> <tr> <td style="width:390px;text-align:left"><label for="a" style="font-weight:bold">A. Aloha United Way Community Care Fund </label></td> <td style="float:right"> <input id="a" name="a" class="text" type="text" value="$<?php safeEcho($form['a'])?>" style="width:100px;" onChange="CalculateTotal()" /> <?php helper_error('a');?> </td> </tr> <tr> <td style="width:390px;text-align:left"><label for="b">211 Information and Referral Services </label></td> <td style="float:right"> <input id="b" name="b" class="text" type="text" value="$<?php safeEcho($form['b'])?>" style="width:100px;" onChange="CalculateTotal()" /> <?php helper_error('b');?> </td> </tr> <tr> <td style="width:390px;text-align:left"><label for="c">Volunteer Hawaii/Gifts-in-Kind</label></td> <td style="float:right"> <input id="c" name="c" class="text" type="text" value="$<?php safeEcho($form['c'])?>" style="width:100px;" onChange="CalculateTotal()"/> <?php helper_error('c');?> </td> </tr> </table> </fieldset> <fieldset id="fieldset-in_registration"> <label for="impact" style="font-weight:bold">B. Impact Areas</label> <table> <tr> <td style="width:390px;text-align:left"><label for="d">Crime and Drug Use</label></td> <td style="float:right"> <input id="d" name="d" class="text" type="text" value="$<?php safeEcho($form['d'])?>" style="width:100px;" onChange="CalculateTotal()"/> <?php helper_error('d');?> </td> </tr> <tr> <td style="width:390px;text-align:left"><label for="e">Early Childhood Development</label></td> <td style="float:right"> <input id="e" name="e" class="text" type="text" value="$<?php safeEcho($form['e'])?>" style="width:100px;" onChange="CalculateTotal()" /> <?php helper_error('e');?> </td> </tr> <tr> <td style="width:390px;text-align:left"><label for="f">Emergency and Crisis Services</label></td> <td style="float:right"> <input id="f" name="f" class="text" type="text" value="$<?php safeEcho($form['f'])?>" style="width:100px;" onChange="CalculateTotal()" /> <?php helper_error('f');?> </td> </tr> <tr> <td style="width:390px;text-align:left"><label for="g" >Financial Stability and Independence</label></td> <td style="float:right"> <input id="g" name="g" class="text" type="text" value="$<?php safeEcho($form['g'])?>" style="width:100px;" onChange="CalculateTotal()"/> <?php helper_error('g');?> </td> </tr> <tr> <td style="width:390px;text-align:left"><label for="h" >Homelessness</label></td> <td style="float:right"> <input id="h" name="h" class="text" type="text" value="$<?php safeEcho($form['h'])?>" style="width:100px;" onChange="CalculateTotal()"/> <?php helper_error('h');?> </td> </tr> </table> </fieldset> <fieldset id="fieldset-in_registration"> <p>D. <b>Agency/Program Support ($48 MINIMUM PER CHOICE)</b></p> <p>My gift is designated to one or more specific agencies or programs. Processing fee may apply. <p style="color:#FF0000">(Note: Agency Name is intentionally shorten/cut-off and indented to the next line to fit in the page. Choose either one of the indented line will give the same code.)</p> <div class="formfield"> <table> <tr> <td> <select id="designation_list1" name="designation_list1" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()""/> </td> </tr> <tr> <td> <select id="designation_list2" name="designation_list2" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal();"/> </td> </tr> <tr> <td> <select id="designation_list3" name="designation_list3" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td> <select id="designation_list4" name="designation_list4" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td> <select id="designation_list5" name="designation_list5" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal();"/> </td> </tr> <tr> <td> <select id="designation_list6" name="designation_list6" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td> <select id="designation_list7" name="designation_list7" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td> <select id="designation_list8" name="designation_list8" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td> <select id="designation_list9" name="designation_list9" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td> <select id="designation_list10" name="designation_list10" size="1" style="overflow-x:scroll; width:390px; "> <?php foreach ($designation_list as $descode => $prompt) : ?> <option value="<?php echo $descode; ?>" ><?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:100px;" onChange="CalculateTotal()"/> </td> </tr> <tr> <td style="text-align:right;"><b>TOTAL GIFT(S) DESIGNATED (A-D)</b><BR /> (Must not exceed donation amount)</td> <td><input name="Total" id="Total" type="text" maxlength="10" readonly="true" onChange="CalculateTotal(this.value)" /></td> </tr> </table> Please help. I tried for how many days using the javascript calculations and still didn't work. I have a form with the same calculations and it does work but this one doesn't. Please help. Thanks a lot. Hope to hear from you soon. The simplified code below works, and should give you an idea of what Im trying to achieve. The final version will have dozens of input fields so you can see why the below method stinks Code: <html><head><title>Values</title> <script type="text/javascript"> <!-- function getid() { var myNum = document.frm1.field1.value; if(myNum == "A"){ document.frm1.field2.value = "1" } else if(myNum == "B"){ document.frm1.field2.value = "2" } else { document.frm1.field2.value = "" } var myNum2 = document.frm1.field3.value; if(myNum2 == "A"){ document.frm1.field4.value = "1" } else if(myNum2 == "B"){ document.frm1.field4.value = "2" } else { document.frm1.field4.value = "" } } //--> </script> </head><body> <form name="frm1" id="frm1"> <input type="text" size="40" name="field1" id="field1" onChange="JavaScript:getid();" /><input type="text" size="4" id="field2" name="field2" /> <br> <input type="text" size="40" name="field3" id="field3" onChange="JavaScript:getid();" /><input type="text" size="4" id="field4" name="field4" /> <br> </form> </body> </html> Each text input will have A or B written in by the user, which should automatically place that letters associated ID in its partner field. If any other letter is entered the ID will automatically be left blank. With the above code I'd need to repeat it over and over for each of the dozens of input fields. The final version wont be using simply A/B either but around 50 possible inputs each with their own ID which would make around 1000 possible variations. What am I missing here that will simplify the process? Thanks Hate to ask this as I know it's an easy one but surprisingly Google turns up no clear/simple answers! I'm modifying some old code and am not JS programmer (I'm a PHP programmer) and this is driving me nuts. The existing code makes sure that when the form is submitted that there isn't a missing value. There's also some hidden input values. The JS starts out function checkform(orderform) and the form tag includes onsubmit="return checkform(this);"> I can add an alert to the form to see varius input values, such as a hidden value for the input name 'description' I can use: alert (orderform.description.value) Eazy peazy. However the form has two different input type=image buttons now and I need to do some branching in the JS depending on which image button they press. I recall IE had an issue where it only sends the x and y coordinates So I figure an easy to determine which image button was pressed is just check to see if the x or y value for each button is non-zero. But I can't for the life of me figure out how to access the value. Example: alert (orderform.button1.x.value) doesn't work. Can someone refresh my memory or suggest an entirely different method for detecting which image button was used to submit a form? THanks in advance! well title says it all i have a search form, and the default value is "enter text here" when the user click the submit button, i would like to check if the value of my text input is "enter text here" and if it is, then don't submit the form (popup a warning or something) how can i do that? thanks a lot! Currently I have several forms using the input text "field3". I want to know how I can require an HTML input text field to be required WITHOUT having to use the form name in the javascript and without modifying <body>,<form> or <input type="submit">. Also no HTML5 since not all browsers use it (life would be simple if they did since threres a required tag) So here is my form, for example Code: <form name = "test"> <input type="text" name="field1"> <input type="text" name="field2"> <input type="text" name="field3"> <input type="submit"> </form> In otherwords, I can only edit <input type="text" name="field3"> by putting code directly before, in, or after that input field. With this problem, how can I make it required? thank you hi folks, i needed a text input so the user that will register a product, will make sure to enter the cents, and not just the raw money, making it to be stored incorrectly on my database. for example, if i type "1" the output inside the text field will be automatically "0.01", so the user HAS to type the cents. thanks in advance Hi, I have a form with text boxes which I need to display values ie. <input type="text" name="image_ref" value="image1" /> This works no porblem until I enter the below javscript onto the page: <script type="text/javascript"> var level1 = document.getElementById('level1'); level1.style.display = 'none'; var level2 = document.getElementById('level2'); level2.style.display = 'none'; var all_levels = document.getElementById('all_levels'); all_levels.style.display = 'none'; </script> This code is to hide certain parts of the form until they are activated. the problem is when the parts of the form are activated and displayed, the values inthe text input boxes do not show. Any ideas why this is? many thanks in advance. hi friends , i am on make a dynamic input field creation code , my problem is the entered text(value from "add proposition") is washing away , if i press new "add proposition" my java script is PHP Code: <script language="javascript" type="text/javascript"> function add() { k=document.getElementById("num").innerHTML k=parseInt(k); if(!k) {document.getElementById("num").innerHTML=1; k=1;} else{ document.getElementById("num").innerHTML=k+1; k++; } document.getElementById("cat").innerHTML+="<br />type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\">is it answer? <input type=\"checkbox\" name=\"ans"+k+"\"> ignore this one:<input type=\"checkbox\" name=\"ign"+k+"\">" } </script> my html code is PHP Code: <form action="new.php" method="post"> <fieldset> <legend>Add Question & answer:</legend> question type:<br /> True or False:<input type="radio" name="radio" value="t"> Objective:<input type="radio" name="radio" value="o"> Other:<input type="radio" name="radio" value="o"> Quesion:<br /> <textarea name="desc" rows="6" cols="35" ></textarea> <br /> <a href="javascript:add()" ><b>add proposition</b></a> <div id="cat"></div> <div id="num" style="display:none;"></div> <br> <input type="submit" name="submit"> </fieldset> </form> how i solve this problem ? hi i wants to change one input to texarea when i select one from radio, plz any suggestion how i would do that? my code PHP Code: <input type="text" name="other" value="this need to become textarea" /> <input type="radio" name="inputtext" />Text <input type="radio" name="inputtext" />Textarea so when i click inputtext radio name"other" will become a textrea rather then input type text. thanks for any help. |