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();
});
Related
I put slider into form but found it doesn't send it's value as get parameter
https://jsfiddle.net/dimskraft/284x06da/3/
Neither slider id not slider value appear in action url. Why and how to fix?
One way to fix it would be to have a hidden input field in the form and update its value based on slider's change event.
Here, I have added input field with name input1 so you would see that in the final URL. Also, you can assign its initial value with value attribute. I have given value="0"
https://jsfiddle.net/fhp81qyb/
$( "#slider" ).slider({
change: function( event, ui ) {
$('#input1').val(ui.value);
}
});
<input type="hidden" name="input1" id="input1" value="0"></input>
Slider is not a form element; hence it is not included in the form data.
Example: https://jsfiddle.net/Twisty/qfbgh0z4/5/
HTML
<form action="http://localhost" method="get" target="_blank">
<div id="slider"></div>
<input type="hidden" name="slider-value" id="slider-value" value="0" />
<input type="submit" value="Submit">
</form>
JavaScript
$(function() {
$("#slider").slider({
slide: function(e, ui) {
$("#slider-value").val(ui.value);
}
});
});
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>
<div>
ToDo<br>
<input ng-show="add" type="checkbox" >{{val}}
</div>
<div>
<input type="text" ng-model="ToDo">
<input type="button" ng-click="addToDo()" name="btn" placeholder="add todo here" ng-model="add" value="add" />
</div>
And the javascript:
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope,$log){
$scope.addToDo = function(){
$scope.val = $scope.ToDo;
}
});
If i click on the 'add' button, a checkbox should appear along with the text of the texxtbox. But only text is showing, no checkbox. How do i display the checkbox?
You have to call the function in your controller and update some variable to true/ false. Based on the value and using ng-if directive, you can toggle the HTML element.
$scope.displayCheckBox = false;
$scope.val = "someRandoValue";
$scope.addToDo = function() {
$scope.displayCheckBox = true;
};
<div>
ToDo<br>
<span ng-if="displayCheckBox">
<input type="checkbox" >{{val}}
</span>
</div>
I don't know if this is a bug or if this behavior is intended, and if it is intended I can't figure out why. If I have a form with a single input and disabled submit button, in IE11/Edge I can focus the input and hit enter and the form will be submitted. If there are two inputs, the form is not submitted.
In Firefox and Chrome, this works as I would expect, and the form submit event is not triggered on either example while the button is disabled.
One input (jsfiddle)
HTML:
<form>
<input type="text" id="stuff" />
<button type="submit" disabled>submit</button>
</form>
JS:
$('form').on('submit', function() {alert('form submitted');});
$('button').on('click', function() {alert('button clicked');});
$('input').on('input', function() {
if ($('#stuff').val().trim())
$('button').prop('disabled', false);
else
$('button').prop('disabled', true);
});
Two inputs (jsfiddle)
HTML:
<form>
<input type="text" id="stuff1" />
<input type="text" id="stuff2" />
<button type="submit" disabled>submit</button>
</form>
JS:
$('form').on('submit', function() {alert('form submitted');});
$('button').on('click', function() {alert('button clicked');});
$('input').on('input', function() {
if ($('#stuff1').val().trim() && $('#stuff2').val().trim())
$('button').prop('disabled', false);
else
$('button').prop('disabled', true);
});
Why does the form with two inputs work correctly in IE11/Edge but not the form with one input?