I am trying something different to check if it is feasible. Otherwise best alternative way is to send data using querystring.
I have a html page which has list of students. when user clicks on perticular student for edit, this html page should take student ID and redirect to another html page, which will load respective student details for editing.
Here, I want to send data using "POST" method to hide studentID from URL (querystring), so I created a hindden form (method="POST" action="edit.html")on list html and put one hidden field under it. on lcik of edit button on list, I am setting value to hidden field & submitting form.
Now this redirects properly to edit html page and also when I see this flow in chrome developer tool, I can see this form value under headers sections - Form data. Now I am trying to fectch this form data on edit html page load e.g. in JQuery under document ready function or simple in javascript.
with alternative option if I create hindden form (method="GET" action="edit.html") then the hidden field value which I am setting is showing up in query string and also in chrome developer tool, it is showing under headers - query string parameters. This query string parameters can easily be accessed using location.search and then play around and will get expected value.
Here id I have taken just example, however in actual scenario, I need to send multiple values or may be objects which I dont want send thrugh query string. So I thought to submit form with POST method and retrive values on next HTML page load thrugh javascript on jquery.
HTML
<form style="display: none" action="jquerywebapidoestudenteditpoc.html" method="post" id="formEdit"> <input type="hidden" id="id" name="id" value="" /> </form>
JQuery
$(document).on("click", ".edit", function () { var id = $(this).data("id"); $("#id").val(id); event.preventDefault(); $("#formEdit").submit(); });
If anyone came accross this situation or implemented it in very appropriate way, would be very good.
In other words, I would like to implement is:
list.html will post data to server (.NET Web API)
At same time list.html will redirect to edit.html
On load of edit.html, response from server will be loaded on page.
Query string is part of the "identifier" of the subsequently loaded page (or any other resource). As such, it is accessible from the page. Data sent in the body of a POST request are different - they are meant for the server only and are inaccessible from the subsequently loaded page.
However, if you wish to make the data sent using POST available to the next page, you can always inject it into the page manually. Using PHP (as an example), it could look something like this:
<script type="text/javascript">
var postData = <?php json_encode($_POST); ?>;
</script>
If you just want to pass data from one page to another and leave the server out of it, you may either use GET (query string) for exposed communication or use cookies for "hidden" communication.
Bsically, what I understood after going through lot many blogs ans sites, I have to have a client controller (javascript based) which will take care of which view has to load and post data.
This I was able to achieve using AngularJS, where I can configuration can be done for routing and by same, I can post data & receive its whatever output on another view/ form (so called page).
e.g.
$routeProvider.when("/orders", {
controller: "ordersController",
templateUrl: "/app/views/orders.html"
});
AngularJS Rocks !!!
Related
I'm a beginner in Javascript and my professor has only taught us HTML5 and Javascript so far so I can't show up using PHP lol. So far I have a page with a form where a user can input data and I have an external javascript file that has two functions to verify passwords and auto-populate delivery information from billing information. In the form tag I have onsubmit="return verifyPswd()" and that works fine calling it from outside of the HTML file. But what I'm trying to do is now pull the form data either from the URL (I'm using method="GET") or some other way and display the data on my third HTML page which is the Results page. I have tried everything, even moving the javascript code into the first HTML page and absolutely nothing has worked so I signed up for SO.
Here's parts of my code I think is important for accurate help. Thanks so much in advance.
My form html page:
<body>
<h1>OrderUp!</h1>
<form name=orderup method="get" action="Results.html" onsubmit="return verifyPswd()">
...ALL THE FORM CODE...
<input id= "order" type="submit" value="Place Order"></center></input>
My results html page:
<body>
<h1>OrderUp!</h1>
<center><p id = "success">Your form has been successfully submitted!</p>
</center>
</body>
I guess the hardest part or most confusing part is where exactly do I call the function to display the entries?! In the results page or the form page? And can you have two onsubmits? I'm frustrated.
Without server code your data will not persist across your pages, so you need a global store, where they each have access. You can't simply grab a javascript file, and set variables, because when the next page loads them, it will not view those changes.
I highly recommend (for now), storing your values in the browser's session storage, or local storage. The data will persist as long as you're on the domain.
Here's how you do it in javascript:
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
Session storages will only keep values until your browser closes, localstorages will be kept if you close your browser and return.
For local storage, you can simply replace the above "sessionStorage" with "localStorage"
Please check the reference here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
You can save your items using localstorage and get them in other page :
localStorage.setItem("yourDataKey", "This can be anything, simple string, or a complex object");
and get it back in other page :
var myDataFromFirstPage = localStorage.getItem("yourDataKey");
if you need to remove it, you can do it as well :
localStorage.removeItem("yourDataKey");
You can pass any type of data, it can be a simple string or a complex object.
I have a website and when a user follows an internal link I would like to pass some extra information to a new page, so JavaScript on the destination page could do some useful highlighting.
There is an option to pass that information via the link parameters (GET), but it will generate lots of virtually duplicate pages and break pretty URLs concept. Another way is to make a webapp using AJAX, but it will also bound content to a single URL.
How can I transparently pass some information to the new page during navigation w/o messing with site's URL structure?
You could store the data in local storage or session storage, and retrieve it again on the destination page.
So you have a few options.
Form Submission
First option post a form with the data. Add a hidden form, on the anchor click capture the click event, set the hidden fields with the values you want to send to the next page, and submit the form. On the next page, read the post parameters in the backend and update the page.
Local Storage
On click of the anchor, set localStorage to the values you want to appear on the next page. When the next page loads, read the localStorage values and update the page. Note: The server will not have access to the values
Ajax with pushState
Use Ajax to submit the form. When the Ajax call returns, use window.history.pushState to update the url with whatever url you want to be displayed to the user.
One of the options not mentioned is to create a dirty URL:
/destination/param1/value1/...
then strip additional parameters at server-side and redirect:
/destination
keeping additional values stored at server-side (e.g. via sessions). I still prefer using sessionStorage in a real application, but it worth mentioning anyway.
What do you mean it will "bind content to a single url"? AJAX request is the first thing that comes to my mind as the solution to this problem. You dont have to use the url of the page to make the ajax request, you can build the url inside your javascript based on whatever conditions exist in your application.
Besides AJAX and passing parameters in the URL, the only other thing I can think of is to use Cookies. That of course runs into problems if the user has cookies disabled. I think an Ajax call to your server is the most robust way of handling the problem.
I'm trying to create an online store, and this is my first HTML endeavor (I've got the basics but that's all).
Basically, I need to know the code required to save a customers selection when they click a checkbox.
Then I need to be able to search for that data on a cart page and pull up the value.
Here is the code for one of my checkboxes:
<li><INPUT TYPE="Checkbox" Name= "printoptions" Value ="79.99">18” x 24” - $79.99*</li>
If they select this checkbox, what coding do I need to be able to get that value to show up on a separate page?
Unfortunately using HTML alone you cannot save information as HTML is just a markup language and can only display information.
In order to do something with the data you will need to use another language such as PHP, Ruby or Python.
In order for the data to be saved in any way, it needs to be either sent to a server where the information will be stored in a file or database (server side), or the data can be saved into a cookie (client side), or it can be kept displayed on the next page using either POST or GET.
In PHP you need to define an "action" and a "method" for the information to be saved in anyway. For example, if you wanted to POST the information being input to the next page, you would put:
<form action="process.php" method="post">
I recomend using tizag.com to learn PHP as it teaches you the basics and enough to create a web form.
Good luck.
So, I know that when I submit a form whose method is POST that the server receives the contents of that form and then processes them accordingly, and then returns a page with the desired content. What I am trying to learn is what exact query url is being passed to the server side script when I submit a form on a website that does not belong to me. The reason I want this query string is so that I can make use of the server side script programatically with my own data. There is no public API served by this website, but I would like to formulate my own.
So my question is, is there a way to intercept the POST as a query string URL? Perhaps by using a javascript console in browser?
I know I can look at the source code for the page and find the names/values of the form fields. However, there also happens to be a hidden field on this page whose properties are set by javascript during validation at submission time. How should I go about this?
You can use an extension for intercept the data : Tamper Data on FireFox
https://addons.mozilla.org/fr/firefox/addon/tamper-data/
You can intercept and modify all headers requests
I have an MVC app that is basically one page with a bunch of AJAX calls that parse returned JSON and then using jQuery will populate the page. So, for example, if I call /API/Users/List it will return some JSON and then I'll parse that and dynamically create an li element for each user. Then, I put an edit link next to each user name and hook it up to do the necessary editing (jQuery with another AJAX call).
What I'm curious about is how I would go about showing/hiding the edit link based upon role. I have a strongly typed view and can populate hidden fields with user info (<input type=hidden name=UserID value=jsmith /> <input type=hidden name=Role value=Admin />), and of course, can always validate the user in the Controller that the edit action posts to, but, I'd like to know if there is a way to ON THE CLIENT verify that the hidden field hasnt been tampered with so that someone doesn't save the file offline, change the hidden field for Role and then now they can see the edit links when they are not supposed to.
In this contrived example, not much harm comes from being able to see the edit links if they cannot do anything, but there are some calls where I pass the role to an API call and it returns data that is flagged as "private" in the database that shouldn't be seen without the correct privileges.
So, basically, the question becomes "is there any way to exchange data between the ASPX page and the JavaScript that then calls the API without it being just stored in a hidden field that could be tampered with?"
Thanks,
You should not pass the role as a parameter of an ajax call.
The action method itself should determine the role of the user.