I have made a form which has an input box and a browse button alongside.
When I click the browse button, I want to select an image such that the image name or the image address that i have selected must appear in the input box.
I have made use of the accept tag in HTML. Here is the code that i have used:
<span class="btn btn-primary btn-file">
Browse <input type="file" accept="image/*">
</span>
When I browse for the image, and select a particular image and click open, nothing happens really.
Can you help me? Thank you in advance!
So this is the simple code for the button to open a certain link
<button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>
but it opens it on the same page, I want the link to open on a new tab though.
You can use the following.
window.open(
'https://google.com',
'_blank' // <- This is what makes it open in a new window.
);
in HTML
<button class="btn btn-success" onclick=" window.open('http://google.com','_blank')"> Google</button>
plunkr
With Bootstrap you can use an anchor like a button.
<a class="btn btn-success" href="https://www.google.com" target="_blank">Google</a>
And use target="_blank" to open the link in a new tab.
You can also add this to your form:
<form action="https://www.google.com" target="_blank">
Try using below code:
<button title="button title" class="action primary tocart" onclick=" window.open('http://www.google.com', '_blank'); return false;">Google</button>
Here, the window.open with _blank as second argument of window.open function will open the link in new tab.
And by the use of return false we can remove/cancel the default behavior of the button like submit.
For more detail and live example, click here
To open a new tab with a button you just have to choose any of these options:
Open link in a new tab hmtl:
The Website Linked
Button open link in new tab:
<button class="btn btn-success" onclick=" window.open('http://google.com','_blank')"> Google</button>
Open new tab when clicking link html:
<!-- add target="_blank" to open new tab when link is clicked [in HTML]-->
YourText
Use '_blank'. It will not only open the link in a new tab but the state of the original webpage will also remain unaffected.
Try this code.
<input type="button" value="Open Window"
onclick="window.open('http://www.google.com')">
This worked for me.
onClick={() => {window.open('https://www.google.com/');}}
Try this
window.open(urlValue, "_system", "location=yes");
If you're in pug:
html
head
title Pug
body
a(href="http://www.example.com" target="_blank") Example
button(onclick="window.open('http://www.example.com')") Example
And if you're puggin' Semantic UI:
html
head
title Pug
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/semantic-ui#2.3.3/dist/semantic.min.css')
body
.ui.center.aligned.container
a(href="http://www.example.com" target="_blank") Example
.ui.center.aligned.container
.ui.large.grey.button(onclick="window.open('http://www.example.com')") Example
In end of the form button can be added like this using target="_blank"
View
I am working in Bootstrap with Spring Tool Suite. I have a html page I made (reprint-emblems-reports.html) and I want this page to show after a button click of a Go button. I am working through a localhost. The site is not live. I am new to html.
Here is the code for the Go button.
<button type="button" class="btn btn-aramark-primary">Go</button>
The Go button is within reprint-emblems.html.
reprint-emblems-reports.html is within the same folder (reprint-emblems)
I want the click of the Go button to bring up a new tab and shows the reprint-emblems-reports.html page.
Thank you
You can add the "onclick" attribute on your button:
<button type="button" class="btn btn-aramark-primary" onclick="window.open('/your-path')">Go</button>
window.open() can open a new tab or new window (depends of your browser configuration)
You can use javascript
<button onclick="window.location.href='/your path here'" type="button" class="btn btn-aramark-primary">Go</button>
I have single file upload feature on my site.
To improve CSS I have added two buttons on my html. one with input type as file and another as button. Input type file is hidden by setting opacity 0 and input type button on top. When I clicked on button I have setup onclick event which triggers the click event of browse button which popup image uploader.
When I selects image and submit the form I don't get any details of file in my $_POST.
Why I am doing this, because input type file comes with one text box and a button to its right corner. To open a popup user can single click on button or double click on text box. I want to avoid double clicking.
Any better solution will be appreciated.
Thanks!!
We can click even if an input got opacity 0 !
In your html:
<input type="file" style="visibility:hidden;" id="uploadme" />
<input type="button" id="clickme" value="Upload Stuff!" />
js:
$(function(){
$('#clickme').click(function(){
$('#uploadme').click();
});
});
Now you can stylize your button how you will!
I have a form within an iframe on my web page. When the submit button is clicked, the result is viewed in the window that contained my web page.
How do I open the result in new window instead?
Can you adjust the form html itself? <form target="_blank">
Try providing an onclick function like this:
<input type='submit' onclick="this.form.target='_blank'; return true;">