Form submission for GET strips query params - javascript

I have a jsp page which takes a parameter from my Java code and calls the URL onLoad as below.
When I do this the form strips the resultant Url's parameters. As in everything after ? is stripped. So the below result url http://hostname/abc?data=123 appears as http://hostname/abc which is not expected.
What am I missing or is it completely wrong to use form for GET requests. Is there a better way to do this using javascript like window.location=result;
My jsp page is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body onload="javascript:document.Form.submit()">
<%
String result = (String)request.getAttribute("result");
%>
<form action= <%= result %> method="get" name="Form">
</form>
</body>
</html>

Normaly when a form is submitted the url is constructed by the form and all form controls are passed as query parameters (that happens only when the form has the submit method of GET).
You trying to construct the url with query parameters that the form is supposed to construct is wrong. Hence you get the error.
Share with us what you try to achieve so we can understand a bit better how to help you.
<body onload="javascript:document.Form.submit()">
What I understand from that is that you try when the page is first loaded to call another url. That could happen on servlet level so there you can do with java whatever you want.
Using pure javascript as described here
get request from js you could achieve what you try to do with the form action.
However keep in mind that this would not be considered best practice when you deal with JSP
Right. I am trying to redirect to another URL with the right
parameter. I have now updated form to have a hidden input parameter
named as data as below: My final intended URL is
http://hostname/abc?data=a1%2Bz%3D%3D However the value in the form
keeps appending the numeric 25 after each % so the value in data is
a1%252Bz%253D%253D. Is some wierd URL encoding taking place here.
Right the browser will try to encode each url before trying to access it. Check here browser encoding .As you can see % will be encoded to %25. On the other end when some system parses that url it will first decode it so the %25 will again become 25. That's pretty normal

Related

javascript redirect to a page which with form action post, then get back to previous page with input value?

I am trying to select option and redirect page with form action post method to get some information and get back to previous page with those input value after submit by javascript. Could anyone tell me how to do that?
this is my code in js:
var elements = document.getElementsByName("shipping_id")[0];
elements.onchange = function(){
if(this.selectedIndex == 1){
var newWin = open('/test/static/src/html/test.htm','test','height=589,width=1004');
};
};
code in html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<form method="post" action="http://test.ashx">
<input type="submit" value="submit" />
</form>
</body>
</html>
Thanks and looking forward to hear answers!!
You can use localStorage or sessionStorage to save information and then pass it to another page.
Below is the link for localStorage and sessionStorage examples:
http://www.w3schools.com/html/html5_webstorage.asp
Check this answer for reference:
Send value from one page to another
This is what AJAX was invented for. Not to worry, it's actually pretty simple.
The point of AJAX is that (from the first page) you send data to another file, that file does something with the data (e.g. a MySQL lookup, and create a formatted table with the data in it) and returns the result, which your code then displays back on the (first) page.
The best thing about AJAX is that it does all this behind the scenes, and the page does not change or refresh or flash. It looks professional...
Take a look at these examples to see how easy AJAX is.
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
Using AJAX to make a Login system

Can I redirect to a new php file while posting a form input?

I have a html web page which I use to get some user input. This input is then posted using jquery to a php script which in turn sends a get request to a REST API to receive json data.
My question really is: is it possible to change my php file into another webpage with embedded php and redirect to this while posting the variables to the same script, so I could display the json results in a table on a new page simultaneously.
I already receive the json in the javascript file and I know I could use this to create a table, I was just interested if I could in fact do it all in one go on the php page as I already have script written to populate a table using the json data.
I have included some basic fragments of my code to help explain what I am doing.
HTML:
<head>
<script type="text/javascript" src="collect_User_Input.js"></script>
</head>
<p> What is the unique id of the beacon? </p>
<form> <input type="text" id="uniqueId" /> </form>
<button onclick="collect_User_Input();" >Send Request</button>
JS:
var uniqueId = document.getElementById('uniqueId');
$.post("send_Request.php", { uniqueId: uniqueId.value },function(result) {
alert(result);
PHP:
$uniqueId = $_POST["uniqueId"];
(GET request using curl)
echo ($uniqueId);
I tried skipping the javascript step and submitting the form directly, but this always gave me forbidden error messages. as you may have guessed I am very new to this so any advice is welcome.
In your PHP you will most likely want to return some JSON using json_encode:
http://php.net/manual/en/function.json-encode.php
Within your JSON, you could return a success value - then depending on the value of that you can redirect using:
window.location
You could even have a second attribute that returns what page you want the user redirected to if it isn't the same as the uniqueID:
{"success":true,"location":"/your/path/here.html"}
The flip side being, if there is an error you can return this to your page with a relevant message:
{"success":false,"message":"ID not found"}
I use this process to check something is valid on the server before doing the redirect, which sounds more or less the same as what you want to do?

Yahoo Merchant Store Catalog Tags Insert Dynamically with Javascript, Jquery, or Ajax

I opened up a yahoo store through their Merchant Service. They have a pretty good store catalog that I have used on a business site that I own. I like it so I decided to use the service again on another business I own. I got the site built but have ran into a few issues with calling the Yahoo Catalog Tags. The tags are basically comments. EX: (<!--#ystore_order id=item_id -->). When the site is loaded it is parsed and the page loads the product details in place of this tag/comment.
I can get everything to work except for the action attribute of my form.
I have tried a bunch of things but I cannot seem to get the action set for my form. If I hard code the tag then it works fine but obviously if I did that then I would have to create a page for every single product.
My form:
<div id="list">
<form method="post">
<input id="btnSubmit" type="submit" value="Add To Cart">
</form>
</div>
Trying to add the comment/tag to form action attribute. I've done it this way(below) and also by getting rid of the variable and just paring the url in the jquery attr function.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
//Set form action attribute
$('form').attr('action', '<!--#ystore_order id='+ obj +' -->');
});
</script>
I've also tried creating the form dynamically.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
var new_form = '<form method="post" action="<!--#ystore_order id='+obj + ' -->">' +
'<input type="submit" value="Add To Cart" id="btnSubmit">' +
'</form>';
$('#list').append(new_form);
});
</script>
I have tried to escape some characters but have had no success there either.
"\<\!--#ystore_order id='+obj + ' --\>"
I know the issue has something to do with the comment syntax but if I can add it manually then I should be able to do it dynamically. I know this is a hard one to test but if anyone thinks they may have a solution I would be happy to set up an ftp account on my site so you can test and I will provide the product ID's for testing. I've fought with this for about 30+ hours.
Yahoo store tags are populated server-side. Adding a store tag on the client side using Javascript won't do anything, because the code that recognizes the store tag and appends the appropriate html will never see the tag you drop in on the client side. There's no client-side solution possible
The best solution here would be to write a server side program to populate a template with the appropriate tag in response to http requests. I'm not super-familiar with the Yahoo store, so I don't know what the best language for this would be, but it would be a very simple program given how straightforward it sounds like your template is. Since this is already embedded in a site you own, I'd just use whatever backend language you are already working in.
Once you have a server side script that executes and returns the html you need, you could use AJAX to populated it with the appropriate product details as needed.

Using PHP to get the value of input type range onchange

I am trying to get the value of a range slider after it moves and then update my page. I have approached this by using "onchange" and calling some javascript to set a value to a text box and using php to get that value. The php does not even grab the value from the text area on load and I am not sure why. It says the id of the input text box is an "unidentified index." There might be a simple thing wrong or I may be approaching it completely wrong. I am new to this...
Here is the code for the slider.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('slider1', 'rangeValue1')};
</script>
</head>
<body>
<form action='slider.php' method='get'>
<input id="slider1" type="range" min="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')">
<input id="rangeValue1" type="text" size="2">
</form>
<?php
echo $_GET['#rangeValue1'];
?>
</body>
</html>
The js function does set input text box, but the php script doesn't happen. I need to get the value in PHP because the page I'm including it in is written in PHP. I don't know if, or how, the page has to be reloaded. I tried using location.reload() in the onchange function and it just continuously loaded the page.. Please help! Any input will be helpful! Thanks!
It looks like you might be getting Javascript and PHP mixed up.
PHP is run solely on your server when a browser accesses a php file. The output of the php file (like when you use echo) is sent as a webpage. However, Javascript is run solely in the browser. To make them communicate, you will need to load another webpage (or reload the current webpage). You can either use a form or directly craft the URL (probably easier in this case).
So you could do something like this inside printValue():
location.querystring="?value=" + x.value;
This will create a GET argument, which you can access with $_GET['value'], and reload the page.
EDIT: Performance Warning!
Every time the slider is moved, your server will end up resending the webpage, which could slow down the server. You might want to only send the new value after the user has clicked a button or something, in which case it would be easier to use a form.

Huge data string passing in url

I have created a html page which has a div displaying image.I have to pass the base 64 image string into this html page in the url so that I can set the image div source on loading.
The html page can be called from any application may be java/javascript or any.But along with the url the image string has to be passed to the page. Here is the sample html application which calls my html page-
<!DOCTYPE html>
<html>
<body>
<script>
imagestring ="R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";
</script>
<button type="button" onclick="window.open('URL?image='+imagestring)">open the html page </button>
</body>
</html>
Here URL points to the html page deployed on a server.This works fine only if the imagestring value is small.
But if the size is huge because of the limitation on several browsers it won't work.What alternate way I can approach?
My requirement is huge datastring passing in url.
You need to POST the image data.
<!DOCTYPE html>
<html>
<body>
<form action="URL" method="POST">
<input type="hidden" name="image" value="R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"/>
<button type="submit">open the html page</button>
</form>
</body>
</html>
Standard URLs which use GET method by default have a limit of about 8KB in length.
If you want to send large data to the server, you must use POST method. In this case, URL remains short, and actual data will be sent to server as parameters in your submit form.
You can also POST data using ajax, like this.
You are using GET method to passing your data. you can't pass huge data by GET method. check this out: HTTP URI GET limit
Use POST method.

Categories

Resources