Multi Selection Form With Each Being Added Up To Reach Total
Sep 29, 2010
I am just beginning to try to learn some js, and am making a site which requires a multi selection form with each being added up to reach a total. This sounds like a standard form, but this is a little different. I have files in megabyte sizes, from which people would choose what they wanted, and the total deciding how many dvds would be needed to store that many files...and this total could then be added to a js shopping cart. By the way, there is nothing illegal or pirated with the files in case you have any concerns.
I have a form with a question that has about 15 options. The user selects one or more options by entering a percentage in the box next to the option.Entering any percentage in a box means that option has been selected.Here's where (I think) I need some javascript: The total of the percentages a user enters across all options has to total 100%.
Would like to do this client-side with an alert, as opposed to server-side. The form is complicated and long. Ideally, the user should not be able to proceed to the next question unless the percentage totals 100. But I'd settle for validating it on clicking the submit button.
I need to be able to display dynamic HTML inside a DIV (can't tell what the html nodes would be) - i.e needs to be flexible. The HTML that goes inside the DIV would have its own Javascript too. I was able to get this code snippet working on Microsoft IE7+, was wondering why the same won't work on firefox.
HTML Code: <html> <head> <script> /* the input type = hidden is necessary or the JS won't be accessible */ /* script defer tag is also necessary */ function insertHTMLOnButtonPress() { var s = "<html><input type='hidden' id='dummyHidden'/><head><script defer='defer'>function dynamicallyInsertedFunction() { alert('Successfully called - dynamicallyInsertedFunction'); } </sc" + "ript></head><body><input type='text' value='Hello World'/><input type='button' onClick='dynamicallyInsertedFunction();' value='Call Dynamically Inserted Method'/></body></html>"; /* Clearing out innerHTML is also required to flush the innerHTML so that repeated attempts - i.e new HTML/JS should work */ document.getElementById('wholeBody').innerHTML = ''; document.getElementById('wholeBody').innerHTML = s; } </script> </head> <body> <br/> <!-- Don't close the div inline, causes some problem and replaces the buttons too --> <div id="wholeBody"></div> <br/> <input type="button" onClick="insertHTMLOnButtonPress();" value="Insert some dynamic html"/> <input type="button" onClick="dynamicallyInsertedFunction();" value="Call Dynamically Inserted Method"/> </body> </html>
I have tried a couple of things likeRemove the script defer tag - Removing the dummy input element added which is required for Desktop IE - Removing the empty innerHTML step before replacing it But none of these appear to work for Mozilla firefox. I am also looking for a similar behavior on Android's default webbrowser (WebView to be more specific) -- Doesn't work there too.
Do you know why js does not reset this multi select box? <select name="LOB" multiple="multiple" size="5" style="background:#fff3b3;width:150px" > <option value="DP" >DP</option> <option value="DTV" >DTV</option> <option value="HSD" >HSD</option> <option value="PPV" >PPV</option> <option value="RF" >RF</option> <option value="VOD" >VOD</option> </select>
Code: function clearForm(oForm) { var elements = oForm.elements; oForm.reset(); for(i=0; i<elements.length; i++) { field_type = elements[i].type.toLowerCase(); switch(field_type) { case "text": case "password": case "textarea": case "hidden":
elements[i].value = ""; break; case "radio": case "checkbox": if (elements[i].checked) { elements[i].checked = false; } break;
case "select-one": case "select-multi": //alert(elements[i].value); elements[i].selectedIndex = -1; break; default: break; }}}
now the problem occurs when i put more rows there then the javascript function does not work anymore, my ultimate goal is to create a function to add tablerows with javascript, but i'm trying to create the update function with a static situation first.
1. Add the totals from products under added/Cancelled to the sub total
2. Then taking the sub totals added them to the total products
3. Need the total # of products that was selected as well
4. Then from the total products, want to Added subtract cancelled Divide Number of products = total net (1.34% = 134% w. the decimal moved over 2 spots to the right)
I have a tight space requirement here the explaination then code sample. I have a row of inputs and a link with a select set in the between in a div. I need to allow multi selection on the select which is the problem. The select must be within the div and when in non-select state set to 1 when the user is to make a selection I expand the select to 10. This causes the div to expand and any thing under to move in kind. I need a way to allow the select to expnad with out moving expanding the parent div.
I'm trying to add the total number of costs depending on the rows added to return the subtotal then later add the service charge which gives the total grand amount.I also need to add the item number when a new row is added.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
I have a multiselet box in which i identify the selected items. Once the user has finished selecting the items it causes the form to be submitted. For this example it just shows the selected indexes. To see the problem. Copy paste the code and save as html file. Then click on an item in the select box.
I am having problem with indentifying the selected items. When only one element is selected, the selected option index does not come up fine. I have no clue as to why this is the case. Code:
I have a issue with a javascript code that I wrote. This script is a simply for calculating the summation of 2 text input boxes and printing it in another text input box within the form. The entire form is then sent using Form post.The total is written back to the form's total text input box using the code below:
document.getElementById ('total').value = total
This code works perfectly for displaying the values on screen. However, when I send the form (PHP Post), the " total " field is empty. I have searched all over for possible solutions. But no solution yet.
1. document.getElementById ('total').INNERHTML = total .This does not even work on screen and total field is not updated on screen. Needless to say, the PHP Post variable was also empty.
I would like to have a main form (written in PHP) that has a "lookup" button next to a text field. When the user clicks "lookup", it should open a new window that lets them search (child.page1). When they enter a name or DOB into the search form, it submits the form through PHP (via POST), to a results page (child.page2). This displays all persons in the database which have a name or DOB == to the search term(s), with a checkbox next to each match. They click the checkbox (or alternenatively, a link), and return the checkbox value to the main window.
I have everything working right now, except that (child.page2) doesn't recognize the main window. If the data is entered on (child.page1), it works fine. I'm not very familiar with javascript.. is this even possible? I've considered using frames, to keep the parent-child relationship evident to the computer, but figured I'd check to see if there's an easier way.
I have a grid that I'm adding rows to that include form text input boxes using addRowData. I know I can use the "editable:true" for that but I'd rather not at this time. Anyway I have the <div id=list1></div> surrounded by a <form></form>. Also statically I have a couple of text input boxes and a submit button. When I press the submit button the only parameters that show up in the POSTED data are the static ones. Is there a way to get the form elements "registered" with the form? I know I can always use javascript to extract the data and save it via an ajax call, but if there is a way to do it "correctly"
Example var myRow = {id:"0",call:"<input name='callt"+boxNo+"' id='call"+boxNo+"' class='calls' type='text'/>",amount:"<input name='amt"+boxNo+"' id='amt"+boxNo+"' type='text' value='"+defaultDep+"'/>",residual:"",calculate:"<input type='button' class='buttons' id='b"+boxNo+"'/>"}; $("#list1").addRowData(boxNo,myRow);
I am trying to pre-populate form selections by evaluating a string. I will import a dynamic string later, but wanted to focus on the search function. If the value has a match in the string then write "selected" in the input tag to select it for the viewer. What am I doing wrong?
I am trying to add up some fields, it works but to get the total you have to click on the total box. Is there any way of getting it to total automatically i.e. when the user enter a quanity it will show the total straight away without having to click the total box.
Below is my code <html><head><title>Online Order</title></head> <body bgcolor=white onLoad="document.arith.total.value=eval(0);
I'm pretty new to Javascript and I'm trying to build a form which gives a configuration for a product. It consists of 5 drop down menus and each value in the drop down needs to have an image, a price, and a rule attached to it. The image sits above the drop down and changes with the selection, the price adds to the option prices selected in the other drop downs and give a total, and the rule affects what options are available in subsequent drop downs. I've got all of these working separately but can't get a single value to have all 3 functions.
I used the sum of check boxes script, altered it for radio buttons and it works... except for one little nit-picking thing.If a user changes their mind and chooses the other radio button in the set, the total does not reflect the actual total unless they click again on an already set radio button on the side they are using.Here's the JS:
Code: //Adds the sum of all radio buttons for the Home Team (Games Won) function UpdateCost() { var sum = 0;[code]......
How can I get this to reflect the actual games won if a user changes a radio button from home team to visiting team? I have a duplicate JS (UpdateCost2) and I have a matched pair of radio buttons for each game. Either you win (get 1) or lose (get 0).
I'm creating a web form that allows users to select from a list, choose a quantity and have the total for that quantity calculated, but when I run the html, I get Nan in the total price box. The problem starts with the calc price function. I've tried eval(), parseFloat to change the text to a number, but I think I'm putting the code in the wrong place.The first part is the javascript code (I have linked in a separate file) with the html below it.
window.onload = startForm; function todayTxt() { var Today = new Date();[code].....
I have been working on a calculator that works out the difference between two prices. I have two forms on my page which each generate a total, I want to add those two values together and display them in a third form.
I would like to be able to pass a multi-dimensional Javascript array through a form to a server-side script I am running. Any suggestions as to how to do this? I know how to asign a Javascript variable to a hidden field (basic stuff ), and if it was a single-dimension array I would join() it, but I don't know how to treat a multi-dimensional array. Any suggestions?
As soon as a user types in an integer into one of the quantity boxes the total quantity gets updated. How exactly would i do this? I can make it update the total quantity after a user hit's a Validate button or any button, but i cant make it update in real time.
I have an online form with 6 cells formatted for $ whether user types $ or not. I have a total cell (hidden) that needs to total those 6 cells. I always get the NaN in the total cell. I have tried it without auto $ formatting, but if user inputs $, than the NaN will appear. Is there no way to total cells that have or may have $s?
I have everything working up to this point but when I try and put the math equation into my script section, I get multiple error and cannot figure out how to get the function to return the actual total rental cost.Below is the code with the math function at the end of the script section in the heading which I seem to be receiving error on.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[code].........
how to achieve client-side calculation on my company booking form, using Javascript.The total amount for accommodation is calculated based on the room type (single or twin), zone chosen and meal plan (which then assigns a certain rate per week,so for example Single room, Zone 2, Self Catering would be �165 per week). There is a table of rates here : http:[utl].....The code would then use the arrival and departure date to calculate the number of weeks, add a booking fee of �50 and output the total amount.The form is located here: http:[url]....
