JavaScript - Can I Use Javascript To Submit A Page With Form Data?

Hi friends,
i'm using greybox on my website, and using survey.
i want when click submit button then post form data to opened greybox window.. but can't....

my form actions
<form action="anket.php?islem=ok" method="post" onSubmit="javascript:return GB_showCenter('Anket',this.action, 280, 350)" >
greybox window open, but can't show post data..

can anyone help me ?

sorry for may bad english

Hi. Please help. I have a credit card donation page and what I wanted to do is after they click the submit button and transaction is successfult I wanted to capture the donation amount they enter from the donation page and show it to the next page. I know that is possible but I just don't know how to do it. I am new in Javascript and still consider as a baby. Can someone please help? Thanks in advance.

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 am running into a problem, that no one else in the world seems to have. When I make a form and submit the page is refreshed, or rather redirected to a state with the values filled after the ? (i.e. http://localhost/comp-267/lab15.html -> http://localhost/comp-267/lab15.html?cardNUm=).

I have found solutions that have worked for other people, none of them work for me. I have tested my forms on multiple browsers on multiple systems and the problem persists.

Here is one example of my code where this happens.
Code:

<script type="text/javascript">

function checkCC(myForm)
{
	var ccType;
	var ccLength;
	var ccNum = myForm.cardNum.value; 
	if (myForm.cardType.selectedIndex == 0)
	{
		ccType = "Visa";
	}
	
	else if (myForm.cardType.selectedIndex == 1)
	{
		ccType = "MasterCard"
	}
	
	else if (myForm.cardType.selectedIndex == 2)
	{
		ccType = "AmericanExpress"
	}
	
	 switch(ccType)
    {
		case "Visa":
        	valid = /^4[0-9]{12}(?:[0-9]{3})?$/;
			
			if (valid.test(myForm.cardNum.value))
			{
				alert("This is a Valid Visa Card");
				return true;
			}
			
			else
			{
				alert("This Card Number is Invalid For Visa");
				return false;
			}
        	break;
		
      	case "MasterCard":
        	  	valid = /^5[1-5][0-9]{14}$/;
			
			if (valid.test(myForm.cardNum.value))
			{
				alert("This is a Valid MasterCard Card");
			}
			
			else
			{
				alert("This Card Number is Invalid For MasterCard");
			}
        	break;

      	case "AmericanExpress":
        	valid = /^3[47][0-9]{13}$/;
			
			if (!valid.test(myForm.cardNum.value))
			{
				alert("This is a Valid American Express Card");
				return true;
			}
			
			else
			{
				alert("This Card Number is Invalid For American Express");
				return false;
			}
        	break;

      	default:
        	valid = /^$/;
        	alert("Card type not found");
			return false;
    }
}
</script>
</head>

<body>

<h1>Credit Card Validator</h1>
<form name="creditCard" onsubmit="return checkCC(this)">

<span class="labels">Card Type:</span>
<select name="cardType" size="3">
	<option name="visa">Visa</option>
    <option name="mc">Master Card</option>
    <option name="amex">American Express</option>
</select>
<br />
<span class="labels">Card Number:</span>
<input name="cardNUm" type="text" size=30 value="" />
<br />
<br />
<input type="submit" value="Death to All" 
style="background-color:#666666 !important; border:thick groove !important; border-color:#333333 !important"
onclick="javascript:return checkCC(this.form)" />
</form>

</body>
</html>

you can find the page he
Form Example

How do I get this to not happen? I've tried almost every fix I could find that worked for other people none have worked for me.

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.

Hi,

I have a jsp which has a function gets called during the page unload.
This jsp has a form with an action attribute to one servlet.
Please find below the code snippet.

---- Java script code ---
function logoff() {
document.forms["FormName"].rel="nofollow" target="_self";
alert('Submitting the form');
document.forms["FormName"].submit();
}

--- HTML form code -----
<body onUnload='logOff()'>
<form name ="FormName" method="POST" action='<%=sLogoutResponseURL %>'>

Whenever the page gets unloaded always logoff function is getting called. I also get the alert message "Submitting the form". But my servrlet does not get invoked. My application supports logging in with the same user id more than once.

Scenario it works: User logs in. Close the application. logoff function is called and servlet gets invoked.

Scenario it does not work: User logs in one window. Open one more IE window and and open the application with same user id. this can be repeated. Now when i close the application logoff function is called for all of the window close. But servlet does not gets invoked all the time. Sometimes it stops calling servlet.

I have searched over the net and found one solution.
Below piece of code will make sure form gets always submitted.
-------------------------Start -----------------
function fakeSubmit(event) {
var target = event ? event.target : this;
/* Fire a submit event */
var fakeEvent = $(target).fire("form:submit");
if (fakeEvent.stopped == false) {
/* Call the real submit function */
this._submit();
}
}

if(window.HTMLElement){
/* DOM-compliant Browsers */
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = fakeSubmit;
} else {
/* IE does not expose it's HTMLElement object or its children
Let the document load so all forms are accounted for */
document.observe("dom:loaded", function(){
for(var i = 0; i < document.forms.length; i ){
document.forms[i]._submit = document.forms[i].submit;
document.forms[i].submit = fakeSubmit;
}
});
}
-----------End ------------------

But this resulted in script error while loading the page "object does not support this method or property" at line where document.observe is there.

Kindly help at the earliest.

Thanks in advance
Santosh

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?

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?

My html form code is

<html>
<head>
<script type="text/javascript" src="2.js"></script>
</head>
<body>
<h1 id="remain"></h1>
<form action="3.php" method="post" id="form1" name="form1">
<input type="text" name="id">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>

I need to submit the form after coundown.Here is my countdown script file

window.onload=counter;
function counter()
{
var seconds = 5;
countDown();
function countDown()
{
document.getElementById("remain").innerHTML=seconds;
if(seconds>0)
{
seconds=seconds - 1;
setTimeout(countDown,1000);
}
if(seconds == 0)
{
document.form1.submit();
}

}
}


Countdown is working but form does not submit after countdown.Please help me regarding this.Thanks in advance

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