JavaScript - Auto Submit A Form After Countdown Using Javascript

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???

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);
        }
    }
}

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!!! =)

I have a simple form and am validating onchange and need a final validation onsubmit. I am displaying a message to the right of the inputbox on error.
I'm trying to keep this at DOM 1 compatible and not use any framework.

HTML

Code:

<form id = "myForm" action = "" onsubmit = "return validateForm(this);">
                <table class = "table-submit" border = "0">
                    <tr>
                        <td>
                            Username: 
                        </td>
                        <td>
                            <input type = "text" id = "username" 
                                size = "30" maxlength = "30"
                                onchange = "validateUsername(this, 'msgUsername')" />
                        </td>
                        <td id = "msgUsername">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Password: 
                        </td>
                        <td>
                            <input type = "password" id = "password" 
                                size = "30" maxlength = "30"
                                onchange = "validatePassword(this, 'msgPassword')" />
                        </td>
                        <td id = "msgPassword">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                    <td>&nbsp;</td>
                    <td>
                        &nbsp;
                        <input type = "submit" value = "Submit"  />
                        &nbsp;
                        <input type = "reset" value = "Clear" />
                    </td>
                </tr>
                </table>
</form>

JavaScript

Code:

function validateUsername(myItem, myElement) {
var dom = document.getElementById(myElement);

    if (myItem.value.length < 3) {
        dom.innerHTML = " Username needs to be a minimum of 3 characters! ";
        return false;
    }
    else {
        dom.innerHTML = "";
        return true;
    }
}

function validatePassword(myItem, myElement) {
var dom = document.getElementById(myElement);

    if (myItem.value.length < 5) {
        dom.innerHTML = " Password needs to be a minimum of 5 characters! ";
        return false;
    }
    else {
        dom.innerHTML = "";
        return true;
    }
}

function validateForm (itm) {

    // kind of stuck here...
}

As you may of noticed, I am a bit stuck on my validateForm() function. The code validates on each inputbox onchange event. Not sure what is the best way to go from here. I thought about doing an If for my both single input box validation, but I would need to send each parameters which is what i was trying to avoid by using this. Would like some suggestions.

I am not familiar with javascript only html, but I have researched this problem and found some solutions, but I am unsure what to do with them.

I have an html checkbox form that lists book titles. The user will click on the checkbox next to the titles that interest them. Then when they click submit, I want a pop-up box to appear with the titles they selected in a printable list.

I found this javascript code:

Code:

<script langauge="javascript" type="text/javascript">
function openPreview() {
    var myWin = window.open ("popup.htm","myWindowName","width=500,height=350");
    myWin.focus();
}
</script>

Then here is my html form code:

Code:

<form action="" form id= "myInput">
			<table width="523">
			<tr><td width="33"> <input type="checkbox" name="product" value="Ironman"></td>
 			<td width="229"><div align="left">Ironman</div></td> 
 			<td width="174">Chris Crutcher </td> 
 			<td width="56" align="right">&nbsp;</td></tr>
			<tr><td><input type="checkbox" name="product" value="Staying Fat for Sarah Byrnes">
 			<th><div align="left">Staying Fat for Sarah Byrnes </div></th> 
 			<td>Chris Crutcher </td> 
 			<td align="right"><tt>Realism</tt></td>
			</tr>
			<tr><td><input type="checkbox" name="product" value="The Watsons Go to Birmingham">
 			<th><div align="left">The Watsons Go to Birmingham </div></th> 
 			<td>Chrisopher Paul Curtis </td> 
 			<td align="right">&nbsp;</td>
			</tr>
	  </table>
        <input type="button" id="btnPreview" name="btnPreview" value="Preview" onclick="openPreview()" />
</form>

Then on the popup.htm page I have this code

Code:

<script language="javascript" type="text/javascript">
document.write(window.opener.document.getElementById("myInput").value);
</script>

This code has worked for me when the form is a textarea or a label, but I don't know how to use it with a checkbox form. I know that labeling the form "my input" only works for textarea or labels, so I understand why the pop-up menu says undefined. What do I need to do to get the checkbox data to appear.

I have created a php script that POSTs to another page sendmail.php which then redirects to a thanks/successful page.

Is it possible to have the form submit and return a thank you message on the same page.

basically submit the form without reloading.

Is there a way to stop a form submit after hitting submit? Refresh wouldn't realy be an option. Is abort() what I'm looking for?

I want to use Javascript to submit a form - without filling the form in physically

Is this possible?

Let's say a web page has a form that submit First Name and Last Name to the next page
Instead of filling in the form and hitting submit, can I submit the data in variables and call the next page somehow using Javascript?

Thanks


OM

I have two password fields on a webpage form. If the passwords don't match, I want to display a message. I could use a popup, I could redirect to a page containing the message with another redirect back to the form or, the option I'd like to use, have a hidden table cell in the form containing the message that displays should the form be submitted without matching passwords. If I use the latter, where do I call the javascript function to display the hidden table cell? So in effect, only javascript function would execute if the passwords don't match, the action page itself shouldn't load at all. Can/should this be done on the action page?

I'm trying to understand how forms, data, php, javascript all work together. So 1) I hardcoded some html form fields with values using php using "echo", then 2) I dynamically created some more html form fields with values using javascript using "createElement" and appending to the html form element. When I click on the submit form, the php created form fields still show on the webpage, but the javascript dynamically created form fields disappear.

Can anyone shed some light for me? Why are the javascript created form fields disappearing when I click on submit and not the PHP created form fields?

Thank you!

Code:

<form method="post" id="commentform" action="<?php echo $PHP_SELF?>">

Hello all

I created a form which has a lot of textboxes, checkboxes and select-lists which are getting filled up by the records from a database table. I am basically creating an edit screen for a record.

No I want to check all these input elements using javascript validation. I want this to performed when a button "Archive" is pressed.

My problem is this "Archive button" needs to be a submit button. This does run the javascript validation but after completing the validation it submits the form. I want that submission should be stopped when the validation is violated. how can I do this?

What I want is a button which acts as a default button (triggers the onclick event when I press enter) but submits only if the form is valid.

hi everyone im here again begging for your help im innocent in this field

is there a javascript for setting up a limit in form submit attempts by which someone's attempts can be reset for given time? Shall we say you could try again after 10minutes or tommorow or whatsoever.

for example in my form:

<form blahblahblah...>

<input value=""...blahblahblah/>

(then here it goes my problem, if the input value above IS NOT EQUAL to "MYUSERNAME" then limit the form submission attempts to 10 tries, else a warning box will appear saying "You have reach the maximum tries per day")

<input type="submit" value="Submit"/>
</form>

thank you so much and may the God Bless you for your kindness!

Hello,
I have the following DIV tag
Code:

<div id = "cbContainer"> </div>

The div is initially hidden as the display is set to none. I have one text input in my form. Depending upon the changed text in that textbox, there is a javascript function which creates a list of checkboxes and by using the innerHTML, the above div is filled up with the check boxes like shown in the code below:

Code:

var chkboxes = '';
for(var r = 0; r < related.length; r++)
{
	chkboxes = chkboxes + 
        '<div class ="versionswidth">'+
        '<input type="checkbox" name="version" value = related[r] />'+ related[r] + 
        '</div>';
}
var div = document.getElementById("cbContainer");
div.innerHTML = chkboxes;

div display is then set as "block" which makes the div visible. The problem is that on form submission, the input of selected checkboxes is not submitting.

I will be grateful for any help.

Thank you.

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.