CODEWITHSUNDEEP
javascripthtml
user6917062
user6917062

Reputation:

How to change value of an input with buttons

I have a form in which I want the user to be able to set the value in 15 minute increments with the use of two buttons.

Here is what I have so far:

<div class="form-group">
    <label class="control-label " for="time">Authorisation Duration</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-clock-o"></i>
        </div>
        <input type="text" class="form-control" id="time" name="time" value="00:00">
        <span class="input-group-btn">
        <button class="btn btn-info" type="button">+ 15 Minutes</button>
        <button class="btn btn-danger" type="button">- 15 Minutes</button>
        </span>
    </div>
</div>

I am wondering how to go about making it change the value according to which button is pressed. Also, how to I make sure it does not go into the negative.

Thank you in advance.

Upvotes: 1

Views: 217

Answers (3)

Besi
Besi

Reputation: 330

This should help

    	$(function()
    	{
    		$(".btn-inc").click(function(){
    			var v = $(this).data("val");
    			$("#time").val(addMinutes($("#time").val(), v));
    			
    		});
    		/*http://stackoverflow.com/questions/13338960/add-20-minutes-in-string-time-and-populate-it-in-the-textbox-or-alert-it*/
    		function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) {
    			function z(n){
    				return (n<10? '0':'') + n;
    			}
    			var bits = time.split(':');
    			var mins = bits[0]*60 + (+bits[1]) + parseInt(minsToAdd);
    			if(mins < 0) return time;
    			return z(mins%(24*60)/60 | 0) + ':' + z(mins%60);  
    		}
    	})
    	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    	<label class="control-label " for="time">Authorisation Duration</label>
    	<div class="input-group">
    		<div class="input-group-addon">
    			<i class="fa fa-clock-o"></i>
    		</div>
    		<input type="text" class="form-control" id="time" name="time" value="00:00">
    		<span class="input-group-btn">
    			<button class="btn-inc btn btn-info" data-val="15" type="button">+ 15 Minutes</button>
    			<button class="btn-inc btn btn-danger" data-val="-15" type="button">- 15 Minutes</button>
    		</span>
    	</div>
    </div>

Upvotes: 0

Kas Elvirov
Kas Elvirov

Reputation: 8000

An example with native functions ( stepUp() & stepDown() ):

function incr() {
    document.getElementById("myTime").stepUp(15);
}
  
  function decr() {
    document.getElementById("myTime").stepDown(15);
}
Time: <input type="time" id="myTime" value="16:32:55">

<p>Click the button to increment the value of the time field by 10 minutes (each time you click).</p>

<button onclick="incr()">+ 15</button>
  <button onclick="decr()">- 15</button>

An example ( with jQuery ) - integers:

// Set counter default to zero
var counter = 0

// Display total
$("#counter").text(counter);

// When button is clicked
$("#add").click(function(){
  //Add 10 to counter
  counter = counter + 15;
	// Display total
	$("#counter").text(counter);
});


//Subtract
$("#subtract").click(function(){
  counter = counter - 15;
  $("#counter").text(counter);
});


// Reset
$("#reset").click(function(){
  counter = 0;
  $("#counter").text(counter);
});
body{
	font-size: 1.5em;
	font-family: 'Oswald', sans-serif;
  font-weight: 700;
}
.button_group{
  width: 100%;
  display: flex;
}
button {
	font-family: 'Oswald', sans-serif;	
	font-size: 1em;	
  font-weight: 300;
	border: 0;
	padding: 1em 2em;
  margin: 0.5em 0;
	width: 100%;
  background: rgba(0,0,0,0.1);  
  -webkit-transition:.2s;  
}
button:nth-child(2){
	margin: 0.5em;
}
button:hover{
  background: rgba(0,0,0,0.3);
}
button:active{
  background: rgba(0,0,0,0.5);
}
#add:active{
  	-webkit-transform:translateY(-1em);    
}
#subtract:active{
  	-webkit-transform:translateY(1em);    
}
#counter{
	font-size: 3em;
	text-align: center;
  width: 100%;
  display block;
  background: rgba(0,0,0,0.1);
  padding: 2em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter"></div>
<div class="button_group">
	<button id="subtract">- 15</button>
	<button id="reset">Reset</button>
	<button id="add">+ 15</button>
</div>

Sources:

Upvotes: 1

Alec von Barnekow
Alec von Barnekow

Reputation: 1001

You can use native time input:

<input type="time" step="900">

Try it:

<input type="time" step="900">

The disadvantage is that is bad supported on Firefox and Safari so you can use this as alternative:

<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="15" step="5">

Upvotes: 0

Related Questions