I have a submit button that is used to save a form. Inside the submit button I want to use a HTML tag. I am using Font Awesome and I would like the save icon to appear next to the word save in the button. The HTML for this is
<i class="icon-save"></i> Save
The only problem is I cannot seem to get HTML to render inside the value="" property on the submit button. How can I get HTML to render inside the submit button? This doesn't parse the HTML, it actually renders a button with the literal contents
<input type="submit" value="<i class='icon-save'></i> Save" />
Here is an example of what I want
did you try the button tag like this :
<button type="submit">
<i class='icon-save'></i> Save
</button>
Using background image can also achieve this JSFiddle
<input type="button"
style="background-image:url(http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/24/Access-icon.png);
background-position:left; background-repeat:no-repeat;
padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px"
value="Save" />
Related
I wanna switch this code:
Inapoi
With a button. I want a button who redirect to ”selectare_gen.php”
I tried:
<button onclick="location.href='selectare_gen.php'">Inapoi</button>
But all it does is refreshing the current page..
It should be
<button type="reset" onclick="location.href='selectare_gen.php'">
Inapoi
</button>
The type="reset" is a workaround to prevent the browser from interpreting the button as a form element which causes the reload.
Check this link over here. It should answer your question.
How to create an HTML button that acts like a link?
Many browsers think that the <button> tag will cause a submit that's why it's appearing to just refresh the page. If you use an input type="button" it wouldn't have this effect:
<input type="button" onclick="window.location='selectare_gen.php';" value="Inapoi" />
I have an ASP.NET web forms project.
In a Mastre page I have an input:button and input:text . when click on input:button ,page refreshed.
how can i solved it, I do not refresh a page because its not runat server contolr.
my html code in master page:
<li class="menusearch">
<input type="text" placeholder="جستجو..." class="txtsearch" />
</li>
<li>
<input type="image" src="/statics/images/search.png" class="btnsearch" />
</li>
W3C says that input type="image" defines a submit button with an image. Perhaps you should change that to button type="button" and then put an image element inside it. Ex:
<button type="button" class="btnsearch">
<img src="/statics/images/search.png" />
</button>
Then the button won't have a submit behavior, and it'll have an image inside of it. Alternatively, you could use CSS to set a background image on your button. See HTML / CSS How to add image icon to input type=“button”?
I have the following:
<form action="/Account/LogOff"
id="logoutForm"
method="post">
#Html.AntiForgeryToken()
<button>Logout</button>
<i class="fa fa-user"></i>
</form>
The form is submitted when I click the button. However I would like to change the button
to use a fontawesome icon. Meaning I don't want the button at all. Just to have a fontawesome icon that the user can click on.
How can I change it so that the form gets submitted when I click on the icon instead of
the button?
There are many ways of getting this done!
Adding background image
To add the background image to the button itself, you can add this CSS property.
Try this:
button {
background-image: url('..url/to/image');
}
Adding image as the content of the button
Or this one which will add the image in the button instead of the Logout image, try this:
<button><img src="url/to/image.png" alt="photo" /></button>
Submitting the form using the image
Or this one, which is just a simple image, but using JS, you submit the form when the image is clicked, like this:
<i onclick="submit()">Text or something</i>
<form id="form" method="post">
// elements here..
</form>
And in the JS, this one:
function submit () {
document.getElementById("form").submit();
}
Note the onclick method, and the function! :) You will get the form submitted once the user clicks on the i and the form with the ID form will be submitted!
Try this
<button><i class="fa fa-user"></i> Logout</button> //It will add user icon before the text
How to replace the submit button with a link without using javascript ? is there any way to add the submit attribute to a link ? because the form will not be sent by a simple link without "submit".
<form:form action="/getPage" >
<div class="buttons">
<a class="link" href="">
<img src="icon.png" />
</a>
</div>
</form:form>
I work in an application web so if i use javascript the link will not be mapped by the server ..
You can not submit a form using an <a> tag alone. You will need some type of javascript to assist, if you insist on using the <a> tag:
Submit the Form
or
Submit the Form
or super hack:
Submit the Form, then on backendPage.php you can use $_GET requests to process information, and redirect the visitor to the intended page. But that's a horrible idea haha
Try this:
CSS
button {
background:none!important;
border:none;
padding:0!important;
/*border is optional*/
border-bottom:1px solid #444;
}
HTML
<button>your button that looks like a link</button>
This can achieve the same effort and it looks like <a>
Note: btn btn-link comes from bootstrap
<button class="btn btn-link" type="submit"><img src="icon.png" /></button>
There is an another way out. Using this method you can use any element to submit a form.
Following is an example:
<span onclick="$('#submit').trigger('click')" style="cursor:pointer;">
anything
</span>
Add a hidden submit button:
<input style="display:none;" type="submit" id="submit"/>
This will behave exactly as actual submit button.
i am using this plain html code inside an aspx page. it renders well, but when clicked it submits / reloads the page. i dont want anything to be done on click of this button. whats d issue
<button>
btn1</button>
<button>
btn2</button>
It'll default to type=submit if no type is explicitly given.
You want to put
<button type="button">btn1</button>
Not sure if by pure html you can do so however this way you can black the default submit behaviour:
<button id="a" onclick="return false;">button</button>
Don't use <button>. Use <input> instead:
<input type="button" id="btn1" />
Also, worth noting (from http://www.w3schools.com/tags/tag_button.asp):
If you use the button element in an
HTML form, different browsers will
submit different values. Internet
Explorer will submit the text between
the <button> and </button> tags, while
other browsers will submit the content
of the value attribute. Use the input
element to create buttons in an HTML
form.