Can I make an svg image button?
Question
Is there any way of making a POST request when an svg image is clicked?
My best attempt so far looks like:
<form action="/test-button" method="POST">
<input name="Submit" type="submit" value="Submit" />
<svg >
<rect width="100" height="100" >
</svg>
</form>
Which is a black rectangle with a submit button next to it.
I want to allow people to choose between several images, so this may be an ok solution, but is there any way of making an image which, when clicked, will fire off a POST?
Extra points for not using javascript.
6 answers
solution1
17 ACCPTED 2012-11-30 17:29:14
Warning: This is a little hacky, but as far as I know it's 100% legit, and doesn't need javascript.
Since the label element can also be used to control it's associated input, you could try something like this:
<form action="/test-button" method="POST">
<label>
<input type="submit" name="image" value="one">
<svg><rect width="100" height="100"></rect></svg>
</label>
<label>
<input type="submit" name="image" value="two">
<svg><rect width="100" height="100"></rect></svg>
</label>
</form>
Then hide the submit buttons with CSS. You can put anything in the label that you want.
When you click on whatever's in the label, it will trigger the submit button inside it and submit the form, with the button's value in the POST array.
There is also an <input type="image"> , but that's for an entirely different purpose (tracking coordinates of where it was clicked).
solution2
5 2016-07-11 16:19:26
This seems like a great use case for the <button> element.
<form action="/test-button" method="POST">
<button>
<svg>
<rect width="100" height="100" >
</svg>
</button>
</form>
Clicking the button element performs the exact same job as input[type="submit"] , so you can replace the input entirely. If you go this route, you may also consider putting a text label inside the button and/or a title inside the svg for accessibility purposes.
solution3
4 2012-11-30 17:17:57
It's quite impossible without JS, but you can use JS to do it. Attached an onclick() and just use: document.getElementById('formID').submit(); .
HTML:
<form action="/test-button" method="POST" id="submittingForm">
<input name="Submit" type="submit" value="Submit" />
<svg onclick="submitForm();">
<rect width="100" height="100" >
</svg>
</form>
and JS (goes within your <head></head> tags):
<script type="text/javascript">
function submitForm()
{
document.getElementById("submittingForm").submit();
}
</script>
solution4
4 2012-11-30 17:36:47
This, maybe:
<form action="/test-button" method="POST">
<input type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9zdmc+">
</form>
Jsfiddle: http://jsfiddle.net/Xawuv/
solution5
2 2013-07-12 21:40:20
This is a simple button with a lightning inside the box.
<svg x="167" y="8" cursor="pointer" width="30" height="30" visibility="visible" >
<g id="Flash">
<g fill="#FFCC00" stroke="#D57300" stroke-width="2" >
<path stroke-linecap="round" d="m 10.311873 9.0776039 9.400261 -7.988867 -0.05562 6.2501137 -2.224914 0.093987 -0.05562 5.5452134 11.402682 -0.04699 -18.522406 16.024725 0.05562 -6.015145 2.169291 -0.09398 -0.05562 -5.874165 -11.51392928 0.04699 z"/>
</g>
</g>
<rect width="30" height="30" opacity="0" fill="transparent" fill="url(#Flash)" id="Flash_Button" onclick="Flash(evt);" />
</svg>
and here is the script for the fucntion when you click
function Flash(){
// post whatever you want inside here
}
The problem when you create a button and inside it has lines and when you put to the parent element the onclick you don't click all the svg element but you click separately and all children inside. so you need to create a rect inside the svg with the width and the height of the parent element and hide it, and after put there the onclick!
solution6
0 2022-01-05 03:37:02
Some answers forgot to make the input hidden. This should work perfectly:
Just copy paste.
<label class="cursor: pointer;">
<input type="submit" name="mysubmit" value="val1" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-arrow-down-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0
.5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4
4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1
.5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-
4a.5.5 0 0 1 .708-.708L4 1
3.293V1.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.