I have been trying to put a font awesome or glyphicon (or even an image) inside a submit button. This quickly falls apart, and I need to implement another option. I have seen a few ways of doing this, but I don't know which is the "right" or better way.
The three contenders I've seen are:
divs
links
buttons
Which is the best way to get an image / icon inside a "submit" button?
Wouldn't all three need a JS component?
This is how bootstrap add glyphicon to button object:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Bootstrap button with glyphicon
The button option does not need JS. I have tested it and you can see a working example using Font Awesome here https://jsfiddle.net/mikhailjan/sf9s28et/5/ or just see the code below:
<form action="add_person.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<button type="submit" class="button">
<i class="fa fa-user-plus"></i> Add Person
</button>
</form>
Jonathan Anctil is correct, the button needs to have type="submit" for the form to work normally.
Related
I recently came across this BBCode (Bulletin Board Code) editor named SCEditor. It's the first one that I found so I started using this one, but i am not really familiar with parsers and stuff. I need it for showing news on my website. So basically:
Admin types the news content using the editor.
Now it gotta save (I don't know how to save its output (for example images?)).
The main page loads it and shows as news (how do I load it and then convert to BBCode again?)
Here's the simple code i am using:
<form action="add-news.php" method="post">
<input
type="text"
name="newssubject"
placeholder="Subject"
required="required field"
class="form-control" style="width: 98%">
</input> <br>
<textarea
id="newsenter"
cols="110"
rows="20"
name="newsbody">
</textarea><br>
<button
style="float:right; margin-right: 10px;"
type="submit"
name="newsset"
class="btn btn-success">
Post
</button>
<a href="mod.php">
<button
type="reset"
style="float:right; margin-right: 10px;"
class="btn btn-danger">
Cancel
</button>
</a>
</form>
<script>
var textarea = document.getElementById('newsenter');
sceditor.create(textarea, {
format: 'bbcode',
style: 'minified/themes/content/default.min.css'
});
</script>
webpage image
You can use SBBCodeParser. SCEditor and this class were coded by the same person. So it would be more compatible.
from this answer : https://stackoverflow.com/a/17900286/5902691
Hello I have created a button with Materialize, but it only works for some areas of the button (primarily the area that surrounds the text). Any reason for this?
In my form all I do is add another input like this:
<input name="mySubmit" type="submit" value="Log In!" class="waves-effect waves-light btn" />
But when I click on the button only the boxed area actually recognizes it as input:
Thanks in advance for your help!
It seems that Materialize wraps the input tag in an "i" tag, which is then rendered into a button-looking element, with clickability limited to the text portion.
I was able to solve this by simply transforming my input tag into a button tag.
Initial code:
<input type="submit" value="List Employees" id="fetch-employees"
class="waves-effect waves-light btn">
What is then rendered in the browser:
<i class="waves-effect waves-light btn waves-input-wrapper" style="">
<input type="submit" value="List Employees" id="fetch-employees"
class="waves-button-input">
</i>
Solution:
<button type="submit" value="List Employees" id="fetch-employees"
class="waves-effect waves-light btn">List Employees</button>
I am using jquery file-upload plugin in backbone js.
I have more than one add-files button on a same page. Each button comes form their respective backbone views.
**View**
render: ->
$(#el).html(#template(model: #model.attributes ))
#
**Template**
<form id="fileupload" class="fileupload" action="some_action" method="POST" enctype="multipart/form-data">
<span class="btn btn-xs btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" class="select_file" name="files" multiple>
</span>
<button type="submit" class="btn btn-xs btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
</form>
The Add files button works for any one form but not for the others
What can be the reason and how to solve it?
Try this jsFiddle.
My guess is, you might have initialized fileupload like below in your code.
$("#fileupload").fileupload(....)
If you have done like that it should be the issue. You should initialize fileupload on each form.
Note:
I found this jsFiddle on google search and edited it for your requirement.
I am using jquery form plug-in for posting my form ajax way.
Post is working fine with default button.But it is not working when I am using custom bootstrap button as below . Please let me know what i am missing here?
http://jquery.malsup.com/form/#validation
Working case :
<input name="Update" value="Update" type="submit">
Not working case:
<a class="btn btn-sm btn-bitbucket" name="Update" value="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"> </i> Update
</a>
I've just removed my comment as any of these should work:
<input name="Update" value="Update" type="submit" class="btn btn-sm btn-bitbucket">
<button class="btn btn-sm btn-bitbucket" name="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"></i> Update
</button>
An anchor can't (by default) be used to submit the form, hence why it isn't working. However Bootstrap allows you to use the button classes on input and button tags.
Sorry for the ghost comment now!
I am trying to add dynamically text into Bootstrap 3 Popover data-content="" at this demo. Basically what I want to do is updating the data-content="" text buy clicking different buttons. I tried to do this by adding:
$("#poper").('[data-content="City"]');
but this is not doing the job! Here is the jquery I have
$("#show-content-one").click(function(){
$("#poper").popover('show');
$("#poper").('[data-content="City"]');
$("#poper").popover('show');
});
$("#show-content-two").click(function(){
$("#poper").('[data-content="Country"]');
$("#poper").popover('show');
});
and HTML is:
Dynamic Content Popover
<input type="button" class="btn btn-info" id="show-content-one" value="content One" />
<input type="button" class="btn btn-info" id="show-content-two" value="content Two" />
Can you please help me to fix this? Thanks
To update a custom attribute use the method data().
$("#poper").data('content', 'city');
What you've written is a selector, not an updater.