I wonder if anyone knows of a simple tutorial for altering form elements depending on the content of others. For example, how would you make picking an item from a drop-down menu "fill-in" some text into a text field? Also, greying out a text field if a checkbox is not ticked would be useful.
It would need to all work on non-JS supporting browsers or for users with JS disabled.
I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: [URL] And here is the code in question:
[Code]...
I have two questions...
Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?
Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?
I need to pass user input from a form to one database field. I'm relatively new to JS but the idea I had was to have several form elements and use JS to collect the users input and send all the values through a hidden element. What's happening is the variable names are being sent rather than the values. The code below is only passing to the next page. Limitations: I am editing an intranet site built by a 3rd party so a lot of the files we've been given are encrypted. I cannot change the method to post.
I've put together what I think is an illustration of my problem at [URL] Quite simply, I need to be able to access the elements of the form without referring to them by ID as the whole form is intended to be cloned. I intended to do this using parentNode and childNodes[] together with the 'this' keyword. My understanding of 'this' in this context is that it should refer to the HTML element calling the function, i.e. one of the radio button inputs. However this gives the error "Error: this.parentNode is undefined"
Does "document.formName.elementName.disable" work on hidden form text elements? I have a form with some input fields that are associated with some hidden text fields and I would like to disable all of the categories inside the form when the page loads and only enable each category as it is needed. Code:
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'm working with a form that has both static and dynamic form elements (add textbox, etc), and while I can access the static elements via request.form, the dynamic elements cannot be accessed. I have the dynamic elements appended within a div that lies within a table.
Here is the javascript:
Code:
function add3<%=strGoalCount%><%=strObjCount%>() { var foo = document.getElementById('fooBar<%=strGoalCount%><%=strObjCount%>'); var numi = document.getElementById('theValue'); var num = (document.getElementById('theValue').value -1)+ 2;
I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this:
[Code]..
So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code here:
I'm creating a news section for a CMS in PHP and mySQL in which I have a text field for the headline and an textarea for the article. Instead of making the user add each article one-at-a-time I would like to know if there's a way to dynamically create/remove these elements with a button?
for instance; at page load the form contains 1 article - it has 1 text field and 1 textarea. The user decides that he wants to add 2 more articles, so he clicks the "add" button twice. Now the form has 3 articles (3 text fields and 3 textareas), each with a unique id (art1_head,art1_txt, art2_head,art2_txt, art3_head,art3_txt).
Then, I also need to have a button or checkbox to remove each article.
Forgive my ignorance. I'm not a js guy, I work in PHP. Is this possible?
I'm trying to modify a form so that when a user clicks a checkbox for a shorter version of the form, it will replace swap the default (long) form elements with the short version of elements, so that only the version that is selected will have its element values passed on to the next page. Code:
I need to loop through all form elements such as text, radios, check boxes and the like and to save their state in a file. does anyone have JS code to do this ?
I have a function which passes text from txtdebt to debtsbox which works fine. However, I want to add code which examines the value of debtsbox and if any of the values the user entered contain the string "d" then I want to emable rblDebts which is disabled when the page loads. This part is not working (no errors) and I'm not sure why.....
i want to control the 'Enter' key to set focus to the next element in the form(instead of 'Tab'). and i want to know which element had the focus when the Keypress even of the form is called. how can i get that?
Basically it loops thru the table and creates a row of fields in the form that use the array identifiers '[]' so that I can loop thru them with PHP when the page is submitted.
The key for each array element is the id of the row from the database. So checkbox[] (with value "1") and cost[1] are on the same line in the form. The next line may not necessarily have cost[2] in it, it may be cost[3] or [4], depending the id from the database.
Is there some way I can loop thru these form elements in javascript?
I am creating a form in which I want a custom drop-down. Instead of displaying the normal drop-down list, I want, when I click a button, to display a dataView element directly below the textbox showing the currently selected item. What I'm not sure about is how to display the dataView directly under the textbox but on a different z-axis as the rest of the form. Currently, when I display the dataView, it pushes all the data under the textbox down to fit the dataView. I know I've seen this done with drop-down menus, but I don't know how to get it to work.
I am creating an array based on form elements. I then am trying to create an IF (and nested IF) statement to check if the fields are empty and then with the nested IF statement use certain fields to create mathematical functions.
So far I have this:
function QuantityMWh(form) { var formchk = document.forms[0] for (i = 0; i < formchk.elements.length; i++) { if (formchk.elements[1].value == "" && formchk.elements[2].value == "") {
[Code]....
It's only checking the first field and not the second, and vice versa. i.e. if only one field has text then it passes.
I'm creating a invoice application. In the JSP page user has an option to enter more than one location for each contract. I have created the JSP page. I face problem in calculating the total for the newlocation if user has added a new one. I'm posing my Invoice.jsp page below. Code:
The code below will add new form elements when ever I click the add button. However when you add more elements the combo box element goes out of alignment.
multientry.js function addValue(divname){ var newdiv = document.createElement('div'); newdiv.innerHTML = "<BR><INPUT TYPE='text' name='index1'>";
I have a form with 40 input fields to upload files.I want to disable all the fields but the first and I don't want to put 39 instructions to do that.How can I cycle through all those fields?Fileds' names are img1, img2, img3,... , img40.I'm trying with this code, but it doesn't work
var form = document.getElementById("add"); var i = 2; var image;
So I need a function to loop through a forms elements and if a value is matched then check that radio button. I have the function call in some other javascript but her is the jist.
The Function function loopForm(form) { for (var i = 0; i < form.elements.length; i++ ) {
Code: Is this something that is better suited for Javascript/DHTML or AJAX? I have not been able to find any tutorials on how to do this. Can anyone give any suggestions? I am very new to both Javascript, and of course AJAX, since with out Javascript there is no AJAX.