JavaScript - Disable Auto Submit In Form

he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page

i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time..


so i want to submit the form and at the same time i cant reload the page as it is in normal submit form..

so how i can submit form in the background without letting the user knows that the form is submitted???

Someone helped me earlier with this script that sets a 10 second timeout on a submit button once it's pressed. After 10 seconds the "disabled" attribute is removed and is added back when a user presses the button.

Code:

function enable() {
    var x = document.getElementById("reload");
    x.disabled = false;
}
    
function disable() {
    var x = document.getElementById("reload");
    
    $(function(){
        $('#tagwallMessages').load('member/tagwall_load.php');
    });
    
    x.disabled = true;
    setTimeout('enable()', 5000);
}

Code:

<input type="button" id="reload" onclick="disable()" value="Click!" />

However, I am now setting up the page with images (the input button is too plain and ugly). I have two images for when the "disabled" attribute is being added and removed, how can I make the script swap between these two?

My first image says "SUBMIT" - the other image is the same, but faded out a bit, giving it the "disabled"-button-feeling.

Help is appreciated.

All,
I have the following code:
Code:

<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.myform);">

How can I change this to make this button disabled after the onclick?

Thanks in advance.

How can I make this code disable the submit button once it has been pressed, then if the user hits back or GOES back, it will re-enable it again?

Code:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
 
function formControl(submitted) 
{
   if(submitted=="1") 
    {
   commentForm.Submit.disabled=true
   alert("Thanks for your comments!")
    }
}
 
</SCRIPT>

Thanks!

ShadowIce~

Within my project, using PHP/HTML/Javascript, I am trying to set up a page where a corresponding submit button is enabled when a given checkbox is checked. What complicates my attempt is that the checkboxes and submit buttons are in the form of arrays. Here is a snippet of my code:

Code:

<form name="myform4" id="list_apps" method="post">
<?php
for ($i=0; $i<$num_rows;$i++)
{
  ?>
  <p>
  <input type="checkbox" name="app[]" id="app[]" onclick="enable_perm()">
  <input name="set_perm[]" type="submit" id="set_perm[]" value="Set Permissions">  
  </p>      
  <?php
}
</form>

Here is my attempt at using Javascript to disable the first submit button after clicking any check box:

Code:

function enable_perm()
{
  document.myform4.set_perm[0].disabled = true;
}

What am I missing here, or, how do I enable/disable submit buttons that are part of an array?

Hi, I am having a problem with my script used to disable my submit button. I want the button to disable upon correct submission of the form, and the button to be kept enabled if the required fields are not filled in. I have the following code at the moment (which only does the first if statement).

Code:

SCRIPT CODE: 

<script type="text/javascript" >
function validateForm()
{

var amount=document.forms["expenserecord"]["amount"].value;
var picker=document.forms["expenserecord"]["picker"].value;
var desc=document.forms["expenserecord"]["description"].value;

if (amount==null || amount=="" || picker==null || picker=="" || desc==null || desc=="") {
  alert("All required fields must be filled out.");
  document.getElementById("sub").disabled = false;
  return false;
}
 
else {
 	document.getElementByID("sub").disabled = true;	
}

}

</script>

BUTTON CODE:

<p><input type="submit" value="Submit" onClick="return validateForm()" id="sub"></p>

i need a function that count down until zero. how could i make it auto submit which is very important for me and accepts the choices which are as radio buttons instead of waiting for users to push submit button.

I'm new at JavaScript and not sure if what I want to do is possible. This is part of the code from a larger check-in form.

This code adds a new row as needed and should also enable the text fields only after the check box is selected.

It is not working as expected and I am missing what the problem may be or if this is even possible.

Any help would be appreciated.

[CODE]
<!DOCTYPE html>
<html lang="en">
<title></title>

<script type="text/javascript"><!--
function addRow()
{
tabBody=document.getElementById("data");
row=document.createElement("TR");
cell1 = document.createElement("TD");
checknode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
checknode2 = document.createElement("input");
checknode2.name="guest[]";
checknode2.id='guest[]';
checknode2.type="checkbox";
checknode2.setAttribute('onclick', 'disablefields();');
cell2 = document.createElement("TD");
textnode1 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0");
textnode2=document.createElement("input");
textnode2.type="text";
textnode2.name='guestc[]';
textnode2.id='guestc[]';
textnode2.setAttribute('disabled','');
textnode2.size="7";
textnode2.maxlength="9";
textnode2.setAttribute('onkeyup', 'this.value = this.value.toUpperCase();');
cell3 = document.createElement("TD");
textnode3=document.createElement("input");
textnode3.type="text";
textnode3.name="guestn[]";
textnode3.id='guestn[]';
textnode3.setAttribute('disabled','');
textnode3.size="20";
textnode3.maxlength="30";
cell4 = document.createElement("TD");
checknode3 = document.createTextNode("\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0");
checknode4 = document.createElement("input");
checknode4.name="food[]";
checknode4.id='food[]';
checknode4.type="checkbox";
checknode4.value="breakfast";

cell1.appendChild(checknode1);
cell1.appendChild(checknode2);
row.appendChild(cell1);
tabBody.appendChild(row);
cell2.appendChild(textnode1);
cell2.appendChild(textnode2);
row.appendChild(cell2);
tabBody.appendChild(row);
cell3.appendChild(textnode3);
row.appendChild(cell3);
tabBody.appendChild(row);
cell4.appendChild(checknode3);
cell4.appendChild(checknode4);
row.appendChild(cell4);
tabBody.appendChild(row);
}
-->
</script>


<SCRIPT LANGUAGE="JavaScript"> <!--
function disablefields(){
if (document.getElementById('guest[]').checked == 0){
document.getElementById('guestc[]').disabled='disabled';
document.getElementById('guestc[]').value='';
document.getElementById('guestn[]').disabled='disabled';
document.getElementById('guestn[]').value='';
document.getElementById('food[]').disabled='disabled';
document.getElementById('food[]').value='';
}else{
document.getElementById('guestc[]').disabled='';
document.getElementById('guestc[]').value='Call Sign';
document.getElementById('guestn[]').disabled='';
document.getElementById('guestn[]').value='Enter Name';
document.getElementById('food[]').disabled='';
document.getElementById('food[]').value='breakfast';
}
}
-->
</SCRIPT>

</head>
<body>
<form name="checkin" method="post">
<table>
<tbody id="data">
<tr><td>&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="guest[]" id="guest" onclick="disablefields()"></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" disabled name="guestc[]" id="guestc[]" size="7" maxlength="9" value="" onkeyup="this.value = this.value.toUpperCase();" /></td>
<td><input type="TEXT" name="guestn[]" disabled id="guestn[]" size="20" maxlength="30" value=""></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="food[]" disabled id="food[]" value="breakfast"></td></tr>
</tbody>
</table>

<table border="0" width="100%">
<tr>
<td><input type="button" value="Add new check-in" onclick="addRow();" /></td>
</tr>
</table>
</form>
</body>
</html>
[CODE]

Greetings experts, this is my first time here.

So, please take easy on me.

I have makup with 2 sections.

The first section contains 5 form fields and are required.

The second second has 2 form fields and are optional.

Users can only choose from one section or the other but not both.

The js script below ensures that if users select from section 2, section one will not challenge for validation and works a treat.

The challenge I have now is to ensure that if users choose from section 1, the 2 form fields in section are automatically disabled so they won't be attempted to choose from it.

Similarly, if users select from section 2, all form fields in section one are automatically disabled so they won't be tempted to choose from that section.

Is this possible?

If not possible, is it possible to raise an error?

For instance, a user selects from section 1 and attempts to select from any of the 2 form fields in section 2, a message that says, "You can only select from one section but from both.

Similarly if a user selects from section 2 first, same thing happens.

Thanks very much for your assistance.

function validate() {

if(document.getElementById("<%=txtrequest.ClientID%>").value != "" &&
document.getElementById("<%=txtreceived.ClientID %>").value != "")
{
if (document.getElementById("<%=txtName.ClientID%>").value == "") {
alert("Please enter name");
document.getElementById("<%=txtName.ClientID%>").focus();
return false;
}

if (document.getElementById("<%=txtCity.ClientID %>").value == "") {
alert("Please enter city");
document.getElementById("<%=txtCity.ClientID %>").focus();
return false;
}
if (document.getElementById("<%=txtState.ClientID%>").value == "") {
alert("Please enter state");
document.getElementById("<%=txtState.ClientID%>").focus();
return false;
}
if (document.getElementById("<%=txtZip.ClientID%>").value == "") {
alert("Please enter zip");
document.getElementById("<%=txtZip.ClientID%>").focus();
return false;
}
if (checkradio() == false) {
alert("Please enter contacts");
document.getElementById("<%=txtContacts.ClientID%>").focus();
return false;
}
}
return true;
}

Hi all,

I'm designing something to addon to an existing product. I'm struggling with some javascript problems.

I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage.

Is this possible?

Thanks

I've literally tried everything. Read 26 tutorials, interchanged code, etc.

My validation functions all work. My AJAX functions work (tested manually using servlet URL's).

The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes.

I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return.

html form:
Code:

<form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
        <table cellspacing="5" style="border: 2px solid black;">
            <tr>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td>*First name</td>
                            <td align="right"><span id="valid_one"></span></td>

                            <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Last name</td>
                            <td align="right"><span id="valid_two"></span></td>

                            <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Email address</td>
                            <td align="right"><span id="result"></span></td>

                            <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Phone number</td>
                            <td align="right"><span id="valid_three"></span></td>

                            <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
                        </tr>
                        <tr>
                            <td align="left">*City/Town</td>
                            <td align="right"><span id="valid_four"></span></td>

                            <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <select name="s">
                                    <option value="AL">Alabama
                                    <option value="AK">Alaska
                                    <option value="AZ">Arizona
                                    <option value="AR">Arkansas
                                    <option value="CA">California
                                    <option value="CO">Colorado
                                    <option value="CT">Connecticut
                                    <option value="DE">Delaware
                                    <option value="FL">Florida
                                    <option value="GA">Georgia
                                    <option value="HI">Hawaii
                                    <option value="ID">Idaho
                                    <option value="IL">Illinois
                                    <option value="IN">Indiana
                                    <option value="IA">Iowa
                                    <option value="KS">Kansas
                                    <option value="KY">Kentucky
                                    <option value="LA">Louisiana
                                    <option value="ME">Maine
                                    <option value="MD">Maryland
                                    <option value="MA">Massachusetts
                                    <option value="MI">Michigan
                                    <option value="MN">Minnesota
                                    <option value="MS">Mississippi
                                    <option value="MO">Missouri
                                    <option value="MT">Montana
                                    <option value="NE">Nebraska
                                    <option value="NV">Nevada
                                    <option value="NH">New Hampshire
                                    <option value="NJ">New Jersey
                                    <option value="NM">New Mexico
                                    <option value="NY">New York
                                    <option value="MC">North Carolina
                                    <option value="ND">North Dakota
                                    <option value="OH">Ohio
                                    <option value="OK">Oklahoma
                                    <option value="OR">Oregon
                                    <option value="PA">Pennsylvania
                                    <option value="RI">Rhode Island
                                    <option value="SC">South Carolina
                                    <option value="SD">South Dakota
                                    <option value="TN">Tennessee
                                    <option value="TX">Texas
                                    <option value="UT">Utah
                                    <option value="VT">Vermont
                                    <option value="VA">Virginia
                                    <option value="WA">Washington
                                    <option value="WV">West Virginia
                                    <option value="WI">Wisconsin
                                    <option value="WY">Wyoming
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <br>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><span id="error"></span></td>
                        </tr>
                        <tr>
                            <td valign="top">*Anti-Spam Verification</td>
                            <td></td>
                            <td id="reCaptcha"></td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table cellspacing="5">
                        <tr>
                            <td align="left">*Affiliation</td>
                            <td align="right"><span id="valid_five"></span></td>

                            <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
                        </tr>
                        <tr>
                            <td align="left">*Research Area:</td>
                            <td align="right"><span id="valid_six"></span></td>

                            <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
                        </tr>
                        <tr>
                            <td valign="top" align="left">*Research Overview</td>
                            <td align="right"><span id="valid_seven"></span></td>

                            <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
                        </tr>
                        <tr>
                            <td align="left">*Talk Availability</td>
                            <td></td>
                            <td>
                                <input type="radio" name="ta" value="In person">In person
                                <input type="radio" name="ta" value="Online">Online
                                <input type="radio" name="ta" value="Both" checked>Both
                            </td>
                        </tr>
                        <tr>
                            <td align="left" valign="top">Links</td>
                            <td></td>
                            <td>
                                <table id="linkTable" border="0">
                                    <td><input type="text" style="width: 320px;" name="link"></td>
                                    <td><div id="result"></div></td>
                                </table>
                            </td>
                            <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><span style="color: red;"></span></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <br />
        <input type="submit" id="submit" name="submit" value="Submit Form">
    </form>

Javascript file:
Code:

/* 
 * script.js - ajax and table functions
 */

var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions

var validAjax = new Boolean();
var validCaptcha = new Boolean();

var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();

function init() {
    showRecaptcha('reCaptcha');

    // Separate booleans for AJAX funcs
    validAjax = false;
    validCaptcha = false;

    // Booleanse for fields that don't require servlet validation
    valid_one = false;
    valid_two = false;
    valid_three = false;
    valid_four = false;
    valid_five = false;
    valid_six = false;
    valid_seven = false;
}

function showRecaptcha(element) {
    Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}

function validate_form() {
    if (valid_one && valid_two && valid_three && valid_four && validEmail) {
        startCaptchaRequest();

        if (validCaptcha) {
            return true;
        }
    }
    else {
        alert("Submission contains errors. Please fill out all required fields before submitting.");
        return false;
    }
}

function validate_one() {
    if (document.getElementById("fn").value == 0) {
        valid_one = false;
        document.getElementById("valid_one").innerHTML = "No";
    }
    else {
        valid_one = true;
        document.getElementById("valid_one").innerHTML = "";
    }
}

function validate_two() {
    if (document.getElementById("ln").value == 0) {
        valid_two = false;
        document.getElementById("valid_two").innerHTML = "No";
    }
    else {
        valid_two = true;
        document.getElementById("valid_two").innerHTML = "";
    }
}

function validate_three() {
    if (document.getElementById("pn").value == 0) {
        valid_three = false;
        document.getElementById("valid_three").innerHTML = "No";
    }
    else {
        valid_three = true;
        document.getElementById("valid_three").innerHTML = "";
    }
}

function validate_four() {
    if (document.getElementById("c").value == 0) {
        valid_four = false;
        document.getElementById("valid_four").innerHTML = "No";
    }
    else {
        valid_four = true;
        document.getElementById("valid_four").innerHTML = "";
    }
}

function validate_five() {
    if (document.getElementById("affl").value == 0) {
        valid_five = false;
        document.getElementById("valid_five").innerHTML = "No";
    }
    else {
        valid_five = true;
        document.getElementById("valid_five").innerHTML = "";
    }
}
//
//function validate_six() {
//    if (document.getElementById("ra").value == 0) {
//        valid_six = false;
//        document.getElementById("valid_six").innerHTML = "No";
//    }
//    else {
//        valid_six = true;
//        document.getElementById("valid_six").innerHTML = "";
//    }
//}
//
//function validate_seven() {
//    if (document.getElementById("ro").value == 0) {
//        valid_seven = false;
//        document.getElementById("valid_seven").innerHTML = "No";
//    }
//    else {
//        valid_seven = true;
//        document.getElementById("valid_seven").innerHTML = "";
//    }
//}

function addLink(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell = row.insertCell(0);
    var element1 = document.createElement("input");

    element1.type = "text";
    element1.name = "link" + rowCount;
    element1.style.width = "320px";

    cell.appendChild(element1);
}

function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
    else {
        limitCount.value = limitNum - limitField.value.length;
    }
}

function createXmlHttpRequest() {
    if(window.ActiveXObject) {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp=new XMLHttpRequest();
    }
}

function startRequest() {
    createXmlHttpRequest();
    
    var param1 = document.getElementById('mailfield').value;

    if (param1 == "") {
        validEmail = false;
        document.getElementById("result").innerHTML = "Blank";
    }
    else {
        xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
        xmlHttp.onreadystatechange = handleStateChange;
        xmlHttp.send(null);
    }
}

function handleStateChange() {
    if(xmlHttp.readyState==4) {
        if(xmlHttp.status==200) {
            var message =
                xmlHttp.responseXML
                .getElementsByTagName("valid")[0]
                .childNodes[0].nodeValue;
            
            if (message == "Unregistered") {
                validEmail = true;
                document.getElementById("result").style.color = "green";
            }
            else {
                validEmail = false;
                document.getElementById("result").style.color = "red";
            }

            document.getElementById("result").innerHTML = message;
        }
        else {
            alert("Error checking e-mail address - " + xmlHttp.status +
                " : " + xmlHttp.statusText);
        }
    }
}
function createCaptchaRequest() {
    if(window.ActiveXObject) {
        xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest) {
        xmlHttp2=new XMLHttpRequest();
    }
}

function startCaptchaRequest() {
    alert('made it to captcha requeswt');
    createCaptchaRequest();

    var param1 = Recaptcha.get_challenge();
    var param2 = Recaptcha.get_response();

    xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
    xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
    xmlHttp2.send(null);
}

function handleStateChangeCaptcha() {
    if(xmlHttp2.readyState==4) {
        if(xmlHttp2.status==200) {
            var message =
                xmlHttp2.responseXML
                .getElementsByTagName("result")[0]
                .childNodes[0].nodeValue;

            if (message == "Valid") {
                alert("captcha valid");
                validCaptcha = true;
            }
            else {
                document.getElementById("error").innerHTML = message;
                validCaptcha = false;
            }
        }
        else {
            alert("Error checking captcha validity - " + xmlHttp2.status +
                " : " + xmlHttp2.statusText);
        }
    }
}

I have two slightly different forms on the same page, but I want the values in form1 to auto populate the same form fields in form2. 1 field is a text field, the rest are drop down menus. How would I accomplish this? Link to tutorial would be much appreciated. Thanks

What I am looking to do is auto-populate a number of forms based on what a user chooses as a starting date.

For example:

If a user enters 12/12/2009 I want the other fields to automatically populate with the next 2 weeks (12/13/2009, 12/14/2009, 12/15/2009 etc.)

Anyone have a useful script that I can use given that these fields are formatted as dates?

The idea is to save time by only having to fill in the first date in the timesheet.

Hello guys (and girls)
I am messing with this whole day, 'cos I wanted to try and figure this out by myself instead of going on forums.
I failed, as you may see. So, to cut it short:

I needed to calculate my prices on-the-fly and display it in textbox with javascript.
Well I did succeed with values of radio button an checbox, but as i know very little javascript, I don't know how to expand the code i got from he

http://javascript.internet.com/forms...e-refresh.html

So what I would LOVE to know, is how can I make this happen:

I have a textbox:

Code:

<input type="text" name="podstranice" size="19" class="podstr" onkeyup="this.form.total.value=calculateTotal(this);">

and when a user inputs a number in it, javascript multiplies it with some other number, say 10 (its a price*quantity thing) and adds it to the total price along with data from checkboxes and radio buttons.

And so, this is my javascript. It is basically identical to one on the link, but you can view it better this way I think.

Code:

// Calculate the total for items in the form which are selected.
function calculateTotal(inputItem) {
  with (inputItem.form) {
    // Process each of the different input types in the form.
    
	if (inputItem.type == "radio") 
	{   // Process radio buttons.
      // Subtract the previously selected radio button value from the total.
      calculatedTotal.value = eval(calculatedTotal.value) - eval(previouslySelectedRadioButton.value);
      // Save the current radio selection value.
      previouslySelectedRadioButton.value = eval(inputItem.value);
      // Add the current radio button selection value to the total.
      calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
    } 
	
	else
	{   // Process check boxes.
      if (inputItem.checked == false) 
	  		{   // Item was uncheck. Subtract item value from total.
          calculatedTotal.value = eval(calculatedTotal.value) - eval(inputItem.value);
     		 } 
	  
	  else {   // Item was checked. Add the item value to the total.
          calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
    		}
    }

	elseif 

    // Total value should never be less than 0.
    if (calculatedTotal.value < 0) {
      InitForm();
    }

    // Return total value.
	return(formatCurrency(calculatedTotal.value));
  }
}

// Format a value as currency.
function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g,'');
  if(isNaN(num))
     num = "0";
  sign = (num == (num = Math.abs(num)));
  num = Math.floor(num*100+0.50000000001);
  cents = num%100;
  num = Math.floor(num/100).toString();
  if(cents<10)
      cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
      num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
  return (((sign)?'':'-') + num + '.' + cents + ' kn');
}

// This function initialzes all the form elements to default values.
function InitForm() {
  // Reset values on form.
  document.selectionForm.total.value='$0';
  document.selectionForm.calculatedTotal.value=0;
  document.selectionForm.previouslySelectedRadioButton.value=0;

  // Set all checkboxes and radio buttons on form to unchecked.
  for (i=0; i < document.selectionForm.elements.length; i++) {
    if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
      document.selectionForm.elements[i].checked = false;
    }
  }
}

I don't want to overspam my post with more code, so I hope this is all you need, at least for now.

THANK YOU very much in advance.

Hello All,

I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N.

Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total.

Code:

<form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'>

<table border="box" width="100%">
<tr>
<td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td>
</tr>
</table>

{foreach value=fy from=$php_array}
<table>
<tr>
<td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td>
</tr>
</table>
{/foreach}

</form>

Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =)