Menu
I have been looking all over the web for a way to use javascript to submit my form. I have seen ajax solutions, but they are confusing, and I cannot get any of them to work. Is there a way that I can easily submit my form using javascript or ajax, using POST?
I cannot find a simple solution…
Yes, I have tried that.
Let me rephrase my my question. I am wanting to use javascript, or AJAX, because I want to submit the form without redirecting to another page. I have multiple forms on a page, and I need to be quickly filled out, and submitted one after another, while keeping the user on the same page. This is why I am wanting to use javascript/ajax to submit the form while keeping the user on the same page.[/QUOTE]
[code=html]<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
// You don't need to change anything in this function:
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
// The following function obtains two variables from your form (email and message)
// and builds a string that gets sent to your PHP script. Change this function to
// obtain whatever fields you want from your form.
function getquerystring() {
var form = document.forms['form1'];
var email = form.email.value;
var message = form.message.value;
qstr = 'email=' + escape(email) + '&message=' + escape(message);
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
</head>
<form name="form1">
<p>Your Email Address: <input name="email" type="text"><p>
Your Message:<br>
<textarea name="message" rows=10 cols=80></textarea>
<input value="Go" type="button" onclick='javascript:xmlhttpPost("ajax-send-email.php")'></p>
<div id="result"></div>
</form>
</body>
</html>[/code][CODE]
<iframe name="OTHERFRAME" style="display: none;"></iframe>
<form action="somepage.php" method="get" target="OTHERFRAME" name="myform">
User Name: <input type="textbox" name="uname">
E-Mail Address: <input type="textbox" name="uemail">
<input type="submit" value="Submit">
</form>
[/CODE]This is a bit silly guys, really. Make a hidden <iframe> or have the page within a <frameset> and hide the hidden frame. WITHOUT USING AJAX NOR JAVASCRIPT:
[CODE][/QUOTE]
<iframe name="OTHERFRAME" style="display: none;"></iframe>
<form action="somepage.php" method="get" target="OTHERFRAME" name="myform">
User Name: <input type="textbox" name="uname">
E-Mail Address: <input type="textbox" name="uemail">
<input type="submit" value="Submit">
</form>
[/CODE]
t know that well, as far as I can tell, all Ajax is, is just another ****ty microsoft created standard. But hey, thatThe TARGET= approach works, but I'm pretty sure that each form submission will have to wait for the previous to complete. Not an issue if you just have a couple forms on the page. Could be a real pain if you have more than 5 or 6 though.
The multiple iframe approach allows you to use javaScript to execute them all at the same time as each acts asynchronously from the other.
A common technique I use is to throw a DIV around the iframe and then hide/show it, position it where ever I want on the screen, etc.. Makes a nice server side dynamic menu or report element (pseudo-ajax functionality). Anytime I want "reload it" with new values I don't submit to it with a form, I simply re-assign the SRC value of the iframe.[/QUOTE]
[CODE]window.frames['FRAMENAME'].document.forms[0].submit();[/CODE]....I am using multiple iframes. One for each form, and submitting the form into the iframe. Is this the same as you are suggesting?[/QUOTE]Not really - you are not placing your forms in an iFrame. You are using the iframes as a place to dump your server side responses and keep them invisible to the user. The approach I mentioned works when you want to show output from the server side, but not have the rest of the page flicker, and/or not actually show the results until you want to. Like I said - sort of a pseudo-Ajax approach.
...Would I put all of my frame names where FRAMENAME is....I never know how many forms there will be (which are used for editing records) nor do I know that frame names before hand since they are generated from each assets ID.[/QUOTE]If they do not have a name, then how are you using them as the TARGET= in your submit statements ?
[code=html]<%
// JSP syntax - Replace with what ever server side code you are using
String sAssetID = "10202";
String sFrameName = "Asset_iFrame" + sAssetID;
%>
<iframe name="<%=sFrameName%>" style="display: none;"></iframe>
<form action="somepage.php" method="get" target="<%=sFrameName%>" name="myform">
User Name: <input type="textbox" name="uname">
E-Mail Address: <input type="textbox" name="uemail">
<input type="submit" value="Submit">
</form>[/code][code]for (i=0; i<document.forms.length; i++) {
document.forms[i].submit();
}[/CODE]Not really - you are not placing your forms in an iFrame. You are using the iframes as a place to dump your server side responses and keep them invisible to the user. The approach I mentioned works when you want to show output from the server side, but not have the rest of the page flicker, and/or not actually show the results until you want to. Like I said - sort of a pseudo-Ajax approach.
If they do not have a name, then how are you using them as the TARGET= in your submit statements ?
I think your approach is a little strange, but I don't know the project, so if you want to continue using your current approach then dynamically create DIV tags and give each a name based on the "assets ID" and make sure your form submits to it as a TARGET
[code=html]<%
// JSP syntax - Replace with what ever server side code you are using
String sAssetID = "10202";
String sFrameName = "Asset_iFrame" + sAssetID;
%>
<iframe name="<%=sFrameName%>" style="display: none;"></iframe>
<form action="somepage.php" method="get" target="<%=sFrameName%>" name="myform">
User Name: <input type="textbox" name="uname">
E-Mail Address: <input type="textbox" name="uemail">
<input type="submit" value="Submit">
</form>[/code]
You can now just use JavaScript to loop through all the forms in your document and submit them all.
[code]for (i=0; i<document.forms.length; i++) {[/QUOTE]
document.forms[i].submit();
}[/CODE]
[CODE]for (i=0; i<document.forms.length; i++) {
document.forms[i].submit();
}[/CODE]First off, how would I make this into a button:Simplest example I can think of:
[CODE]for (i=0; i<document.forms.length; i++) {[/QUOTE]
document.forms[i].submit();
}[/CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Submit all Forms</title>
<script>
function SubmitAll() {
for (i=0; i<document.forms.length; i++) {
document.forms[i].submit();
}
}
</script>
</head>
<body>
<a href="#" onclick="SubmitAll();return false;">
Click to Submit All forms on this page
</a>
</body>
</html>0.1.9 — BETA 6.2