CODEWITHSUNDEEP
htmlpostbuttonsvg
John Lawrence Aspden
John Lawrence Aspden

Reputation: 17470

Can I make an svg image button?

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.

Upvotes: 24

Views: 54902

Answers (7)

Sujith S
Sujith S

Reputation: 101

Simply add onClick to svg

<svg onClick={addAddress}>
.....
</svg>

Upvotes: 0

ThePrince
ThePrince

Reputation: 890

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>

Upvotes: 0

Brad Marshall
Brad Marshall

Reputation: 550

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.

Upvotes: 19

Chris Bour
Chris Bour

Reputation: 25

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!

Upvotes: 2

Felix Guo
Felix Guo

Reputation: 2708

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>

Upvotes: 4

Alohci
Alohci

Reputation: 83006

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/

Upvotes: 4

No Results Found
No Results Found

Reputation: 102814

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).

Upvotes: 27

Related Questions