I am testing out Material Design Light component library.
I have some input attributes that are in the form of buttons and I was wondering how can I switch those input buttons to the button attribute because MDL uses the button attribute. Though I don't know how I'd do this and keep the properties that the input attributes have such as “accept”, “type”, etc. The code I’m testing with currently is right here:
https://jsfiddle.net/ErraticFox/46654fzy/
<input id="uploadSound" accept='audio/wav, audio/x-wav, audio/mpeg, audio/vorbis, application/ogg' type="file">
<!--
MDL Button:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
-->
You can't change input to button in this case because it would lose funcionality but you can make it look like button by hiding <input> and taking advantage of <label> and it's for attribute which will delegate event to input with given id.
Example: https://jsfiddle.net/k2eau0oe/
Related
I have some dynamic tabs in Angular. Each of the tabs contains a dynamic form.
I noticed that Angular doesn't encapsulate form id property, and because of this id need to be set dynamically, so each tab has separate form id:
<form id="tab{{itemId}}"
[formGroup]="FormTab"
(ngSubmit)="save()">
</form>
Because the structure of each tab is complex, fields and buttons (including submit button in question) are not inside the <form> tag itself. I am using HTML form property to point form's id.
Somewhere in each tab there is a button:
<button form="tab{{itemId}}"
type="submit"></button>
Normally, when it would be static <button form="tabStatic" type="submit"></button> - the form property would work and act as submit button for form <form id="tabStatic"> but apparently Angular doesn't support binding or interpolation in HTML property form. Or am I wrong?
How do I approach this? How to set button's form property with dynamic data?
Try this, it's working for me:
<form id="tab{{itemId}}" [formGroup]="FormTab" (ngSubmit)="save()"
#refForm="ngForm">
</form>
<input type="button" form="tab{{itemId}}" value="Save"
(click)="refForm.ngSubmit.emit()" />
Thanks!
I've started developing a small app using Ionic 1.
Here I've used ionic-datepicker external plugin as the date picker for my app.
I need to put the button inside of a label in the same row of an input field
<label class="item item-input">
<input type="text" ng-model="newEvent.date" placeholder="{{date}}">
<button class="button button-full button-positive" ng-click="openDatePicker()">
Date
</button>
</label>
I need to place the elements like this. But here, the function doesn't call. But when I place the same button outside the label tag it works.
Why is that? How can I make it happen?
The label element intercepts the click event and focus the related input. I suggest to you wrap label and button inside a div element.
This question already has answers here:
Difference between <input type='button' /> and <input type='submit' />
(4 answers)
Closed 1 year ago.
Is there a difference between a button with type="button" vs type="submit"? Are there functional differences, or is it just a descriptive name for easier code reading?
Is this different than input?
From MDN:
type
The type of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
As for the difference between button and input:
A button can have a separate value as data, while for an input the data and button text are always the same:
<input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>
A button can have HTML content (e.g. images), while an input can only have text.
A button may be easier to tell apart from other input controls (like text fields) in CSS. Note backwards browser compatibility.
input {
}
button { /* Always works */
}
input[type=button] { /* Not supported in IE < 7 */
}
A button with type "button" won't submit a form but one with no type or type=submit (the default) will. Buttons with type=submit are nearly the same as inputs with type=submit but buttons are able to contain HTML content.
<input type="button" />
buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.
<input type="submit">
buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
when form submit by below code, We should use type=button instead of type=submit to prevent form submit twice.
#using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
{
//Form elements
}
Buttons can be stylized much better than inputs can be used for anchor tags(links).
Images
Content etc.
Inputs can achieve the same functionality as buttons but uglier design.
Let's say inputs are oldschool, buttons are cooler.
They have different default behaviour regarding submitting form data to the server
The button has an attribute named "type" and can contain those values:
submit: Has default behaviour of submitting the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
<button type="button"></button> buttons will not submit a form - they don't do anything by default. Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.
I have a button that takes the user back to the previous page and I want to style it using CSS but I want to put this button in its own class so the CSS I write for it does not affect any other buttons on my website.
The current code for the button is:
<FORM>
<INPUT Type="button" VALUE="Go Back To Previous Page" onClick="history.go(-1);return true;">
</FORM>
I have multiple buttons on my page so if I style "button" it will style all of the other buttons.
What I want to do is style only that specific button so i need to add it to it's own class or give it it's own id but unsure how to do this.
Due to fact that you want neither to style the button in general nor the input type, I recommend to create a class on your css file.
.button-style {your code}
Then you can use it as class in your button or input element.
<input type="button" class="button-style">
Hope it helps.
Add an id to the button and use this id to give it the css you want
I have the problem with labels within buttons because a click on the label is also causing the button click to fire.
So I got two fired events after each other, what I don't want of course.
My buttons with label included look like this:
<button id="b" name="Button" class="btn btn-primary btn-large">
<label id="b_button_label" class="fontf">
Click me
</label>
</button>
Is there any quick solution, perhaps with jQuery, to prevent the double firing?
Yep, solution is not to put labels inside your buttons.
The labels are meant to describe the control itself, and clicks on a control's label will act like a click on the control itself.
From the spec:
The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.
You can use stopPropagation event in jQuery from bubbling up the event
$(function() {
$('#b_button_label').on('click' , function(e) {
e.stopPropagation();
// Your code goes here
});
});
Also why do you want to add the Label inside the button when you have the value field to display its text.
I don't think this is a valid HTML code. You cannot add a LABEL inside a BUTTON. A simple way of adding text to your button is:
<button id="b" name="Button" class="btn btn-primary btn-large">click me</button>