How can I have an alert box pop up if the number in the Answer_2 field is greater than 10, or less than -10?
Here's my example
Javascript:
function CalculateIMSUB(Atext, Btext, form, val)
{
var A = eval(Atext);
var B = eval(Btext);
if (isNaN(A)) A = 0;
if (isNaN(B)) B = 0;
var answer = A - B;
form.Answer.value = answer;
var diff = answer - val;
if (diff == 0)
form.Answer_2.value = 'ok';
else if (diff < 0)
form.Answer_2.value = diff;
else
form.Answer_2.value = '+' + diff;
}
function calculateAll() {
var forms = document.getElementsByTagName("form");
for(var i = 0; i < forms.length; i++ ) {
CalculateIMSUB(forms[i].input_A.value, forms[i].input_B.value,forms[i], 96)
}
}
HTML:
<FORM NAME="Calculator" METHOD="GET">
<P><INPUT TYPE=TEXT NAME="input_A" SIZE=10><INPUT TYPE=TEXT NAME="input_B" SIZE=10>
<INPUT TYPE="button" VALUE="+" name="subtractbutton" onclick="CalculateIMSUB
(this.form.input_A.value, this.form.input_B.value, this.form, 96)">
<INPUT TYPE=TEXT NAME="Answer" SIZE=12><tt>96</tt><INPUT TYPE=TEXT NAME="Answer_2"
SIZE=4></P></form>
<input type="button" onclick="calculateAll()" value="Master calculation" />
Thanks very much in advance
From what I understand, only thing you need to do is this, under where you calculate var diff
if(diff < -10 || diff > 10)
alert("diff is more Tham 10");
Related
My views:
class AddSuiteView(CreateView):
model = TestSuite
form_class = TestSuiteForm
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
my_TestCase = TestCase.objects.all()
context['my_testcase'] = my_TestCase
return context
def get_success_url(self):
return reverse("integratedTest:testSuite")
My form.py:
class TestSuiteForm(forms.ModelForm):
class Meta:
model = TestSuite
fields = ( 'name', 'test_case_list', 'created_by' )
My model is:
class TestSuite(models.Model):
name = models.CharField(max_length=200)
test_case_list = models.CharField(max_length=200, validators=[validate_comma_separated_integer_list], default = "1")
created_by = models.CharField(max_length=200, default = "anyone")
create_datetime = models.DateTimeField("TestSuite created on", auto_now = True)
class TestCase(models.Model):
name = models.CharField(max_length=200)
.....
My html is a bit complex:
<form method="post">
{% csrf_token %}
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<h1 class="addsuite">Create Test Suite:</h1>
<p>
<label for="id_name">Name:</label>
<input type="text" id="id_name" name="name" required><br><br>
</p>
<p>
<label for="id_test_case_list_select_l">test_case_list(double click to add):</label><br><br>
<select size=10 name="test_case_list_select_l" id="id_test_case_list_select_l" class="multiselect" multiple="multiple" >
{%for case in my_testcase %}
<option value="{{case.name}}" >{{case.name}}</option>
{%endfor %}
</select>
<br><br>
<label for="id_test_case_list_select_r" >test case selected(double click to remove):</label><br>
<select size=10 name="test_case_list_select_r" id="id_test_case_list_select_r" class="multiselect" multiple="multiple" >
</select>
<input type="hidden" id="id_test_case_list" name="test_case_list" value="">
</p>
<p>⇧
<input type="button" id="addTestcaseByOne" value="++" onclick="addTestcaseByOne">
</p>
<p>⇩
<input type="button" id="decreaseTestcaseByOne" value="--" onclick="decreaseTestcaseByOne">
</p>
<br><br>
<p>
<label for="id_created_by">created_by:</label>
<input type="text" id="id_created_by" name="created_by" "><br><br>
</p>
<input type="submit" value="Save">
</form>
<script>
$(document).ready(function() {
$("#id_test_case_list_select_l").dblclick(function() {
var selectedItem = $('#id_test_case_list_select_l').find(":selected").text()
$('#id_test_case_list_select_r').append
('<option value= ' + selectedItem + '"*1">'+selectedItem+'*1</option>')
var old_val = $('#id_test_case_list').val()
//alert("old_val" + old_val)
var new_val = ""
if (old_val.length == 0){
new_val = selectedItem + "*1"
}
else{
new_val = old_val + "," + selectedItem + "*1"
}
//alert("new_val:" + new_val)
$('#id_test_case_list').val(new_val)
});
});
$(document).ready(function() {
$("#id_test_case_list_select_r").dblclick(function() {
select_str = $('#id_test_case_list_select_r').find(":selected").text()
//alert("select_str:"+select_str)
var textArry = select_str.split("*")
if( textArry.length == 2 ){
var rep = parseInt(textArry[1])
//alert("rep:"+rep)
if( rep==1 ){
var old_val = $('#id_test_case_list').val()
//alert("old_val:" + old_val)
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var textArry_oldlist = old_val.split(",")
var new_val = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
continue
}
else{
if (new_val.length == 0){
new_val = textArry_oldlist[i]
}else{
new_val = new_val + "," + textArry_oldlist[i]
}
}
//alert("new_val:" + new_val)
}
//alert("new_val:" + new_val)
$('#id_test_case_list').val(new_val)
$('#id_test_case_list_select_r').find(":selected").remove()
}
}
});
});
$(document).ready(function() {
$("#addTestcaseByOne").click(function() {
var optionLength = $('#id_test_case_list_select_r').find('option').length
if(optionLength>=1){
select_str = $('#id_test_case_list_select_r').find(":selected").text()
var textArry = select_str.split("*")
if( textArry.length == 2 ){
var rep = parseInt(textArry[1]) + 1
var new_text = textArry[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").text(new_text)
var new_val = textArry[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").val(new_val)
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var old_val = $('#id_test_case_list').val()
//alert("old_val:" + old_val)
var textArry_oldlist = old_val.split(",")
var new_val_list = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
if (new_val_list.length == 0){
new_val_list = new_val
}else{
new_val_list = new_val_list + "," + new_val
}
}
else{
if (new_val_list.length == 0){
new_val_list = textArry_oldlist[i]
}else{
new_val_list = new_val_list + "," + textArry_oldlist[i]
}
}
}
//alert("new_val_list:" + new_val_list)
$('#id_test_case_list').val(new_val_list)
}
}
});
});
$(document).ready(function() {
$("#decreaseTestcaseByOne").click(function() {
var optionLength = $('#id_test_case_list_select_r').find('option').length
if(optionLength>=1){
select_str = $('#id_test_case_list_select_r').find(":selected").text()
var selectedTextSpls = select_str.split("*")
if( selectedTextSpls.length == 2 ){
var rep = parseInt(selectedTextSpls[1])
if( rep>1 ){
rep = rep - 1
var new_text = selectedTextSpls[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").text(new_text)
var new_val = selectedTextSpls[0] + "*" + rep
$('#id_test_case_list_select_r').find(":selected").val(new_val)
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var old_hidden_val = $('#id_test_case_list').val()
//alert("old_hidden_val:" + old_hidden_val)
var textArry_oldlist = old_hidden_val.split(",")
var new_val_list = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
if (new_val_list.length == 0){
new_val_list = new_val
}else{
new_val_list = new_val_list + "," + new_val
}
}
else{
if (new_val_list.length == 0){
new_val_list = textArry_oldlist[i]
}else{
new_val_list = new_val_list + "," + textArry_oldlist[i]
}
}
}
//alert("new_val_list:" + new_val_list)
$('#id_test_case_list').val(new_val_list)
}else if( rep==1 ){
var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
//alert("indexSel:"+indexSel)
var old_hidden_val = $('#id_test_case_list').val()
//alert("old_hidden_val:" + old_hidden_val)
var textArry_oldlist = old_hidden_val.split(",")
var new_val_list = ""
for( let i = 0; i < textArry_oldlist.length; i++ ){
if(i == indexSel){
continue
}
else{
if (new_val_list.length == 0){
new_val_list = textArry_oldlist[i]
}else{
new_val_list = new_val_list + "," + textArry_oldlist[i]
}
}
}
//alert("new_val_list:" + new_val_list)
$('#id_test_case_list').val(new_val_list)
$('#id_test_case_list_select_r').find(":selected").remove()
}
}
}
});
});
</script>
Details: Upper list selection(name="test_case_list_select_l") is a full list. Double clicking options in upper list can add a same named one to the lower list(name="test_case_list_select_r") and the hidden input(name="test_case_list") get a new value. Hopefully, the hidden input will update the field test_case_list
The code seems good to me, but unfortunately it can't save. After input everything and click save the button, the page never redirect and model TestSuite have no new record. The selected list becomes empty immediately instead.
P.S. My form.html is coming from the Django tutorial:
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save">
</form>
I add an additional button to test the value to be submitted.
<input type="submit" value="test" onclick="testButton()">
script as:
function testButton(){
valu = $('#id_test_case_list').val()
alert("valu:" + valu)
}
After select some cases, the first click button shows valu is the correct strings as I expected. But the selected list is cleared immediately after the button click. The repeatedly clicking of testButton also displays valu as blank.
I resolved this issue after I modified the model from test_case_list = models.CharField(max_length=200, validators=[validate_comma_separated_integer_list], default = "1")
to
test_case_list = models.CharField(max_length=200, default = "1")
by which I deleted the validators=[validate_comma_separated_integer_list].
I forgot it's not comma_separated_integer_list but comma_separated_string_list, I didn't know if there's any comma_separated_string_list
action="/your-name/" is missing in your form tag.
<form action="/your-route" method="post">
.
.
.
<button type="submit">Submit</button>
</form>
I am looking at having an input [type="time"] What I want is minutes to only show 15 min intervals. So 00, 15, 30 and 45.
<div class="form-group">
<label>Start time</label>
<div class="form-group">
<input type="time" name="start_time" min="09:00" max="18:00" step="00:15" required class="form-control">
</div>
</div>
$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 15,
minTime: '09:00',
maxTime: '6:00pm',
defaultTime: '11',
startTime: '09:00',
dynamic: false,
dropdown: true,
scrollbar: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<input type="text" class="timepicker">
This is not exactly the same type of input box but it works kind of similarly:
<select id="hourbox"></select>
<select id="minutebox"></select>
<script>
function makenew(value1, value2) {
var option = document.createElement('option');
option.text = value2;
option.value = value1;
return option;
}
var hourSelectionBox = document.getElementById('hourbox');
for(var j = 1; j <= 12; j++){
hourSelectionBox.add(makenew(j, j));
}
var minutesSelectionBox = document.getElementById('minutebox');
for(var j = 0; j < 60; j += 15) {
minutesSelectionBox.add(makenew(j, j));
}
</script>
input type="time" does not work in Mozilla , you can use jquery timepicker plugin
I want to display as many fields as user wants.
Maybe you have idea how can I do this case using foreach loop in Knockout framework.
For example numberOfFields is input field where user can enter how many fields he wants to display
<input id="numberOfFields" type="text" data-bind="value: obj().numberOfFields() />
<div data-bind="foreach: new Array(obj().numberofCashFlows())">
<label for="quantity$index()">Flow number $index()</label>
<input id="quantity$index()" type="text" data-bind="value: quantityArray[$index()]" />
</div>
Of course code doesn't work, I want to tell you what I mean.
If user enters 3 I want to show 3 labels and inputs with id quantity1, quantity2, quantity3 and with values: quantityArray[0], quantityArray[1], quantityArray[2]
Can you help me or give some advice?
If I got your question right, this should be it by approx. I've also added and observable to the Quantity to show you how you could expand on the example with bound properties.
console.clear();
function Quantity(id, label) {
var self = this;
self.id = id;
self.label = ko.observable(label);
};
ko.applyBindings(() => {
var self = this;
self.amount = ko.observable(0);
self.quantity = ko.observableArray([]);
self.amount.subscribe(function(amount) {
var quantity = self.quantity().length;
amount = Number(amount);
if (amount > quantity) {
for (var i = quantity; i < amount; i++) {
self.quantity.push(new Quantity(i+1, 'label for ' + (i+1)));
}
} else if (amount < quantity) {
var minus = quantity - amount;
for (var i = 0; i < minus; i++) {
self.quantity.pop();
}
}
});
self.amount(2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<label>amount: </label>
<input type="number" data-bind="textInput: amount" min="0" />
<div data-bind="foreach: quantity">
<input type="text" data-bind="textInput: label, attr: { placeholder: 'label for ' + id }" /><span data-bind="text: label"></span><br />
</div>
I have a DHCP Scope input
<input name="dhcpscope" type="number" min="1" max="254" ng-model="dhcpscope" maxlength="3" size="3" ng-required="true">
It works perfectly for DHCP scope range from 1-254, but I also want to exclude the number 111.
How do I do that? Is there another HTML attribute that I can use?
Unless, Angular RegEx ng-pattern is the only way to go about this ...
This is one way to do it. Use JavaScript. Call function onchange and just do the same thing for any number you want to remove inside that function, I did it for 3 and 6. Enjoy!
var lastnum = 1;
function myFunction(x) {
if (x.value == 3 && lastnum < 3) {
x.value = 4;
} else if (x.value == 3 && lastnum > 3) {
x.value = 2;
}
if (x.value == 6 && lastnum < 6) {
x.value = 7;
} else if (x.value == 6 && lastnum > 6) {
x.value = 5;
}
lastnum = document.getElementById("myNum").value;
}
<input name="dhcpscope" type="number" min="1" max="254" ng-model="dhcpscope" maxlength="3" size="3" ng-required="true" value="1" id="myNum" onchange='myFunction(document.getElementById("myNum"))'>
I'm using these functions to increment/decrement slider variable by 1.
function tstatUP()
{
var newValue = document.getElementById("range2").innerHTML;
newValue++;
if(newValue > 86) newValue = 86;
document.getElementById("tstatRange2").value = newValue;
document.getElementById("range2").innerHTML = newValue;
}
function tstatDN()
{
var newValue = document.getElementById("range2").innerHTML;
newValue--;
if(newValue < 72) newValue = 72;
document.getElementById("tstatRange2").value = newValue;
document.getElementById("range2").innerHTML = newValue;
}
but if I replace newValue++; with newValue+=0.5; I see undefined behavior when range2 updates:
as if it is being treated like a String.
I'm not experienced with HTML... here is the button HTML:
<div id="tstatSlider">
<h2>Thermostat Setting</h2>
<input id="tstatRange2" type="range" style="width: 200px; height 40px" min="72.0" max="86.0" value="76" step = "0.5" list="increments2" oninput="showMainTstatValue(this.value)" onchange="showMainTstatValue(this.value)">
<datalist id="increments2">
<option>72</option>
<option>74</option>
<option>76</option>
<option>78</option>
<option>80</option>
<option>82</option>
<option>84</option>
<option>86</option>
</datalist>
<span id="range2">76.0</span>°F
<br/> <br/>
<input type="button" class="button" onclick="sendMainTstatValue()" value = SUBMIT />
<br /><br />
</div>
<div id="tstatButtons">
<br />
<br />
<input type="button" class="button" value="UP" onclick="tstatUP()">
<br />
<input type="button" class="button" value="DOWN" onclick="tstatDN()">
</div>
This happens because innerHTML is returning you a String, the newValue++ operator is parsing internally to a number but the += is a valid operator on a string since you can make concatenations with it (therefore is being treated as a String):
var x = "foo"
x += "bar"; //This shoud be "foobar"
You just need to parse the value as a float number (using parseFloat) before manipulating it so it's treated as a number instead:
var newValue = parseFloat(document.getElementById("range2").innerHTML);
here is a fiddle with the solution: link
Here is the updated function
function tstatUP()
{
var newValue = parseFloat(document.getElementById("range2").innerHTML);
newValue+=0.5;
if(newValue > 86) newValue = 86;
document.getElementById("tstatRange2").value = newValue;
document.getElementById("range2").innerHTML = newValue;
}
function tstatDN()
{
var newValue = parseFloat(document.getElementById("range2").innerHTML);
newValue-=0.5;
if(newValue < 72) newValue = 72;
document.getElementById("tstatRange2").value = newValue;
document.getElementById("range2").innerHTML = newValue;
}