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>
Related
I came across value of attribute in button and as it was explained here https://www.quora.com/What-is-the-difference-between-name-and-value-in-an-HTML-tag value attribute defines text on button. And I expected that <button value="submit"></button> will be equal to <button>Submit</button> but <button value="submit"></button> output button with no text on it. Thus, I a bit confused with why and when we need to use value attribute for button tags in HTML
Value is the result to be posted to server when the button is pressed and has nothing to do with display text.
The button's value gets submitted to the server; You might want to know which button the user clicked.
we can define submit button by two ways.
<input type="submit" value="save" >
by this method, the value will be displayed as text for the button.
But the button tag.
<button type="submit" value="save">Submit Form</button>
Here the value is represented as the value of that button field if you need to use it.
Also, someone use this value when they use multiple submit forms in a php file to identify the form, someone uses the submit button name too.
Value actually acts as text when used in the form like
<input type="button" value="report" >
And acts as a value when used as
<button type="button" value="report">Report</button>
COUNTER COUNTER EDIT:
Sorry for obvious question, my edits keep getting deleted but was just saying been working non stop and had a complete blank when trying to remember this, thanks to the Stack community though!
I have my HTML here:
<input type="submit" name="buddy1" value="Yes" placeholder="Toggle Yes">
I want the input value to be Yes but the text displayed to be "Toggle Yes". I know there's a trick with span classes and buttons but I want the button to also be the submit. Is there a quick way of doing this WITHOUT Javascript?
You can use the <button></button> instead:
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
Your should use a button element, where you can change the text of the button. Buttons elements are just input elements which have more options. From the w3 site on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities:
For example.
<button type="submit" name="buddy1" value="Yes">Toggle Yes</button>
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 element which has a javascript function attached to it, and this element, contains an input checkbox. Is it possible somehow to check/uncheck this checkbox, without firing the buttons javascript function?
I know that it is probably not a very good design, placing an input checkbox inside a button element, but I am trying to modify a plugin, and if possible, I would remain at my current design, because I would lose too much time on changing the whole design, time, which unfortunatly I can't afford:|
EDIT: Sorry, placing my text in < and > tags, made them dissapear:|
EDIT2:
What I am trying to achieve is to use tablesaw to create a sortable data table. When clicking on one of the headers in a tablesaw table, if sortable is set, it sorts the table by the selected column. I would like to place a checkbox in the first header, to select all rows visible. This is how my td looks like:
<th data-tablesaw-sortable-default-col="true" class="tablesaw-cell-persist
tablesaw-sortable-head tablesaw-sortable-ascending" scope="col"
data-tablesaw-priority="persist" data-tablesaw-sortable-col="true">
<button class="tablesaw-sortable-btn">
<div class="checkbox checkbox-success">
<input id="test" name="test" type="checkbox">
<label for="test">
Information
</label>
</div>
</button>
</th>
The event to the button is attached by tablesaw with an onclick event, but I can modify that too, cause I have access to the source. So basicaly, what I would like that, if a click is made ON the input element, modify the checkbox state, if a click is made anywhere else on or in the button, fire the tablesaw event.
I don't think that the attached javascript event is the problem, check out the following fiddle:
http://jsfiddle.net/16d8kasp/
There is no event attached here, but the checkbox state can't be toggled anyway.
Try this Jquery example. Might work for you -
JS Fiddle
$("input#test").on("click",function(e){
e.stopPropagation();
});