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>
Related
I have a form to submit and send data to 2 pages via POST.
I have tried the code with javascript. One form submit is working but other submit is not working
<form id="add">
<input type="text" name="test">
<input type="submit" onclick="return Submit();">
</form>
javascript
function SubmitForm()
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
return true;
}
The first submission is not working but 2nd submission is working.
Since you appear to send the exact same data to two different handlers, you can flip the coin - and say that you just submit one form, and process them both in filecreate.php.
As you are sending a form, you cannot send two separate forms in the same HTTP request - so you can either do them both through asynchronous methods, or process them both backend after the submission of one form.
Since you haven't shown any PHP code, I'm making some assumptions and writing some pseudo-code, but it should be enough to get you started.
So first off, set a static action-property to your form.
<form id="add" action="filecreate.php">
<input type="text" name="test">
<input type="submit">
</form>
If you are sending it over POST, then you need to specify the method as well,
<form id="add" action="filecreate.php" method="POST">
Then, in PHP, you can get both files executed if you include it to the other. Meaning, in your filecreate.php, you include the filecreate.fr.php. Once you do that, the contents of that file will be executed as well.
<?php
// Once you require the file, it will be executed in place
require "filecreate.fr.php";
// .. handle the rest of your normal execution here.
That said, if you are doing the very similar thing multiple times, just with different data, you may want to create functions for it instead - going with the DRY principle ("Don't Repeat Yourself"), you can probably create a function that handles the structure and processing, then send the data separately through that function.
Try this :
<form id="add">
<input type="text" name="test">
<input type="button" onclick="return SubmitForm();">
</form>
function SubmitForm()
{
if(document.forms['add'].onsubmit())
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
}
return true;
}
I am trying to make it so when a file is submitted, a form gets submitted. Currently the form is submitting (the page refreshes), however the form data isn't being sent.
Javascript:
$(function () {
$("#moreHomepageImages").change(function () {
//I tried all of the following, all don't work
$("#imageHomepageForm").submit();
//$("#imageHomepageForm")[0].submit();
//document.getElementById("imageHomepageForm").submit();
});
)};
Html:
<form id="imageHomepageForm" name="imageHomepageForm" enctype="multipart/form-data" action="add" method="post">
<input type="hidden" name="object" value="homepage">
<input type="hidden" name="object_id" value="0">
<label>Add More Images</label>
<input id="moreHomepageImages" type="file" name="images[]" multiple="multiple"/>
</form>
On the add page, I have
print_r($_POST);
print_r($_GET);
print_r($_FILES);
and they print 3 empty arrays. I can't figure out why the form data isn't being sent along with the request? When I add a submit button into the form and click it, the data is sent as it is supposed to,
If it matters, the form is inside a jQuery Tab (http://jqueryui.com/tabs/)
EDIT: The action attribute is not the issue since it works if I use a normal input button and click it, I am using codeigniter so I do not need .php
The issue had nothing to do with jQuery or my code, for some reason the MAX_FILE_UPLOAD in my local php config wasn't reading properly and the images I tried uploaded where > 2MB (the default) breaking the request payload...
As to why submitting the form via clicking a submit button works and submitting over jQuery didn't is beyond me...
Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...
What I have in seperate linked documents:
HTML, CSS, Javascript, PHP
What I am having trouble with:
I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).
I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.
Form code snippet:
<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>
The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...
The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.
Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.
After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.
Thank you very, very much.
April
You don't need ajax to submit this form. You don't even need javscript. Just do this:
<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>
This will send the form data to mytarget.php (can be changed of course)
See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit.
Now you can work the Data in mytarget.php like this:
<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>
You wanted to have a check for length in the submit. There are two ways to this:
Before the input is send (the server is not bothered)
Let the server Check the input
for 1 you will have to append a event listener, like this:
var form = document.getElementById("form");
form.addEventListener("submit", function(event){
console.log("test");
var name = form.elements['userinput'].value;
if(name.length < 3){
alert("boy your name is short!");
event.preventDefault();
}
});
Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/
Test it Serverside
In your mytarget.php:
<?
$username = $_POST['userinput'];
if(strlen($username) > 3)
echo "Your name is: ".$username;
else
echo "your name was too short!";
?>
You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.
The problem is in this line
<form id="form" name="input" method="post" action="javascript:proofLength();">
The action should be a PHP page (or any other type of server script) that will process the form.
Or the proofLength function must call submit() on the form
In the php page you can obtain variable values using $_GET["name"] or $_POST["name"]
To summarize; your code should look like this
<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>
and for your php page:
<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>
If you want to do something in your javascript before submitting the form, refer to this answer
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....
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?