I have the following HTML/Javascript code: http://jsfiddle.net/xxwa7/ and I am trying to submit the variable GPSlocation back to the server.
I am using Google App Engine with Python and Jinja2. I would like to submit it with a POST method but I am not sure how to do that with a javascript method. I would imagine this is somewhat simple but I can't find it online anywhere.
Thanks!
In the end wash, there are only three ways to pass data from a web browser to a server.
File upload: Doesn't count in this case. Can be ignored.
Submit a form: Pass data as form fields, process on remote site as a form. Data can be passed back to Javascript either as form fields or embedding var statements in the new document.
AJAX: Submit a small amount of data, wait for the server to give you a small amount of data back. Not difficult to do, but requires a slightly different way of thinking. JSON is frequently used as a standard of moving data around. There are various AJAX wrappers out there, most as easy to use as the over-advertised jQuery.
To post a form with Javascript is fairly easy. Create the form using your standard HTML markup. Use standard Javascript and DOM methods to update the form values.
Assuming only one form on your document:
document.forms[0].submit();
Edit: From the comments:
For the HTML:
<form action="#">
<div>
<input type="hidden" name="datatosendback" id="datatosendback">
</div>
</form>
For the Javascript:
document.getElementById("datatosendback").value = "OH! Mr KOTER! SEND ME!";
There are a number of other ways to access form fields and values. A google search for 'javascript modify forms` brings up pages.
Related
--edit--
(Trying to rephrase my question to be less confusing..)
My understanding is that you should validate forms both client and server side in case Javascript is not working.
How do advanced developers accomplish this in a seamless interface (if one had to describe in a general manner)?
Currently I have Javascript validating my input fields on the fly with 'onkeyup ()', highlighting invalid fields.
If I run the same validations with PHP after the user submits, then I have to redirect to the form if there were any errors, refreshing the page.
I thought this method was lacking sophistication.
What would be the best method?
Thanks in advance.
--- original question below ---
So I created a form with client side javascript to validate the input as the user types. It highlights the boxes w red borders if the data is invalid (using javascript to alter the css). I would like to re-validate the same data with php server side in case of any problems with javascript client side.
I am trying to figure out what is the proper (or best) way to accomplish this.
Currently the form action is setup to go to "register_post.php" after user hits submit.
--
So do I just validate the form data in PHP in "register_post.php", and redirect back to the form page if something is invalid, or is there a more sophisticated way to do this?
One annoying result of this is the page refreshing when the page is redirected.
Is there a more sophisticated way to do this?
--
Another related question is - should I prep my code for javascript not working at all? ..since currently, I use javascript to highlight the fields if the data is invalid. The user will have no indication of which fields are invalid without js.
please bear with me as I am a beginner.
You are trying to valid the post data with PHP and without refresh the page, I don't know if I get your point right. If you want to valid the data with PHP and without refreshing page, you could use AJAX. You can use javascript to post data to a PHP script and deal PHP return data.
An example of jquery ajax method :
<script>
var validDataArr = ''; //data need to be valided
$.ajax({
type:"post",url:"http://"+top.location.hostname+"/valid.php",
data:validDataArr,
success:function(context){alert(context);}
});
</script>
While submitting the form , call a javascript function to validate the fields and throw an error if it not suits.
you can call a js function as below
input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
Try this , this will help you to understand the basic validation
http://jsfiddle.net/NWWL4/15/
I have a bit of a tricky work problem I hope to get some help with.
To handle various forms and storing entries, we use an in-house tool which I cannot modify. Basically what happens is:
I enter he URL the original page, and the URL of the destination page after successful submission.
The tool spits out some HTML and Javascript code, the most important of which is a unique URL, let's call it (redactedURL), that goes after the action attribute.
When the form is submitted, the page will refresh to one of two possible destination URLs: the one I inputted if success, or (redactedURL) if error.
I can download all the entries from the tool afterward.
The HTML is quite simple. checkform() is a simple validation script.
<form action="(redactedURL)" name="enenForm" method="POST" onSubmit="return checkForm()">
The issue with this is that I can't style the (redactedURL) error page, which is quite ugly. I am wondering if there is anyway I could
Suspend automatic display results of form submission
Determine the destination URL, and based on that, write out a custom thank you/error message (since I cannot access the server-side script, this seems to be the only solution to determine if the submission is successful or not).
Make sure that tool still properly stores all the entries.
Any help would be much appreciated. Thanks!
Don't use a form. Instead use AJAX. I think this SO Question will provide a start. Basically you use JavaScript to submit data to a server using XMLHttpRequest. The returned HTML is a string which you could either modify or (better yet) normalize and add to the DOM.
For an advanced example jQuery-Mobile does this concept when you click a link instead it gets the HTML from the server as an AJAX request copies the HTML inside the <body> and inserts it into the DOM.
Search for tutorials about AJAX and jQuery (or your prefered JS library). Like this one.
I would like to know instead of using PHP Sessions to save the field data, is there any concept in Ajax or jQuery, to navigate between lot of form pages, but to save the form data until the user submits, if user submits, all the information present on different pages should also get submitted.
you can try the form wizard its a jquery plugin : http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
There are multiple concepts of that type.
You can use JavaScript with the jQuery library to paginate a huge form using functions for HTML elements manipulation. That way, you don't require the user to create another HTTP request, and thus the information entered on other pages doesn't get lost when the user switches pages. The form can then be submitted using AJAX or a normal, "front-end" HTTP request method.
Also, you could try saving the entered information in a cookie with JavaScript and jQuery.
Here are some examples of jQuery pagination:
http://dl.dropbox.com/u/4151695/html/pajinate/examples/example1.html.
You can easily apply these concepts with anything, including HTML forms.
And here are various plugins with source:
http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/.
A cookie is nothing more than a plain text file that is stored on a visitor's computer, which means you can easily encode and embed your form data into it.
I'm using variable passing through a URL (ie ".derp.html?name=derp?lname=herp") to a popup (which uses these parameters to prefill information on the page). Although these pages are internal, I want to create more security. I do not want someone to type in their own link and submit a form with fake values.
I was thinking of having a function run once the link is opened instead, which opens the popup, and sends the parameters through variables to the new window, instead of through the URL. However, I would still need to send values to the java script function...
Anything else I can do to be more secure?
EDIT: Let me rephrase then... This is not public, this is internal. I'm not expecting users to try and hack into the system to create fake forms.
I can't do server-side validation because I'm working with very old methods like tabular data control in IE. There is no real data base to verify anything.
You can POST the values, instead of appending them to the URL. This is what HTML forms are for. For example:
<form action="derp.html" method="POST" target="myNewWindow">
<input type="hidden" value="derp" name="name"/>
<input type="hidden" value="derp" name="lname"/>
Click to open in a new window
</form>
You have two options
1) Instead of using GET method (sending parameter in URL), use POST method and the parameters will not be in HTML URL anymore and you can do it by Javascript. However, a person who want to send fake values to you server, still is able to do so, but it's just a bit harder.
2) Create a hash function(Javascript code) which encode all the parameters before submit the URL and decode it upon received on server side. http://en.wikipedia.org/wiki/Hash_function
Either way, will not provide you 100% security, and still you should perform parameter validation on-server side.
you can change it to a post request...but that's about all you can do if the logic is front-side...other than obfuscating the variable names.
I am working on a basic HTML page that requires the user to send details to a script located on a third-party website. What I require is for the user to fill out a form on my web page, and have that information submitted to another third-party form.
I do not wish to return anything to the user, other than whether the submission was successful or not. I also do not want the user to have to go to this third-party site to submit using their form.
It was suggested by the website itself to use an iframe and hold its form on your page, but I was wondering what other, preferably better methods are available to me. It'd be nice if there were some form of jQuery/js code I could use to do such a thing.
It'd be nice if there were some form
of jQuery/js code I could use to do
such a thing.
One way is to use jQuery's $.ajax or $.post methods like this:
$.ajax({
url: url,
success: function(data) {
alert('succeeded');
}
});
Maybe you could try cURL with CURLOPT_POST and CURLOPT_POSTFIELDS?
well it depends if you have control over the other website as well. as in you are able to access the code.
If you are you can use JSONP to pass the values and get a response, but to do it you will have to assign a callback that is sent and then formatted at the front of a JSON object for it to work (they do this for security).
The other option is to use a php ob_start() function. (Note: this will only work if the form you are trying to submit these values to allow $_GET to be used to proccess the form)
ob_start();
include('http://wwww.anotherwebsite.com?key1=value1&key2=value2&key3=value3');
$returnString = ob_get_contents();
ob_end_clean();
So then from here $returnString is the result, which you can basically search (strpos() to see if true is how I would do it) in php to find key words to see if it was successful or not or what ever you need to check for.
But again, this only works if the form on the remote server uses $_GET and not $_POST (or allows both through globals).
I know this is a php solution, but a warning is that for security purposes, there are serious restrictions on what javascript can do cross server.. the best javascript way to do cross server is JSONP, which jQuery does support so you might want to look into that.. but as I mentioned, for it to work you need to have a callback be able to be sent back with the response, and the response needs to be in a jsonp object format.. (basically you either need to 1. have the other server have a jsonp api for you to use or you have control over the other server's server side files to make the changes needed).
Do you want like that? It's simple form submitting to another website. But, I can't check whether it's successfully submitted or not.
<form action="http://www.another.com">
<input name="myInput" type="text">
<input type="submit" value="Submit">
</form>