html post form different destinations - javascript

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.

Related

client-side form validation after clicking SUBMIT

I have 2 php files "source.php" and "target.php". In the source.php part I have,
<form method="POST" id="form1" action="target.php">
...
<input type="submit" name="submit" value="Submit"/>
</form>
When I click on submit it goes to the "target.php" (even if I have errors in the form), but I want that, only after all form fields are validated it will go to the target page, else it shows some kind of warning message and stays on the same page. Please help! Maybe this is a stupid question for some but I am a beginner. (I know how to do all the field validations and its working fine).
Duplicate of duplicate questions.Please search throughly before you post next time.
Generally javascripts are used for validation.But there are cases when javascripts become inefficient,for example when you need to validate country and its states.Its not practical to send the entire list of countries and states to the client. In such scenarios AJAX is used.By using AJAX the client sends the data to server immediatly after the user enters it.then it fetch only the required data.Its a simultaneous two way communication between client and server.for example if the user enters country name as INDIA,using AJAX states of INDIA are loaded for validation,thus saving bandwidth.
JavaScript and AJAX are not easy to learn,you must research try and correct different codes.Just google "JavaScript form validation"...
This is from w3Schools...
Required Fields
The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted:
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
The function above could be called when a form is submitted:
Example
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
here is more basic examples http://www.w3schools.com/js/js_form_validation.asp
Good Luck
You can use AJAX to validate your form. JavaScript is not recommended for form validation.
A simple tutorial for AJAX Validation is available here
But be aware, even if you are validating your form before submission to target.php, always make sure that you check the data in target.php too. This is because JavaScript can be changed (thanks to the modern DOM interpreters) in the browser. It can be made so that the form is submitted without AJAX verification. So you should check it twice, before and after submission.
Also make sure to escape the data, as user input can never be trusted.
You should also user strip_tags($string) to prevent use from inserting php code.
JavaScript is most likely the easiest way to do this (read the other posts).
However, if you don't want to use JavaScript you could always check if all forms are set using isset() or something similar and then passing on the $_POST variables in the URL and grabbing those using $_GET. Of course make sure there isn't any sensitive information in the URL. In addition: you could always work with global variables.
Another way to do this without JavaScript is submit to a database after several checks (like escaping the strings etc.), perhaps even encrypt, but I don't suggest this since this is the long way around.

JQuery Validation remote JSFiddle

I have a problem with jquery validation remote and my form submit.
Look this code http://jsfiddle.net/35cHS/135/
<form id="fail">
<label>Documento:</label>
<input id="numero_documento" maxlength="2" name="numero_documento" maxlength="16" type="text" />
<input type="submit" value="Próximo" />
</form>
$('document').ready(function () {
$('#fail').validate({
rules: {
numero_documento: {
required: true
,remote: {
url: 'http://cep.correiocontrol.com.br/04676090.json',
success: function (data) {
//console.log('Ok! Continue submit...');
}
}
}
}
});
});
When I insert a value and click on button it is ok. A submit is called.
But if I uncomment the remote and again insert a value and click ok nothing happens.
I want continue with my form submit because I just want to make a search and return yes or no later.
Is it possible ?
sorry for my english I am working on it =)
remote is a bit misleading because it really just means another file on your server so in this particular case, you can't do a cross domain request to retreive that json object unless you're using json with padding. At this moment, CORS is restricting you. Instead, create a php file on your server, such as, get_json.php, and then use
echo file_get_contents('http://cep.correiocontrol.com.br/04676090.json');
The server will not be limited by CORS unless the configuration on cep.correiocontrol.com.br is configured in such a way to deny these requests completely.

what happens on form submits in Coldfusion?

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

Mutiple Form Submission Failing to Work

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

Thank you alert upon form submission

I have a very basic form at http://www.happyholidaylites.com/contact.html and it is working great. When you submit the form, the user is brought to the index.html with no message that the form has been sent. I am looking to initiate an alert that says, "your form has been submitted" with an x button. My code looks like this:
<form method="post" id="myForm" action="dynaform.php">
<input type='hidden' name='rec_mailto' value='JBIRD1111#gmail.com'>
<input type='hidden' name='rec_subject' value='New Contact Form'>
<input type='hidden' name='rec_thanks' value='index.html'>
so on and so forth.....
The last line is what is telling the form what to do after the submit button is pressed, but I dont want it to point the browser to the index, rather I want a javascript popup with a success message. Any ideas?
Why not a simple onSubmit?
<form method="post" id="myForm" action="dynaform.php" onSubmit="alert('Thank you for your feedback.');" >
To be honest you are better re-directing to another page in order to avoid the user re-submitting the page on a refresh. Have a look at Post/Redirect/Get Pattern.
Popups can be extremely annoying on websites. You should create a page called "thank-you.html" that you can re-direct the user to on successful submission which has access to the site navigation options or even just do a re-direct back to the form page after a few seconds.
Instead of redirecting to index.html, redirect to thanks.html; your users will thank you because everybody hates popups!
Sounds like your PHP script handles the form submission by processing the input and redirecting the browser to the value in the rec_thanks field.
You can add something like onsubmit="YourJavaScriptFunction()" to the form tag to add client-side behavior prior to actually submitting the form. Within that function you can perform validation, use alert('Thank You!'), etc..

Categories

Resources