I have not confirmed if this is just an iOS error, but I'm facing this problem in my app.
This:
<input type="number" step="0.01" disabled="disabled" name="cash_total" value="4.00" id="cash_total" placeholder="0.00" />
Shows: 4
Even with the Step in there. What's going on?!
UPDATE: This is a Safari bug I've noticed, even on desktop: http://jsfiddle.net/S9msN/
This might work for you. When the page loads, it uses some js to do the math and then adjust the value: http://jsfiddle.net/LSnvj/
<script type="text/javascript">
<!--
jQuery(document).ready(
function(){
jQuery(window).load(function(){
var value = 4;
var step = 0.01;
var total = value+step;
jQuery("#cash_total").attr("value",total);
})
});
-->
</script>
<input type="number" step="0.01" disabled="disabled" name="cash_total" value="0.00" id="cash_total" placeholder="0.00" />
Related
Honestly thought this was an easy issue to solve, but I'm stuck trying to figure this out. I want to set my input-group spinner to show the value 1 when the user opens the application.
<input id="option1" type="number" min="1" value ="1"
class="form-control"
ng-model="targetEntity.option1">
</div>
I thought value="1" would solve the issue but it hasn't shown the desired result, I was wondering what am I doing wrong?
Initialize the value of targetEntity.option1 in your controller:
angular.module('app', [])
.controller('ctrl', ($scope) => {
$scope.targetEntity = {
option1: 1
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input id="option1" type="number" min="1"
class="form-control"
ng-model="targetEntity.option1" />
</div>
I have a form with two required input fields:
<form>
<input type="tel" name="telephone" required>
<input type="tel" name="mobile" required>
<input type="submit" value="Submit">
</form>
Is it possible to get browsers to validate so only one of them is required? i.e if telephone is filled, don't throw an error about mobile being empty and vice versa
Update 2020-06-21 (ES6):
Given that jQuery has become somewhat unfashionable in the JavaScript world and that ES6 provides some nice syntactic sugar, I have written a pure JS equivalent to the original answer:
document.addEventListener('DOMContentLoaded', function() {
const inputs = Array.from(
document.querySelectorAll('input[name=telephone], input[name=mobile]')
);
const inputListener = e => {
inputs
.filter(i => i !== e.target)
.forEach(i => (i.required = !e.target.value.length));
};
inputs.forEach(i => i.addEventListener('input', inputListener));
});
<form method="post">
Telephone:
<input type="tel" name="telephone" value="" required>
<br>Mobile:
<input type="tel" name="mobile" value="" required>
<br>
<input type="submit" value="Submit">
</form>
This uses the input event on both inputs, and when one is not empty it sets the required property of the other input to false.
Original Answer (jQuery):
I played around with some ideas and now have a working solution for this problem using jQuery:
jQuery(function ($) {
var $inputs = $('input[name=telephone],input[name=mobile]');
$inputs.on('input', function () {
// Set the required property of the other input to false if this input is not empty.
$inputs.not(this).prop('required', !$(this).val().length);
});
});
I've written a jQuery plugin wrapping the above JavaScript code so that it can be used on multiple groups of elements.
Based on Andy's answer, but I needed a checkbox implementation & came up with this.
what role(s) do you want?
<input type="checkbox" data-manyselect="roler" name="author" required>
<input type="checkbox" data-manyselect="roler" name="coder" required>
<input type="checkbox" data-manyselect="roler" name="teacher" required>
where will you work?
<input type="checkbox" data-manyselect="placement" name="library" required>
<input type="checkbox" data-manyselect="placement" name="home" required>
<input type="checkbox" data-manyselect="placement" name="office" required>
jQuery(function ($) {
// get anything with the data-manyselect
// you don't even have to name your group if only one group
var $group = $("[data-manyselect]");
$group.on('input', function () {
var group = $(this).data('manyselect');
// set required property of other inputs in group to false
var allInGroup = $('*[data-manyselect="'+group+'"]');
// Set the required property of the other input to false if this input is not empty.
var oneSet = true;
$(allInGroup).each(function(){
if ($(this).prop('checked'))
oneSet = false;
});
$(allInGroup).prop('required', oneSet)
});
});
Here for anyone else getting here by googling and wanting a quick solution for one of many checkboxes.
You would better do form data validation with Javascript anyway, because the HTML5 validation doesn't work in older browsers. Here is how:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation Phone Number</title>
</head>
<body>
<form name="myForm" action="data_handler.php">
<input type="tel" name="telephone">
<input type="tel" name="mobile">
<input type="button" value="Submit" onclick="validateAndSend()">
</form>
<script>
function validateAndSend() {
if (myForm.telephone.value == '' && myForm.mobile.value == '') {
alert('You have to enter at least one phone number.');
return false;
}
else {
myForm.submit();
}
}
</script>
</body>
</html>
.
Live demo here: http://codepen.io/anon/pen/LCpue?editors=100. Let me know if this works for you, if you will.
For two text fields #Andy's answer is working awesome, but in case of more than two fields we can use something like this.
jQuery(function ($) {
var $inputs = $('input[name=phone],input[name=mobile],input[name=email]');
$inputs.on('input', function () {
var total = $('input[name=phone]').val().length + $('input[name=mobile]').val().length + $('input[name=email]').val().length;
$inputs.not(this).prop('required', !total);
});
});
I tried to retrvie and display html5 session storage in text box like this
<script>
// alert(sessionStorage.param1);
var rightbox=document.getElementById("from");
var two=sessionStorage.getItem(param1);
rightbox.innerHTML=two;
</script>
But its not working.Alert is working fine.
What I am doing wrong here?
Thanks
I don't really get you, but does this solve your problem?
Javascript:
<script>
// alert(sessionStorage.param1);
var two=sessionStorage.getItem(param1);
document.getElementById('from').value = two;
</script>
HTML:
<input type="text" id="from" name="from" value="" />
I'm using this code:
<input type="range" min="1" max="100" name="points">
How do I display the current value in the slider?
If you want to display the concrete number you could have a span or something over top the input and use jquery to handle the onchanged event.
HTML:
Price: <input id="price" type="text" value="10.50" readonly /><br/>
Quantity: <input id="qty" type="text" value="1" readonly />
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/>
Total Price: <input type="text" id="total" readonly />
JS:
$(function() {
$("#rangePoints").change(function() {
var qty = $("#rangePoints").val();
var price = $("#price").val();
$("#qty").val(qty);
$("#total").val(qty*price);
});
});
Working JsFiddle
The range input type is supported only by newer browsers. But with a bit of JavaScript magic you can make it accessible for older browers too, you don't even need jQuery in order to do this.
In JavaScript, add the following snippet:
function updateCurrentValue(val) {
document.getElementById('currentValue').value=val;
}
And then, in the HTML add another input element where to show the current value of the slider:
<input type="range" min="1" max="100" name="points" onchange="updateCurrentValue(this.value);">
Current value: <input type="text" id="currentValue">
Hey guys, this bit of code works in IE but not in Chrome, any idea why?
<script type="text/javascript">
function fillreply(commentID){
var item = document.getElementById("replyto");
item.value=commentID;
}
</script>
...
...
<div id="makereply" class="hidden">Reply to: <input type="text" size="6"
name="replyto" readonly />
In IE javascript:fillreply(4); will work but not in chrome where nothing happens.
Your input doesn't have an id attribute, and you're trying to retrieve it with getElementById.
<input type="text" size="6" id="replyto" name="replyto" readonly="readonly" />