This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 7 years ago.
Is it possible to add an internal link (bookmark/jumpto) on a <button>
<button class="btn span3" id="save_progress" name="save_progress" value="1">Save Changes</button>
You can link to any element you like. Just give the element an id and set the URL to #that_id.
If you want to link from something, use a real link. It is what links are designed for. They do it really easily (and natively, and in a screen reader and search engine friendly fashion). If you want to link from something that looks like a button, then use a link and apply CSS to make it look like a button.
If you really, really want to use a button (hint: don't). Then you can bind JavaScript to it:
document.querySelector('#my_button').addEventListener('click', function (event) {
location = "#my_id";
});
Yes it is possible. Internal links don't have to point to an anchor tag.
you could use JavaScript to do something like that onclick="document.location+='#goToAnchor';return false;"
Doesn't seem like the best practice though.
Related
I have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
This question already has answers here:
How can I open multiple links using a single anchor tag
(2 answers)
Closed 7 years ago.
I want to know that Can I set more than one links on single word in html?
I've experimented like:
<a href="link2 target="_blank>Open</a>
Open
This is only example idea what I want to do ; of-course either of above is not working.
So, How can I set more than one links to different target on single word?
Is it possible with html or <a> or something else.
No, you can't.
If you are open for javascript you could create a function that takes urls and have the function call window.open but that is likely to get blocked by pop-up blockers.
/* this function tries to open the
arguments supplied to it*/
function opensesame() {
for(var i=0; i < arguments.length; i++) {
$('#log').append($('<div></div>').text('trying to open '+ arguments[i]));
window.open(arguments[i]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- you can have a local link in href -->
<a href="#"
onclick="opensesame('http://www.google.com','http://stackoverflow.com');">
open sesame
</a>
<div id="log">
</div>
From the FAQ on the window.open documentation:
How can I tell when my window was blocked by a popup blocker?
With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of window.open(): it will be null if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.
I leave it as an exercise for the reader to extend this to take target settings as well.
No, you can't.
It's possible to have two different links in different parts of the same word, but not on the same.
uniform
You need Javascript for such thing.
I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.
More precisely, I have a webpage with 7 buttons on it coded like this:
<form action="contribution.html">
<input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>
All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.
Can anyone help, please?
When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.
Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).
Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:
// A reference to your "header" element
var header = $('.header');
// When the submit button is clicked
$('[type=submit]').click(function(){
// Update the header with the button's text
header.text( $(this).value() );
});
Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.
Use a server-side language and <a> tags instead of a form.
In PHP it will look something like this:
10$
20$
30$
etc.
Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.
Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload
This question already has answers here:
Closed 14 years ago.
I am html page with 5 checkboxes
My requirement is to have one morecheckboxes "Select All" which is used to select all 5 checkboxes.
Thanks in advance
Closed as exact duplicate of this question.
If you're looking for javascript that will check your 5 checkboxes when the 6th is clicked, something like this should work:
function CheckAll(value){
document.getElementByID("CheckBox1").checked = value;
document.getElementByID("CheckBox2").checked = value;
document.getElementByID("CheckBox3").checked = value;
document.getElementByID("CheckBox4").checked = value;
document.getElementByID("CheckBox5").checked = value;
}
<input type="checkbox" id="CheckBox6" onclick="CheckAll(this.checked)"><label>Check All</label>
In "pure" HTML, you can't, though you can modify your server-side code to correctly interpret that checkbox as meaning "act as though all the others were checked".
It's fairly easy using Javascript. Create a method that is fired when the "select all" checkbox is checked, and then find the other checkboxes by ID and mark them as checked. It's unclear what you should do if the "select all" checkbox is unchecked though, so perhaps it should just be a link.
You can't do this in just HTML, but should be fairly simple with javascript.
Personally I would use jQuery like this: http://abeautifulsite.net/notebook/50
This is a job for jQuery. Spend some time today and learn about it if you can. It's awesome for just this sort of task.