what happens on form submits in Coldfusion? - javascript

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

Related

How to stop Redirecting a page when a form is submitted?

I'm using a form and when the form is submitted I used action attribute and called a server url where the form data gets saved
Here's how it looks :
<form name="example" action="webresources/data/update" method="post">
</form>
The above form when submitted updates the form data in to the server but at the same time it also takes me to the new page webresources/data/update which has nothing but server response
I don't want this response to be shown on the web page. The url should be called when the form is submitted and it should be on the same page without redirecting to a new page.
Is there any way to do this, I'm allowed to send the data only via form parameters.
Thank you in advance :)
Remove the action attribute in the form and put the button outside the form.
When onclick, make an ajax call.
<form>
stuff
</form>
<input type="button" onclick="ajax()">
<script>
function ajax(){}
</script>
<form name="example" action="webresources/data/update" method="post" onclick="return false">
</form>
Returning false will stop the page from reloading or refreshing.
I suggest that before you ask a question you do a quick google search because this was the first result that came up for me prevent form submit from redirecting/refreshing using javascript.

Safari 7 infinite POST request

I've get stuck with such issue. I have a form. When user submits his data, I'm sending some data via post ajax request. On success I set some data to hidden form, which has action pointing to current url subdomain, but in fact to partner site url that is set over CNAME. Then I trigger jQuery submit event on this hidden form, so after response user is on partner site (hidden form has no target attribute). It works fine in any browser except Safari 7 on mac. It just load for infinite time.
Any help is appreciated.
Well, there's not much code. Onsuccess of I run this:
if (response.result === true) {
this.targets.login.$email.val(response.data.data.email);
this.targets.login.$password.val(response.data.data.password);
this.targets.login.$form.submit();
}
My hidden form looks like this:
<form action="http://someurlunderCNAME" method="POST">
<input type="hidden" name="_method" value="POST">
<input type="text" name="data[User][email]">
<input type="password" name="data[User][password]">
</form>
Ok, I've got it myself. The reason was triggering submit on form. And the 'correct' behaiviour is to trigger click on submit input (which, btw, should be added too)

Coldfusion post form to cfc asynchronously

First of all, let me start off by saying the product I am developing will be used by people that don't inherently have access to HTML5. Some of the individuals will still be using IE8. I have a form like the following:
<form action="ee.cfc?method=xlsupload" enctype="multipart/form-data" method="post"
<input type="file" id="xlsfile" name="xlsfile" required>
<input type="submit" value="Upload XLS">
</form>
and in my .cfc file I have a function that processes the file and translates it to a structure (which will then upload to a database after the user validates the data). Currently I have it set to <cfreturn SerializeJSON(dataset,true)>. However, when I submit the form it opens the cfc file and shows the JSON structure. I have done plenty of form submits, etc. in JQuery before, but is there a way to do this without JQuery? One would hope Coldfusion would have the capability to do this, (though of course I wouldn't be surprised if it didn't).
An asynchronously post is only useful if you want the user to interact with the webpage the form is on while in the background uploading the form. If this is what you want you should/can use jquery.
If synchronously is also an option. Then upload the form to a .cfm file, run the cfc on the .cfm document wait for the response of the component and then redirect the .cfm document using cflocation to a webpage that informs the visitor its upload has been processed. (use cflocation to prevent multiple submits).
e.g.
<form action="upload.cfm" enctype="multipart/form-data" method="post">
<input type="file" id="xlsfile" name="xlsfile" required>
<input type="submit" value="Upload XLS">
</form>
upload.cfm
<cfset yourComponent = createObject('component','/cfc/ee')>
<cfset response = yourComponent.functionName(form.xlsfile)>
<Cflocation url="done.cfm">
done.cfm
<html>....</html>

Ajax login forms working with browser password remember features

I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.
When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.
HTML:
<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>
Thanks guys!
I think I'll do it in another way.
Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works
like
<form method="post" id="" action="checkDetail.php" target="myIframe">
<input type='text' class='email'>
<input type='password' class='password'>
<input type="submit" name="" value="" id="Submit"/>
</form>
<iframe name="myIframe" id="myIframe"></iframe>
in this way you have to change a little bit of your response code to notice iframe parent the submit result.
update
it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.
so when your request is success , your response will appear in the iframe content. Try code like this in the response.
<?php
//php checks database here
?>
<script>
parent.formSuccess({
//your response infomation
});
</script>
and define a formSuccess method in the outer page to handle the submit callback
Found answer on stack : How can I get browser to prompt to save password?
My Version:
<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>
I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.
I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?

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