Reputation: 565
I am new to jQuery. I have a form with two input boxes.
<form>
<div class="col-md-6">
<div class="form-group ">
<label for="minAmt" class="col-lg-4 control-label">Min.Amount</label>
<div class="col-lg-6">
<input type="text" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />
</div>
</div>
<div class="form-group ">
<label for="maxAmt" class="col-lg-4 control-label">Max.Amount</label>
<div class="col-lg-6">
<input type="text" class="form-control maxAmt" id="maxAmt" name="maxAmt" placeholder="Enter Max Amount" />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-actions btnzone">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="addbutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="limits" >
<div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
<table id="table" class="table table-hover table-fixed" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>Min.Amount</th>
<th>Max.Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
First the user enters both minimum and maximum values, and clicks the "Add" button. Then those values will be displayed in table format in the minimum and maximum columns.
Then the first input box is disabled, and gets the value of the previously added maximum value. The user now only needs to enter a new maximum value and press "Add" again.
That way, multiple consecutive ranges can be added to the table.
Here is the code:
$("button#addbutton").click(function(){
var minAmt=$("#minAmt").val();
var maxAmt=$("#maxAmt").val();
var new_row = "<tr id='row"+i+"' class='info'><td class='minAmt'>" + minAmt + "</td><td class='maxAmt'>" + maxAmt + "</td></tr>";
$("table tbody").append(new_row);
$("#minAmt").val($('td.maxAmt').last().text()).prop("disabled","disabled");
$("#maxAmt").val('');
});
So after the first click, the user can enter the maximum amount only.
I want to add .01
to the minimum amount after each "Add" click (except the first time when the minimum value was entered manually).
For example:
First I enter 1 - 100.
Next time the minimum amount takes 100 automatically, so I enter the maximum amount, 1000.
After I click "Add", I want display 100.01 to 1000 in the table.
How can I do that?
Upvotes: 0
Views: 133
Reputation: 350477
You could use as value:
+minAmt + 0.01
Note the first unary plus operator, which turns a string into a value.
Here is the code updated with some more improvements:
$("button#addbutton").click(function(){
var minAmt=$("#minAmt").val();
var maxAmt=$("#maxAmt").val();
// Some validation
if (minAmt == '' || isNaN(minAmt)) {
$("#minAmt").focus();
$("#minError").show();
return;
}
$("#minError").hide();
if (maxAmt == '' || isNaN(maxAmt) || +maxAmt <= +minAmt) {
$("#maxAmt").focus();
$("#maxError").show();
return;
}
$("#maxError").hide();
var i = $("table tbody tr").length + 1;
$("table tbody").append(
$("<tr>").attr("id", "row"+i).addClass("info").append(
$("<td>").addClass("minAmt").text(minAmt),
$("<td>").addClass("maxAmt").text(maxAmt)
)
);
$("#minAmt").val(+maxAmt+0.01).prop("disabled","disabled");
$("#maxAmt").val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-6">
<div class="form-group ">
<label for="minAmt" class="col-lg-4 control-label">Min.Amount</label>
<div class="col-lg-6">
<input type="text" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />
<span id="minError" style="display: none; color: red">invalid input</span>
</div>
</div>
<div class="form-group ">
<label for="maxAmt" class="col-lg-4 control-label">Max.Amount</label>
<div class="col-lg-6">
<input type="text" class="form-control maxAmt" id="maxAmt" name="maxAmt" placeholder="Enter Max Amount" />
<span id="maxError" style="display: none; color: red">invalid input</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-actions btnzone">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="addbutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="limits" >
<div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
<table id="table" class="table table-hover table-fixed" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>Min.Amount</th>
<th>Max.Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
Upvotes: 2