Can someone help me please. I had replies to a similar question but am unable to solve my problem so I have tried to be as detailed as I can here. Sorry if it's a repeat but I am really in need of help on this.
I am trying to submit three forms to the same asp page via a mouseover event. The asp page executes code to save an image according to which form was submitted and the data it contains. I have tried several ways to do this. Submitting in turn as shown below results in some or all of the images being created, but it is random and it seems subsequent submissions are overwriting previous calls.
function save_all_des(){
document.getElementById("form_zoom1").submit();
document.getElementById("form_zoom2").submit();
document.getElementById("form_zoom3").submit();
}
I have also tried using jquery like this:
$("#create_image").mouseover(function() {
$("#form_zoom1").submit(function() {
$("#form_zoom2").submit(function() {
$("#form_zoom3").submit();
});
});
});
This doesn't work at all, even if I try just one form. (The mouseover event itself fires ok.)
The three forms have the same input names (I've shown just one) but with different values. Individually they submit ok.
<form id="form_zoom1" name="form_zoom1" action="abc.asp" target="MyFrame">
<input type="hidden" name="tab" value="1">
</form>
<form id="form_zoom2" name="form_zoom2" action="abc.asp" target="MyFrame2">
<input type="hidden" name="tab" value="2">
</form>
<form id="form_zoom3" name="form_zoom3" action="abc.asp" target="MyFrame3">
<input type="hidden" name="tab" value="3">
</form>
<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<iframe id="MyFrame2" name="MyFrame2" style="display:none;"></iframe>
<iframe id="MyFrame3" name="MyFrame3" style="display:none;"></iframe>
How do I make sure the code behind the one form submittal is fininshed before the second, then third, is submitted?
Any help appreciated.
Thanks
It sounds like you'd be better off using AJAX to send POST requests to the server, rather than actually submitting the form. You could possibly send all three requests at the same time, and have it work correctly, but that depends on exactly what you're doing with the response from the server after the submit.
Take a look at the jQuery Documentation for more information on using it to perform AJAX calls.
Sample code may look something like this:
function submitForm(form) {
$.ajax({
url: 'abc.asp',
method: 'post',
data: {
tab : $('input[name="tab"]',form).val()
},
success: function(data) {
/* handle the response from the server here
if you don't need to do anything to the structure of the page, you can probably just leave this blank
may want to put in some console.log or alert statements for debugging purposes
*/
}
});
}
$('#create_image').mouseover(function() {
submitForm($('#form_zoom1'));
submitForm($('#form_zoom2'));
submitForm($('#form_zoom3'));
});
Note that that sends three AJAX POST requests, one for each form, at roughly the same time. There's no guarantee that they'll complete in that order (though this doesn't seem important given the information you've provided).
Related
<form id="login" method='post' action='membership.php'>
<b>Email</b><br><br>
<input class="form" type='text' name='email2' id='email2'><br><br>
<b>Password</b><br><br>
<input class="form" type='password' name='password2' id='password2'><br><br>
<input class="submitborder" id='submit2' type='submit' name='submit2' value='Submit'>
</form>
<script>
$(document).ready(function () {
$("#submit2").on("click", function() {
$(this).attr("disabled", "disabled");
Submitting();
});
});
function Submitting() {
setTimeout('$("#submit2").removeAttr("disabled")', 10000);
}
function PreventDouble(event) {
event.preventDefault();
}
</script>
<?php
echo "<a href='construction.php' onclick='PreventDouble(this)'></a>";
?>
I've read a few forum pages etc ... and they suggest disabling using jQuery or AJAX. When I disable though, I doesn't submit the form data anymore. But will disable the button accordingly.
For the hyperlink, because it sends user to another page, then disables, it's hard to judge if onclick='PreventDouble(this);' is working.
I also would like to apologize as I am a newb when it comes to Javascript, jQuery, or AJAX.
UPDATE: May I also mention I'm newb at this forum posting. Um. One last note is the disabling of form button. I use this code in another area of my website that doesn't click properly on computer. As if it seems to be on a wait before it processes my Javascript/jQuery/AJAX scripts? I dunno.
I admit defeat to Javascript/jQuery/AJAX x_x
I may be wrong as I am not familiar with PHP, but it doesn't look like the PreventDouble(this) method get called upon form submission. You can try putting the function inside the click event handler instead. Or better yet, just put the event.preventDefault() line there.
I'm struggling a little to understand the server-side of things using Coldfusion8 and thus far doing client-side stuff only.
Say I have a basic Coldfusion page layout like this:
<script type="text/javascript">
function foo() { docoument.myForm.submit(); }
</script>
<cfif isdefined("sendMyForm")>
... running coldfusion...
... displaying something...
</cfelse>
<form action="nextPage.html" method="post" name="myForm">
<input type="text" name="formContains" />
<input type="hidden" name="sendMyForm" value="yup" />
<input type="button" name="sender" value="send" OnClick="foo() />
</form>
</cfif>
Question:
What actually happens server-side when I submit the form? Is the page getting "re-loaded" and the cfif causes coldfusion to run and display results? Just looking for some basic info so I understand what's happening.
Thanks for hints!
Think of CF and most web servers/systems as accepting input (url/get, form/post, cookie, etc) and returning output (html, json, text, etc). That cycle generally repeats. Someone types in a web address in a browser, request goes to server, page returned with form. User hits submit, request goes to server, page returned with results. User clicks link, request goes to server...and on and on.
You need to have the form action submit back to itself due to the way the if statements are organized. If in form.cfm file then action should be form.cfm. Unless you setup specific mappings in the webserver to have CF handle html files then the file will need to be .cfm
You mention leaving the action attribute out all together submits the form back to the same page but I don't believe this works in every browser.
It is also more common/safer to have form method="post", then check for structkeyexists(form, "fieldname")
Ok. Not the latest links, but valuable information.
http://www.tek-tips.com/viewthread.cfm?qid=523839l
http://cookbooks.adobe.com/post_Email_contact_form_in_ColdFusion-16882.html
I was trying to understand how form submits work in Coldfusion. If the page structure is:
<cf "inputName" = "someValue">
... run the from logic
</cfif>
<cfoutput>
<form>
<input name="inputName" />
... more form
</form>
</cfoutput>
So when I submit the form without action, it gets submitted to the page it's on and therefore the first CF-part can run....
This is really frustrating I would appreciate some help with this. I have a div, called comments and a form inside of that div. What I want to do is post a form to the current page and have it load inside of the div without reloading the entire thing. Here is my current code:
<div id="comments">
<form action="#" method="post" onsubmit="return false;" >
<input type="hidden" name="txtname" value="test">
<textarea id="wysiwyg" name="wysiwyg" rows="5" cols="50"></textarea>
<input type="submit" name="post" id="post" value="Submit">
</form>
<script type="text/javascript">
EDIT: Read edit below for current code
</script>
</div>
When I submit, the alert fires, but the page does not load. It works fine if I make the event as follows:
$("#comments").load("comments.asp");
It's not liking the posting of data. I have used .load before but never to post data. I got the above code from these very same forums.
I'm honestly not sure of the purpose of 'name' and 'tel' - do I refer to those variables or the form variable names when processing the code? This is in ASP classic.
What's wrong with the above code, how can I get it to send data from the forum via POST? Thanks!
EDIT:
I am now using the following code:
$("#post").submit(function(event){
var $form = $(this),
$inputs = $form.find("input, select, button, textarea"),
serializedData = $form.serialize();
$inputs.attr("disabled", "disabled");
$.ajax({
url: "/comments.asp",
type: "post",
data: serializedData,
success: function(response, textStatus, jqXHR){
console.log("comment posted");
},
error: function(jqXHR, textStatus, errorThrown){
console.log(
textStatus, errorThrown
);
},
complete: function(){
// enable the inputs
$inputs.removeAttr("disabled");
}
});
event.preventDefault();
});
And now it's using properly getting the form handled...however it goes to comments.asp. How can I make all the action happen in a certain div (comments div?)
It seems to me you are blending a bunch of different techniques in a way that is not entirely coherent.
$.post is a shortened version of $.ajax (see here).
$.load takes a url and sticks it into a <div> or other DOM Element (see here).
If I understand it correctly (and I may not!), you're not really wanting to load the form, but put values into the form fields. $.load is an odd way to do this. (It may work, but I do it another way.)
If you're using $(#...).submit, you can also leave out a whole bunch of stuff in your form. The following should work fine.
<form id="form_id">
...
<input type="submit" value="Submit">
</form>
My method is: (1) have a hardcoded HTML form (or build it by AJAX), (2) get the values from the DB (or wherever) using $.post (or $.ajax), (3) stick the values into the form using .val() (or equivalent - whatever is right for the input type) and the DOM id of that input, and then (4) use .submit (in a manner similar to yours). You will need to add preventDefault as the others have suggested.
You're also muddying the waters using #post as the DOM id. You really want to give the form itself the ID, and then use $(#form_id).submit(... I can't test it now, but having the submit on the input field may cause some grief. The official example attaches the .submit to the form id.
I'm also not sure the <div> with id 'comments' really does much. I have a container id like your 'comments', but that's because I build forms by AJAX and stick them into the container. If you don't need to do that, the id 'comments' is unnecessary to the whole procedure.
Your text box element dont have an id with value txtname. But in your script you are trying to access using # (which is supposed be with an id context). So add an id element to your input box.
<input type="hidden" name="txtname" id="txtname" value="test">
And as expascarello said, You need to stop the default behaviour of the submit button . Other wise it will do the normal form posting so you wont be able to feel the ajax effect.
Use preventDefault
$(function(){
$("#post").click(function(e) {
e.preventDefault()
alert("clicked");
$("#comments").load("comments.asp", {
'name': $("#wysiwyg").val(),
'tel': $("#txtname").val()
});
});
});
You are not cancelling the clicking of the button so the form is submitting and resetting the page.
$("#post").click(function(evt) {
evt.preventDefault();
...
jQuery event.preventDefault()
The load() method does a get and not a post.
I am developing a django web app in which I would like to have a registration process. In this registration process I have of course a form asking for name, email and password. What I would like to do is, send the form via post to 2 different places. One of which is of course the registration database which saves the password and the like, and the other being the Emencia newsletter app. In the case it helps, Emencia only needs email and a name (optional).
So how can I do this with only one form, 2 places to send it to and, taking just some of the data of the form and not all?
Thank you!
While I agree that the better approach is to handle this on the server side, let me correct that it is very possible to submit the same form to different server side scripts.
See the page below for the script and some demos:
How to create a multi-submit form
It works in IE, Firefox and Chrome.
You can't. There is no way to send a form to two ressources.
What you CAN do is send a HTTP request in your register script to the newsletter script, e.g. using urllib2.
To do this you would have to use Javascript & AJAX
http://www.tizag.com/ajaxTutorial/
This kind of trickery used to work in most browsers but...it seems that it only works in Firefox now. Adding a delay between the two submits makes it work in IE but not Chrome. I'm actually amazed it still works in firefox :)
<html>
<body>
<form method='post' action='place1.php' onsubmit='this.action="place1.php";this.submit();this.action="place2.php";this.submit();return false;'>
<input type='text' name='thing' value='something' />
<input type='submit' value='send' />
</form>
</body>
</html>
Here is a solution with jQuery...
$("input:submit").click(function(e) {
e.preventDefault();
// javascript validation
// run this if validation succeeds
$.ajax({
url: "url to emencia newsletter",
type: 'post',
data: "Email=" + $("#emailField").val() + "&Name=" + $("#nameField").val(),
success: function(result) {
// do stuff
$('form').submit();
}
});
// could also go here if you don't want the success callback -- $('form').submit();
});
So what happens is you click your submit button. The e.preventDefault tells the browser to stop the form from submitting. You then run an ajax request to submit to emencia. On success it submits the original form. I am not sure if you need to put the form submit in the success or simply place it after the ajax request. I don't think it really matters.
let me start by saying it may look simple but im finding it extremely difficult.
ive made a search script that uses PHP and to fetch a result would look like this
search.php?term=alice&submit=Submit
Standard stuff.. problem is, i use an SPI with AJAX and PHP so my results would have to load dynamically into a div, whilst still keeping the hash value, as not to lose the page the user had visited previous to searching.
jQuery.history.js is the plugin i use for back button support, which requires links to be like such:
Home Page
this would load 'home.html' into a div named pageContent. as far as i know theres no way to call php files unless you develop a little hack, which i have,
here is my JavaScript/jQuery for my search form:
<script language="JavaScript">
$(document).ready(function() {
// bind form using ajaxForm
$('#search1').ajaxForm({
// target identifies the element(s) to update with the server response
target: '#pageContent',
// success identifies the function to invoke when the server response
success: function() {
$('#pageContent');
var hash = '#search.php?term='+($('#query').val()+'&submit=Submit').replace(/ /g, '+');
var stripped = hash.replace(/(<([^>]+)>)/ig,"");
update(window.location.hash = stripped);
}
});
});
</script>
Heres the form:
<form id="search1" action="search.php" method="post">
<input id="query" type="text" name="term" />
<input type="submit" name="submit" value="Submit" />
</form>
My problem is this:
ive tried this.form.reset(); this: Resetting a multi-stage form with jQuery , yet none of this works. please help me if you know a way of doing this..
$('#query').val(DefaultValue);
with this u can set your value to whatever you want, like blank: '';