I need to add multiple actions to list group items, all the Purple area needs to follow a link, and the Yellow area to open a Modal.
Currently the list group items are anchors, since is not valid HTML to nest anchors or buttons, I searching for another solution.
Any ideas?
Icon have id, so give id to input and use jQuery code.
$(document).ready(function(){
$('#simple').click(function(){
window.onload = window.location.href = "http://stackoverflow.com";
});
});
$(document).ready(function(){
$('#basic-addo1').click(function(){
window.onload = window.location.href = "http://stackoverflow.com";
});
});
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" id="simple">
</div>
Related
I use a Shopping List with a changeStatus function to update an element on click. Elements are automatically filtered (non ticked at the top). Sometimes I missclick on an element so it becomes ticked and is automatically filtered and then instantly disapears in the bottom of my list so I could not even know what element has been ticked (too bad when doing shopping...).
I would like to prevent this by having a mandatory double click to tick/untick element, but I don't know how to deal with it with checkbox.
<fieldset class="items-list">
<label class="items-list-item" ng-repeat="item in items | filter : filterItem">
<input
type="checkbox"
value="{{item.STATUS}}"
ng-checked="item.STATUS==2"
ng-click="changeStatus(item.ID,item.STATUS,item.ITEM)"
class="items-list-cb"/>
<span class="items-list-mark"></span>
<span class="items-list-desc" ng-class="{strike:item.STATUS==2}">{{item.ITEM}}</span>
<a ng-click="deleteItem(item.ID)" class="pull-right red"><i class="fa fa-minus-circle"></i></a>
</label>
</fieldset>
Try this code:
$(document).ready(function() {
$(".dbl").click(function(e) {
e.preventDefault();
});
$(".dbl").dblclick(function(e) {
let myCheckbox = $("input[type=checkbox]", this);
myCheckbox.prop("checked", !myCheckbox.prop("checked"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="dbl"><input class="dbl" type="checkbox">double click to tick/untick element</label>
The code below ignores the single click with the help of onclick="return false" and toggles the tick on double click with the help of ondblclick="this.checked = !this.checked"
<input type="checkbox" onclick="return false" ondblclick="this.checked = !this.checked" />
This could be done by adding onclick and ondblclick to the input tag. When clicked, the onclick removes the check, but if double-clicked the ondblclick adds the check.
<p>Double-click ads a check, while single click removes the check.</p>
<input type="checkbox" onclick="this.checked = false" ondblclick="this.checked = true">
I have a tax calculator with many inputs which pass data to each other. The user only sees one input and the other inputs are in a hidden div (used just for calculation propose).
the Google-Chrome element inspector not showing the value of inputs when they are in hidden div (however it shows the value of inputs with attribute type="hidden"). So how can I inspect and debug the form with hidden divs?
$(document).ready(function(){
$("#price").on("input paste keyup",function(){
var power=$("#power").val();
$("#taxSet").val(parseInt($("#price").val()) * 0.1);
$("#taxAmount").val(parseInt($("#taxSet").val())*power +
parseInt($("#price").val()));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
<input id="power" value="5">
<input id="taxSet">
<input id="taxAmount">
</div>
Did you mean "I can't see attribute on DOM" like #power?.
My first suggest use attr, so change attribute value.
var fakeValye = 10;
$("..blah").val(fakeValue).attr('value', fakeValue);
If you don't say this, you just talking about debugging. You should use debugger keyword.
I refactored your code for you.
$(document).ready(function() {
$("#price").on("input paste keyup", function() {
debugger;
var power = $("#power").val();
var taxtSet = parseInt($("#price").val()) * 0.1;
$("#taxSet").val(taxtSet);
var taxAmount = parseInt($("#taxSet").val()) * power + parseInt($("#price").val())
$("#taxAmount").val(taxAmount);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price">
<div style="display:none">
<input id="power" value="5">
<input id="taxSet">
<input id="taxAmount">
</div>
I need to create a fill in the blanks question where the question text will be loaded dynamically through xml. I don't know the length of the question. I have to place a text area for question and text input for answer. The positioning of these controls should be aligned based on the input.
Any tips on how to achieve this using flex air application?
Check this jQuery plugin. It exactly does what you are looking for.
JEditable
If you are not inclined towards using the plugin, then try the code below:
<div>
<div>
<label class="editable">Name</label>
<input class="editable" type="text" name="name" style="display:none"/>
</div>
<div>
<label class="editable">Type</label>
<input class="editable" type="text" name="type" style="display:none"/>
</div>
<div>
<a class="edit" href="#">Edit</a>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".edit").click(function(){
var $this = $(this);
var text = $this.text();
if(text=="Edit"){
$this.text("Cancel");
}
else{
$this.text("Edit");
}
$(".editable").toggle();
});
$("input.editable").change(function(){
$(this).prev().text($(this).text());
});
});
</script>
To bind the click event handler to the anchor element use the live function of jQuery. e.g:
$("a.ff-save").live("click", function (){
alert("ok");
});
I have a form and a working reset button. When i click the button all inputs and text area boxes are clear. I was wondering if there's a way to create a clear/reset button that will clear only some inputs and not what i have inside my text area box.
Here's the jsfiddle solution.
<form>
<input type="text" class="clearit" /><br />
<input type="text" class="clearit" /><br />
<input type="text" class="clearit" /><br />
<textarea id="t5"></textarea><br />
<input type="reset" id="reset" />
</form>
$(document).ready(function(){
$('#reset').on('click',function(e){
e.preventDefault();
$('.clearit').val("");
});
});
Assign all input elements a class let suppose inputs and different ids let suppose the id of text area is text_area.
<input type = "textarea " id = "textarea ">
Now with jquery
$(function(){
$('.inputs').each(function()
{
var id = $(this).attr('id');
if(id == 'textarea '){
}else{
$(this).attr('value',"");
}
});
})
Done!
use jquery it will help u , give the class to fields which u want to clear on click of button and give id to your button
$('#id_of_button').click(function(){
$('.input_field_class').val("");
});
See the link
http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml
Basically rather than calling a form.reset() from the reset button, call an external function which clears out the fields you require and leave the remaining as it is.
Hope it solves your problem!
I have some elements that get added to my html page in response to a user's interaction with jQuery:
addFields = '<div class="individual">
<div class="member">
Name: <input class="firstName" type="text">
<input class="lastName" type="text">
<input class="cit" onChange="citizenInfo(this)" type="checkbox">Non U.S. Citizen?<br/>
</div>
<div class="citInfo" style="display:none">
Country<input class="countryBirth" type="text">
</div>
</div>';
$('#items').append(addFields);
Now I want the 'cit' checkbox to toggle the visibility of the 'citInfo' div. So in my handler for the checkbox I have this:
function citizenInfo(obj) {
$(obj).parent().parent().find('.citInfo').toggle();
}
This works in Safari and Firefox but now in IE. How can I get IE to toggle the visibility of this div in response to the checkbox being clicked?
You should bind a click event to the checkbox, check the value of the checkbox and act accordingly.
$( 'input.cit' ).click( function () {
var div = $( '.citinfo' );
$(this).attr( 'checked' ) ? div.show() : div.hide();
});