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.
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 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 !!!
I want to create an HTML form on the Server. When the client completes the form and clicks submit, I want to be able to save HTML form and data in a single HTML file on the server.
The best suggestion I have seen is using JavaScript. Use a client side script that on click will save the document.InnerHTML to a var that can then be submitted back to the server.
Is this the best approach, or is there an easier way?
Even though I have no idea why you want to save the whole html code because I'm sure there will be parts that are the same for every user and you will be wasting memory, but ok.
So there are two ways to do this:
1. is javascript as you said
2. would be to put all the generated html code into a hidden form input (already on server side)
the first one seems more comprehensive and this is what I would do but the second one would also work for users with js disabled.
I wouldn't really recommend this way, because I'm still a huge fan of saving data in a database, but here's a general outline of what to do:
User fills out the form and submits.
Server-side code executes a method:
a. String holding the template for your HTML page with placeholders for the fields.
b. Use String.Format to put all the user input into the correct places.
c. Create a file, write the string to the file, and save.
d. Return file name to user.
HTML files are not that large, but still you risk using up your hard drive space. Also, you need write permissions which introduces security risks.
Going the database route:
1. User fills out the form and submits.
2. Server-side code saves the data to a database, and returns a link (with querystring string of ID and possibly a user id to help with security) to the user.
3. Whenever the user goes to the link, the server-side code repopulates the form with the ID passed.
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.
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.