If I have three functions A(),B(),C()
<input type="button" value="text" id="Button" onclick="A()"></input>
What should I write in function A() to make it into
<input type="button" value="text" id="Button" onclick="B()"></input>
after I click the button.
Change attribute after click:
<input type="button" value="text" id="Button" onclick="B();this.setAttribute('onclick','A()')"></input>
http://jsfiddle.net/ye87k/
Related
I'd like to have two buttons that submit the same value (determined by the input field).
<form action="index.html">
<button type="submit" name="btn1">Btn1</button>
<button type="submit" name="btn2">Btn2</button>
<input type="text" value="50">
</form>
It should result in:
Btn1 => index.html?Btn1=50
Btn2 => index.html?Btn2=50
call index.html according to teh button clicked.
<script type="text/javascript">
function setButton1Value(){
//call index.html?Btn1=50
}
</script>
<script type="text/javascript">
function setButton2Value(){
//call index.html?Btn2=50
}
</script>
<form action="index.jsp" method="get">
<input type="text" value="50" name="input" id="input">
<button type="submit" name="btn1" id="btn1" onclick="setButton1Value()">Btn1</button>
<button type="submit" name="btn2" id="btn2" onclick="setButton2Value()">Btn2</button>
</form>
Two buttons can not send the same value as only one is clicked at a time. For one button to send the value you can try this :-
<form action="index.jsp" method="get">
<input type="text" value="50" name="input" id="input">
<button type="submit" name="btn1" id="btn1" onclick="putValue()">Btn1</button>
<button type="submit" name="btn2" id="btn2" onclick="putValue()">Btn2</button>
</form>
<script type="text/javascript">
function putValue(){
document.getElementById('btn1').value=document.getElementById('input').value;
document.getElementById('btn2').value=document.getElementById('input').value;
}
</script>
I have two buttons. I want the second button to be disabled until the first button is clicked. How can I do this with JavaScript and CSS?
Here you go
document.getElementById('btn1').addEventListener('click', function() {
document.getElementById("btn2").disabled = false;
});
HTML:
<input type="button" id="btn1" value="button 1" />
<input type="button" disabled="disabled" id="btn2" value="button 2" />
Tested in Chrome.
Fiddle: http://jsfiddle.net/b41oskm4/
How to disable/enable button depending on whenever itemToAdd javascript property is empty or not
<input type="text" data-bind='value:itemToAdd, valueUpdate: "afterkeydown"' />
<input type="button" data-bind="click:$parent.addItem" value="add" />
here's jsfiddle
Thank you!
There is an enable binding in knockout for this:
<input type="button" data-bind="click:$parent.addItem, enable: itemToAdd" value="add" />
Here is fiddle: http://jsfiddle.net/M2xDF/36/
i have a website with 3 pages. each page has a form with two input fields. i am trying to make a popup number-keypad that will populate what ever input field called it. below is that base code i keep coming back to.
<html>
<head><title>test</title></head>
<body>
<script> function num(id) { return document.getElementById(id); } </script>
<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>
Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="num('num').value+=7;"/>
<input type="button" value="8" onclick="num('num').value+=8;"/>
<input type="button" value="9" onclick="num('num').value+=9;"/><br/>
<input type="button" value="4" onclick="num('num').value+=4;"/>
<input type="button" value="5" onclick="num('num').value+=5;"/>
<input type="button" value="6" onclick="num('num').value+=6;"/><br/>
<input type="button" value="1" onclick="num('num').value+=1;"/>
<input type="button" value="2" onclick="num('num').value+=2;"/>
<input type="button" value="3" onclick="num('num').value+=3;"/><br/>
<input type="button" value="X" onclick="num('keypad').style.display='none'"/>
<input type="button" value="0" onclick="num('num').value+=0;"/>
<input type="button" value="←" onclick="num('num').value=num('num').value.substr(0,num('num').value.length-1);"/>
</div>
</body>
</html>
is there a way of making one number key pad that i call from any page or do i need to make the above for each input?
thanks
One possible solution would be for you to add a javacript call into your header (by where you are currently calling the document.getElementById(id) call) that manipulates the DOM of that HTML, and simply inserts your div into it.
I'd recommend a shell div on each page for that element, then the javascript would just have to grab that div by the id ("keypad") and insert inner HTML.
Edit: as long as you share the javascript file between your 3 pages, you only have to implement the javascript once.
My html code is
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
<input type="button" class="buttonclose marleft fleft clrPric" value="X">
I gave jquery like
$('.clrPric').click(function(){
console.log($(this).index());
});
It shows only 7 in console. No other elements with this class.
I want to get the number of the clicked button.
Thanks in advance.
You need to do this:
$('.clrPric').click(function () {
console.log($(this).index('.clrPric'));
});
FIDDLE