CODEWITHSUNDEEP
htmlbuttoninputiconssubmit
Thunder Coder
Thunder Coder

Reputation: 102

How to make a button of type submit to submit to a different URL? (not to the page it's on)

I have a form on a page in my web app that I want to submit to a different URL, I am using:

<button type="submit"></button>

instead of:

<input type="submit">

because I want to embed an icon in the buttons text.

when the button is clicked instead of submitting data to the forms onsubmit attribute, it sends it to the current page.

How can I make the button submit to a different path or rather add an icon to the input submit button? (preferably without JavaScript and jQuery because I want the submit method to be POST and not GET)

Upvotes: 0

Views: 134

Answers (2)

A.J. Nock
A.J. Nock

Reputation: 132

Here are a few ways you can create a link to another page.

First, I have an a tag acting as a button, a simple a tag, and a form set up to direct you to another page. Any of these three methods should work for you.

I am using target="_blank" here for the link opens in another tab.

If you want to add icons for styling, I have used Font Awesome a lot.

I recommend checking out the different stylings.

<a href='https://developer.mozilla.org/' target="_blank"><button> MDN Web Docs</button></a>

<a href='https://developer.mozilla.org/' target="_blank">MDN Web Docs</a>

<form action="https://developer.mozilla.org//" target="_blank">
    <input type="submit" value="MDN Web Docs" />
</form>

https://jsfiddle.net/6wu3v9Lc/3/

Font Awesome Example

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-clock"></i>

</body>
</html>

https://jsfiddle.net/6wu3v9Lc/5/

Upvotes: 1

Thunder Coder
Thunder Coder

Reputation: 102

I changed the form onsubmit attribute to action.

I don't quite understand though why action is better than onsubmit.

Upvotes: 0

Related Questions