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.
Related
I have a sequence of radio buttons on a web page. On page-load, the first radio button in the sequence is selected by default.
In addition, there is a <div> associated with each radio button. (The corresponding <div>'s class is the same as the corresponding radio button's value.)
Even though the first radio button is checked by default, the jQuery (source) does not trigger until the already-checked radio button is manually clicked after page-load. I learned that I can solve this by manually triggering the click myself on page-load via jQuery.
I tried doing so with $("input:radio:first").prop("checked", true).trigger("click"); (source), which I thought would click the first radio button in the sequence as desired, but to no success. (By the way, is this code clicking the first radio button on the page, or is it clicking the first checked radio button on the page? I'd prefer the code to trigger("click") the first checked radio button on the page.)
I also already hide all <div>s in the CSS, as suggested here.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".radio_div").not(targetBox).hide();
$(targetBox).show();
});
});
$("input:radio:first").prop("checked", true).trigger("click");
.radio_div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio"
value="Bacon" checked="checked">Part 1</label>
<label>
<input type="radio"
value="is">Part 2</label>
<label>
<input type="radio"
value="Good">Part 3</label>
</div>
<div class="Bacon radio_div">Cured sugary meat</div>
<div class="is radio_div">be</div>
<div class="Good radio_div">bangin</div>
JSFiddle
How can I make jQuery click the default-checked radio button (so that its respective <div> appears) on page-load?
In addition, in my actual environment (which uses a semi-customizable web builder, so it's difficult to reproduce all the code involved), the default-checked radio button must always be clicked twice in order to activate its corresponding <div> with the jQuery. However, I cannot replicate this behavior in JSFiddle. If anyone has any insight on what might be causing this (and how to troubleshoot/resolve), I'd be happy to hear. (Perhaps jQuery could simulate a second click whenever a radio button click is detected?)
EDIT: The issue with my production environment (in the gif) was that the value of the first radio button was changing to whatever radio button was previously selected. Super ridiculous.
Because you're using 2 click functions.
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 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/
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();
});
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>