Is it possible to hide the attributes of a HTML tag?
Suppose I have this code:
<div class="test"></div>
When someone use inspect elements on my website, they can only see this:
<div></div>
The reason why I want to do that is this:
I'm building a Web Application for my assigment at college, using Java as back-end language (I'm using Spring MVC Framework). I try to send a request and receive response without reload the entire page, and I found an example of using AJAX like this:
<button class="btn btn-success btn-lg" onclick="$.post('/waiter/order/2/menu?product=Crown%20Royale')">Crown Royale</button>
As you can see, the information of the request call is shown in HTML, and I want to hide it to keep the privacy of my Website.
No. Everything you send to the client, they will be able to see (and even change).
That's why serverside validation of forms is so important for example. Users can just turn off the required attribute and submit the form. If you don't have validation in place, your code will error.
You can't. The browser needs those tags and classes to show your webpage, and if your browser has them it won't make them private towards the end-user.
Related
For a school project I am using a GET like a link, no parameters being sent, just to go to another page on my website, because the visual requirements we were given have it looking like a button and I didn't feel like styling an <a> tag like a button.
I'm aware that certain things with GET differ from using a link like that a GET cannot be opened in a new tab/window. I couldn't find anything though explaining when to use GET vs linking or if one is preferable to the other.
But since I'm not passing parameters, I'm wondering what really is the difference between using GET and <a> and if there is any reason why I should be using one over the other in this case?
Actually, when you use an "a" tag, if clicked, the browser sends a GET request behind the scenes.
You can use "a" tags, forms, or javascript to make a button / div link to another page (again, a GET request will be sent anyway) like this
<a href="http://example.com">
<div class="btn btn-lg"> link </div>
</a>
Or:
<form action="http://example.com">
<input type="submit" value="link">
</form>
"a" links are preferable to other methods since they are more descriptive regarding what is the element about, since they work in browsers that have JS disabled, and they are better for SEO purposes due to the fact that they are the "standard" way of linking pages.
I am new in using ckeditor. I have installed ckeditor. In the editor, showed in my HTML page, i can write article there. But i don't know how to save it and show the article in my HTML page. here is my html code:
<form method="post">
<p>Editor:
<textarea class='ckeditor' id="ckeditor" name="ckeditor" row="10" cols="80">
</textarea>
<script type="/text/javascript">
CKEDITOR.replace('ckeditor');
</script>
</p>
<p>
<input type="submit">
</p>
</form>
You need to have a back-end of some sort. CKEditor works in the browser, so what you need to do is take that data, post it to your server and save it there. Your next step is to find out how what server side languages can you use - such as PHP. You need to learn how to build a system on your server that receives the data. There are various ways of doing this and they depend a lot on what kind of server you have.
Learn how to build a system with your server side language that receives POST and GET requests and saves them into a Database or a File. I recommend a Database, but that takes a little more learning I'm afraid.
You can get the data from CKEditor using JavaScript. Inside your form you need to add a small bit of JavaScript to update your textarea with the value of the editor. This is because CKEditor works by replacing the textarea with an iframe element - and thus the changes made in the iframe are not automatically applied to the textarea. You will need to learn how to attach a click event handler to your submit button and before submitting you need to run the following code that I copied from this other StackOverflow question.
for(var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].updateElement();
}
Good luck, have fun!
I'm trying to create a HTML form, and in the end I'm adding a submit button:
<submit submitLabel="Save"/>
Is there an attribute that can be configured so that when pressing the button not only saves the data in the form, but it redirects to another HTML form? Perhaps to create a workflow between HTML forms?
clicking a submit button inside a form issuing a POST/GET request to the page you defined in the <form action="_____"
you can put your second form in the other page (the page you defined in the action attribute)
or even better - you can use AJAX, and avoid reloading the page
There are some ways to do it, but it depends also with what language you work. HTML alone doesn't cut it. You need a server side language as well, such as ASP or PHP
When I use php, i simply create a form and make sure the action is marked to the next page. There i can put the next form in, but I can process also the information I just picked up.
See example below
<form method="post" action="the place of the next form plus where processing happens.php">
put here your fields
<button name="btn_moveon" type="submit" >Go further to next page</button>
</form>
Hope this helps.
You can do this through code or the ACTION attribute of the form tag.
No, there isn't such an element. You must do this on server side, with whatever programming language the server runs (eg. PHP, ASP, etc.).
I have a web page that is the parent to a bunch of pages that are loaded with in using the following code.
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load("http://url.com/"+sourceURL+"");
}
To call this I would have a href like
href="javascript:loadContent('#content','page.php')"
How can you validate this using a service like the W3C markup validation service? Or for that matter grab the conent of a page in your browser. When I view source all I get is the parent regardless of what information is on the screen.
Thx
This firefox plugin uses the same algorithms to validate and has a "Validate now (HTML body after JS execution)" option:
http://users.skynet.be/mgueury/mozilla/
You can use W3C's Markup Validator Web Service API.
It seems like you can do this in Chrome Developer Tools in the Elements tab by right-clicking on the <html> tag and selecting Edit as HTML, which gives you copy-pasteable text of the current page state.
Keep in mind this doesn't include the DOCTYPE declaration, so that might need to be copied separately.
Short Version:
Do you know of any way to get an input button (submit) and an anchor tag to render the same visually using CSS and no Javascript?
Long Version:
I'm developing an ASP.NET MVC application. The site contains pages to view the details of or to create or update my models. The page actions are contained at the bottom of the form and typically include Update and Cancel or Edit, Delete and List (if on a details view page). The Update, Edit, and Delete actions post data from a form to the server, while the Cancel and List actions are/can be handled by appropriate GET requests. It's important to note that one of my design goals is to make the site work as identically as possible if Javascript is disabled to the way it does when Javascript is enabled. I also want the UI elements to render the same visually whether the element causes a postback or fires off a GET request.
In order to get the form submissions to work in the absence of Javascript, I think I must use submit buttons. I'm overriding, with CSS, the visually styling of the buttons to render much like the "buttons" on the top of the SO page -- flat, solid-color with plain text. I'd like the actions that generate GET requests to be handled with anchor tags, but I had problems getting these tags and the styled buttons to render identically. There seem to be issues with alignment and font-sizing. I was able to get them close but not identical.
EDIT: Styling differences using buttons and anchors included not being able to get the fonts to render in the same position relative to the baseline within the bounding box and getting the bounding box itself to render at the same size and alignment relative to the container. Things were just a few pixels off one way or the other regardless of my tweaks. If you've been able to get it to work, please let me know. Knowing that it's possible would make it easier to keep trying things until I could get it to work.
One thing I tried was wrapping the GET-actions around a button, styled like the form buttons. This worked great in Firefox, but not in IE7. Clicking on such a button in IE7 didn't propogate the click back to the anchor. What I've come up with now is to create a new form for the GET, using method="GET", associated with the required action. I wrap that around a submit button that has an onclick handler that sets location.href to the URL of the desired action. This renders visually the same and seems to work, even if the form is nested in another form. A minor niggle is that if Javascript is disabled, then my GET url contains a ? at the end instead of being the nice clean url that you would desire.
What I'd like to know is whether anyone else has solved this in a different way that would work better (and maybe require less HTML)? Do you have any other ideas that I could try? Any way to fix the ? on the GET url when the request is submitted as a post when Javascript is turned off?
Sample code below from a details view. I realize that I could (and arguably should) add the onclick handlers via javascript as well, but the code actuall reads better when I do it inline. I'm using HtmlHelper extensions to generate all of the mark up below. I have reformatted it to improve readability.
<form action="../Edit/2" class="inline-form" method="get">
<input class="button"
onclick="location.href='../Edit/2';return false;"
value="Edit"
type="submit" />
</form>
<form action="../Delete/2" class="inline-form" method="post">
<input class="button"
value="Delete"
type="submit" />
</form>
<form action="../List" class="inline-form" method="get">
<input class="button"
onclick="location.href='../List';return false;"
value="List Donors"
type="submit" />
</form>