Javascript - disable buttons on value matched in input box - javascript

i am looking for solution i want to disable button if value of input box matched.
i got two buttons and an input box
<button type="button" name="buttonpassvalue" value="-1" onclick="showUser1(this.value)"><< Previous</button>
<button type="button" name="buttonpassvalue1" value="1" onclick="showUser2(this.value)">Next >> </button>
<input type="text" id="count" value="0"/>
i want to disable buttonpassvalue if input box (count) is zero and disable second button buttonpassvalue1 if value of (count) is 5
thanks for your help.

Made a JSFiddle for you!
http://jsfiddle.net/fRHm9/
Basically, you make a change event listener and, when it changes, grab the element whose id is equal to the input's value. I assigned the buttons ids of -1 and 1. Check out the fiddle.

Basically, you could achieve this quite easily using plain javascript. But, when using javascript in order to be able to find a specific element efficiently you will need to specify an id for that element. So I would recommend you to change your buttons so that they use id attributes as follows...
<button type="button" id="buttonpassvalue" name="buttonpassvalue" value="-1" onclick="showUser1(this.value)"><< Previous</button>
<button type="button" id="buttonpassvalue1" name="buttonpassvalue1" value="1" onclick="showUser2(this.value)">Next >> </button>
<input type="text" id="count" value=""/>
Note, that I added id attributes to each buttons. Now, you can run attach this javascript function to the keyup event of the text input element...
var input = document.getElementById('count');
input.onkeyup = function(){
var buttonpassvalue = document.getElementById('buttonpassvalue');
var buttonpassvalue1 = document.getElementById('buttonpassvalue1');
var val = this.value.trim();
if(val == "0"){
buttonpassvalue.setAttribute("disabled","disabled");
buttonpassvalue1.removeAttribute("disabled");
}
else if(val == "5"){
buttonpassvalue.removeAttribute("disabled");
buttonpassvalue1.setAttribute("disabled","disabled");
}
else{
buttonpassvalue.removeAttribute("disabled");
buttonpassvalue1.removeAttribute("disabled");
}
};
I have created a JS Fiddler where you can see a quick demo. Also, note that this solution is using plain javascript.

Related

Update <input> value onchange

I have bunch of inputs like:
<input />
<input />
<input />
and a button which ads extra input
<button>Add Input</button>
The issue is that when a user put the text in the input(s) and add
additional input afterwards (i.e. press Add Input) the entered text in old inputs disappears.
JSFiddle:
<div id="inputs"></div>
<button onclick="document.getElementById('inputs').innerHTML += '<input /><br>'">Add Input</button>
So I decided to update <input> value attribute. I have tried with onchange but had no luck.
The code with errors and trials is super simple and looks like:
function change_value(el) {
document.getElementById('some-id').value = el.value
}
<input id="some-id" value="${this.value}" onchange="change_value(this)" />
Will be grateful for any suggestions about how to keep <input value up-to-date with user text.
It depends on what content you want to update. You can find a snippet below, that works oninput and updates the textContent of a span.
const input = document.getElementById('some-id')
const display = document.getElementById('updated')
input.addEventListener('input', function(e) {
display.textContent = this.value
})
<input id="some-id" value="" /><br /><br />
<div>Updated value: <span id="updated"></span></div>
EDIT
A new snippet may clear things up a bit.
const btnAdd = document.getElementById('add')
btnAdd.addEventListener('click', function(e) {
var input = document.createElement('input');
input.type = "text";
document.getElementById('inputs').appendChild(input)
})
<div id="inputs"></div>
<button id="add">Add Input</button>
Use createElement() instead of innerHTML.
Try using innerHtml like this
document.getElementById('some-id').innerHtml instead of value
https://www.w3schools.com/js/js_htmldom_html.asp
Actually, it is not possible this way, maybe with some tricks like with any change store the value and create new input with the new value or change the innerHtml, maybe it works.

jQuery disable textbox input for type number

I have a HTML markup which looks like following:
<input type="number" step="0.1" min="0" max="100" value="1" class="form-control breakEvenInput" style="width:150px" /><br />
<button type="submit" class="btn btn-primary saveBreakEven">Save</button>
As you can see the input is of type "number"... What I was thinking (if it's possible) to do here is to disable the end user so that he/she is not able to input anything into the textbox, but rather enable the user just to have that side scrool up/down arrows that he gets when browser renders the HTML input as type of "number".
I've tried to add "disabled" or "readonly" properties to HTML input but that didn't give me the desired result. When I do it like that then the entire textbox is disabled...
I was thinking that this might be done somehow via jQuery? Can someone help me out ?
P.S. So i'd like to disable the input into the textbox via keyboard, but still leave the up/down arrows in textbox for the user to change the value, so that the user can't enter anything they want , let's say 99999999999 number.. ?
One of the things you can do is to prevent the keydown event.
$(function() {
$('input').on('keydown', function(e) {
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="0.1" min="0" max="100" value="1" class="form-control breakEvenInput" style="width:150px" /><br />
<button type="submit" class="btn btn-primary saveBreakEven">Save</button>
This way you keep the arrows active, but disable keyboard keys.
Inside the event object (e), you can also check what key was pressed (if you want to support backspace or arrows for example).
An issue you will have is different browsers support and render type="number" differently. I would suggest a span element for the number readout (ff you need to have it as an input, I would hide it), and use styled buttons or elements to increase, decrease the number and update the input box. This will give a uniform user experience across browsers.
<!--style these how you want-->
<span id="number">0</span>
<button id="add>Up</button><button id="sub">Down</button>
<script>
var step = 1;
var output = $('#number');
var up = $('#add');
var sub = $('#sub');
up.add(sub).on('click', function() {
var num = output.val();
num += ( $(this).attr('id') == 'add' ) ? step : (-1 * step);
if( isNumValid(num) ) {
output.val(num);
} else { <!-- error reporting here --> }
}
function isNumValid(num) {
<!-- run validations here, integer, float, positive, etc -->
return true/false;
}
</script>
$(function() {
$('input[type=number]').on('keydown', function(e){
e.preventDefault();
});
});

javascript onclick radio clear textbox

I would like to clear a text box when a radio button above the text box is selected.
I have tried this:
function clearThis(target){
target = document.getElementById(target);
target.value = "";
}
<input type="radio" name="not_req" id="clear_req" value=""
title="Click here to clear the No Auth need flag"><span id="clear" onclick = 'clearThis("claims")' >Clear
The box I would like to clear is
<input type="text" size="5" name="auth_for" id="claims" value="{$prior_auth->get_auth_for()}" title="Set the number of times no auth can be used">
Took most of this from http://jsfiddle.net/BMrUb/ but I can see that the example is clearing the adjacent text box. I would like to clear a text box not adjacent to the radio button.
As Gerald said place your onclick="" in the <input type="radio" ... >, not in the <span>.
The problem is that it's the sibling input element that needs its value clearing, not the span, even though you only want it to clear when people click on the span element. So the example code below does this. You're also best off decoupling your javascript from your HTML by using event listeners (and not using the old-fashioned onclick attribute).
var clearSpanEl = document.getElementById("clear");
clearSpanEl.addEventListener("click", function(e) {
var inputEl = e.target.previousElementSibling;
inputEl.value = "";
}, false);
<input type="text" name="search" id="search" value="I can be cleared" />
<span id="clear">Clear results</span>
I've forked your JSFiddle here, so you can see it working.

Javascript Radio Button Value in URL

I've read variations on this for a few days and can't find a working solution to what I want. And it's probably easier than I'm making out.
I have a set of radio buttons, and want to pass the checked value to part of a URL.
<input type="radio" name="link" value="one" checked="checked">One
<input type="radio" name="link" value="two">Two
<input type="radio" name="link" value="three">Three
And I want the value of whichever one is checked to be passed to a variable such as
dt which then passes to the Submit button which takes you to a url that includes text from the radio buttons.
<input type="button" value="OK" id="ok_button" onclick="parent.location='/testfolder/' + dt;>
But I'm struggling to find out how to get
var dt = document.getElementByName('link').value;
to work for me when I try and apply a for loop to make sure it's checked.
Does my onclick='parent.location.... in the submit button need to be in a function rather than part of the submit button? So the same function can grab the value of the radio button?
So I'm appealing to StackOverflowers for hopefully a bit of guidance... Thanks
First of you want to know which value your combobox has with this easy to use on-liner.
document.querySelector('[name="link"]:checked').value;
I suggest using event handlers to handle the javascript, so don't write it in the onclick attribute.
var btn = document.getElementById('ok_button');
btn.addEventListener('click', function(){ /*handle validations here*/ })
jsfiddle
you can try below code
<input type="button" value="OK" id="ok_button" onclick="functionName();'>
JavaScript Code
<script type="javascript">
function functionName(){
var radios = document.getElementsByName('link'),
value = '';
for (var i = radios.length; i--;) {
if (radios[i].checked) {
value = radios[i].value;
break;
}
}
window.location.href='/testfolder/'+ value
}
</script>
var dt = document.getElementsByName('link')[0].value works for me
you can use it in either the inline onclick handler or a function you define
<input type="radio" id="1" name="link" onchange="WhatToDo()" value="one">One</input>
<input type="radio" id="2" name="link" onchange="WhatToDo()" value="two">Two</input>
<input type="radio" id="3" name="link" onchange="WhatToDo()" value="three">Three</input>
<script type="text/javascript">
function WhatToDo() {
var rButtons = document.getElementsByName('link');
for (var i = 0; i < rButtons.length; i++) {
if (rButtons[i].checked) {
alert(rButtons[i].value);
}
}
}
</script>
Maybe something like this. Use onchange and then loop through your radio buttons. Whilst looping look to see if the radio button is checked. Its a starting point.

jQuery value attribute selector not returning correct number of elements

I have a programme that generates a count after the key is up.
JQuery Code:
$('.today').keyup(function() {
var Presents = $('input[value="/"]:visible');
$("#counter").html( "Present: " + Presents.length );
});
HTML:
<input type="text" id="1" name="1" class="today" value="/">
<input type="text" id="2" name="2" class="today" value="/">
<input type="text" id="3" name="3" class="today" value="/">
<p id="counter"></p>
The counter tag will display 3 after first key up. When i change the value in the text boxes the value does not change in the counter box.
E.G. when i chance the value of text box 3 to x the tag should now contain the number 2. Currently this does not change.
You are using an attribute selector, but when you change the input value, it won't change the attribute; just the property. You can use filter() to get what you need:
$('.today').keyup(function() {
var Presents = $('input:visible').filter(function(){
return this.value == "/";
});
$("#counter").html( "Present: " + Presents.length );
});
JSFiddle
If you needed to update the attribute itself, you can do simply by adding the following to the top of your event handler:
$(this).attr('value',this.value);
JSFiddle
But that seems pretty messy to me. Also, I believe filter() will be faster than an attribute selector anyway.

Categories