activate button after another button click in javascript - javascript

I have three button are after clicking on one button,second has to access the click and then the third .when i click on the third button it should not work
<input type="button" value="button" id="one" onclick="show()" action="">
<input type="button" value="button" id="two" onclick="show1()">
<input type="action" value="button" id="three">
<script>
function show{
}
</script>

Initially disable second and third button using :
<input type="button" value="button" id="two" onclick="show1()" disabled="disabled"/>
<input type="action" value="button" id="three" disabled="disabled"/>
And Use this code :
function show()
{
document.getElementById('two').removeAttribute('disabled');
}
// And Same For Second Button Click
function show1()
{
document.getElementById('three').removeAttribute('disabled');
}

jQuery would be better here:
$('#one').click(function () { // on a click on the button with id 'one'
$('#two').trigger('click');// trigger the click on second, and go on
}
Using this method you can trigger events on other elements using an event on a particular element!

<script>
function show(){
$('#button1').attr('disabled',false);
$('#button2').attr('disabled',false);
}
function show1(){
$('#button2').attr('disabled',false);
}
</script>

Are you looking for this
$("input").click(function(){
$("input").attr('disabled','disabled');
$(this).next().removeAttr('disabled');
});
Demo

you can use Jquery to bind an event to the click.
and there do what you want:
$('#ButtonID').bind('click',function(){
$('#ButtonID2').show();
//or
$('#ButtonID1').removeAttr('disabled');//if you want it be shown but not enabled
});
this is for disableing the buttons:
$('#ButtonID').attr('disabled','disabled');

Related

Hide and show button in each click

I have 2 buttons. In one case the first button is 'disable' and in another case it's 'enable', but in one button no show with style display: none.
I use jQuery for in the first case. I click over the enable button and show the disable button. The next time the disable button hide and show other time the button enable.
The script doesn't work correctly because it only works one time in each case and finally stops.
I have link for testing: https://jsfiddle.net/onfynvfk/5/
The script is this :
jQuery(document).ready(function() {
jQuery(".but_1").click(function() {
jQuery(".but_1").hide("2");
jQuery(".but_2").show("1").delay(1, function() {
jQuery(".but_2").hide("2");
});
jQuery(".but_2").hide("2");
jQuery(".but_1").show("2");
});
});
The buttons these :
<input name="enviar" type="submit" disabled="disabled" id="c_input_submit" class="but_2" style="display:none;" value="Send Hide" />
<input name="enviar" type="submit" id="c_input_submit" class="but_1" value="Send Normal" />
Thanks for the help.
Is this along the lines of what you're looking for?
https://jsfiddle.net/1zv3ty0u/
$(document).ready(function() {
$(".but_1").click(function() {
$(".but_1").hide();
$(".but_2").show();
});
$(".but_2").click(function(){
$(".but_2").hide();
$(".but_1").show();
});
});
And html:
<input name="enviar" type="submit" id="c_input_submit" class="but_2
style="display:none;" value="Send Hide" />
<input name="enviar" type="submit" id="c_input_submit"
class="but_1" value="Send Normal" />
By the way, $() is equal to jQuery() and the former is typically used to improve code readability.
JSFiddle: https://jsfiddle.net/uqf0qhp6/
If you have a class in your css, named hide, you can do this very easily:
$('.but_1, .but_2').click(function(){
$('.but_1, .but_2').toggleClass('hide');
});
and your hide class would simply: {display:none;} and start out attached to one of the buttons (whichever you want to be default state).
I think this may be closer to your requirments:
<input class="js-btn-one" value="Button One" type="button" />
<input class="js-btn-two" value="Button Two" type="button" />
$(document).ready(function()
{
$('.js-btn-two').hide();
$('.js-btn-one').click(function()
{
$('.js-btn-two').show();
if($('.js-btn-two').is(":visible"))
{
$('.js-btn-two').prop( "disabled", false );
}
$(this).prop( "disabled", true );
});
$('.js-btn-two').click(function()
{
$('.js-btn-one').prop( "disabled", false );
$(this).prop( "disabled", true);
});
});

Calling a function of a button from another button

I have a complicated case here, but below is an example just to make it simple.
I have two buttons, each with their own onClick function. I want to call the onClick function of button A when I click on button B.
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
Note that the event can be onClick() or onMouseUp()
p.s. I have to do it using only javascript. (NO jQuery). Thanks
<input type="button" onclick="fnc()"/>
<input type="button" id="message" onclick="alert('ok')" />
<script type="text/javascript">
function fnc()
{
document.getElementById("message").click();
}
</script>
are you looking for this?
<html>
<head>//I guess something like setTimeout(function,timeInMilliseconds)
<script language = "javascript">
function sayHiA(){
var v = document.getElementById('buttonB').getAttribute("onClick");
setTimeout(v,0);
}
function sayHiB(){
document.getElementById('para').innerHTML = 'wrote';
}
</script>
</head>
<body>
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="sayHiA()"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB()"></input>
<p id = "para">
Write Here
</p>
</body>
</html>
function sayHiB() {
sayHiA();
}
Did you tried this with an external js ? This is quite the most basic thing you can do in javascript.
I made you a jsfiddle : http://jsfiddle.net/pjDVP/4/
The html :
<input id='bta' type='button' value='button a'></input>
<input id='btb' type='button' value='button b'></input>​
The js (with jquery laoded) :
$(function(){
$('#bta').click(function(){aORbClick();});
$('#btb').click(function(){aORbClick();});
})
function aORbClick(){alert('I clicked a or b');}
just call function sayHiA from sayHiB or call it after.
Call from sayHiB
function sayHiB()
{
sayHiA();
}
or after
<input id="buttonB" type="button" value="BUTTON B" onClick="sayHiB(); sayHiA();"></input>
or easier way is to use jQuery, so you can do this
function sayHiB(){
if($('#id-of-a').attr('onclick'))
$('#id-of-a').click();
else if ($('#id-of-a').attr('onmouseup'))
$('#id-of-a').mouseUp();
}
function sayHiB(){
$('#buttonA').click();
}
Raw JS:
function sayHiB(){
var buttonA = document.getElementById('buttonA');
buttonA.onclick.apply(buttonA); // in onclick function you can get buttonA as 'this'
}
I'd probably make a generic function that switches on the button's name/id to figure out what to do - this would also make your code work independent of the event attribute used to call the function.
HTML:
<input id="buttonA" type="button" value="BUTTON A" onMouseUp="myFunc(this)"></input>
<input id="buttonB" type="button" value="BUTTON B" onClick="myFunc(this)"></input>
JavaScript:
function myFunc(elem){
switch(elem.id){
case 'buttonA':
sayHiA();
break;
case 'buttonB':
sayHiB();
sayHiA();
break;
}
}
This would also help with any DOM manipulation you might need as the button which was clicked is passed to the generic function myFunc, allowing you to quickly access other attributes or nearby elements.

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially
You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements
try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});
Here's an example using toggle:
http://jsfiddle.net/x5qYz/
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});
$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});
Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.

Validate a textbox using JQuery

I have TextBox and a Button
first the button is in disabled position
When the user starts typing the text in textbox
the button should be enabled
How can i achieve this using JQuery or Java Script
Seems like you are a newbie to jQuery. I would say you start with jQuery Tutorials and then move on to jQuery Validate. If you prefer books to start with, you can pick up a copy of jQuery in Action.
you can try with this also
<input type='text' id='textbox'>
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click">
$("#textbox").keyup(checkForm).focus(checkForm);
function checkForm()
{
if($("#textbox").val()=='')
{
$("#change").addClass("button-disabled").removeClass("button");
$("#change").attr("disabled","disabled");
}
else
{
$("#change").removeClass("button-disabled").addClass("button");
$("#change").removeAttr("disabled");
}
}
<input type='text' id='textbox'>
<input type="button" id="button'" value="click me">
$('#button').attr('disabled', 'disabled');
$('#textbox').change(function(){$('#button').removeAttr('disabled')} );
<input type="text" id="myText">
<input type="submit" id="myButton" disabled="disable"/>
jQuery(function(){
jQuery('#myText').bind('keypress',function(e){
if((jQuery(e.target).val()+"").length>0)
{
jQuery('#myButton').removeAttr('disabled');
}
else
{
jQuery('#myButton').attr('disabled','disable');
}
});
});
<input type='text' id='thetext' value=''>
<input type='button' disabled='disabled' id='thebutton' value='the button'>
$(document).ready(function(){
$('#thetext').change(function(){
$('#thebutton').removeAttr('disabled');
});
});
Read up on the jQuery API : http://api.jquery.com/
HTML:
<input type='text' id='textbox'>
<input type="button" id="mybutton" value="click me">
JS:
$(document).load(function() {
$('#mybutton').attr('disabled', 'disabled');
}
$('#textbox').change(function() {
$('#mybutton').removeAttr('disabled');
}
Update: regarding the use of jQuery w/ ASP.NET, keep in mind that ASP.NET outputs standard HTML once the page is rendered, so the above code would work similarly, except you need to figure out the ID's of the textboxes generated by ASP.net. See this link for further explanation on this:
http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/

jQuery selecting and filtering elements inside a div

I have a problem with selecting and filtering elements inside a div.
HTML :
<div id="wrapper">
<input type="text" value="you can edit me">
<input type="button" value="click me">
</div>
jQuery :
$("#wrapper").children().click(function() {
alert("hi there");
});
The problem is I get alerted every time I click anything inside the div.
But my requirement is to alert only when the user clicks on the button.
I know that filtering the elements in jQuery is using :button
This is what I have tried :
$("#wrapper").children(":button").click(function() {
alert("hi there");
});
and
$("#wrapper").children().filter(":button").click(function() {
alert("hi there");
});
It didn't work
Anyone know how to do this?
$("#wrapper input[type=button]").click(function() {
alert("hi there");
});
use id for a specific button-
<div id="wrapper">
<input type="text" value="you can edit me">
<input type="button" id='btnMyButton' value="click me">
<input type="button" class='btnClass' id='btnMyButton2' value="click me 2">
<input type="button" class='btnClass' id='btnMyButton3' value="click me 3">
</div>
$('#btnMyButton').click(function(){
alert("hi there");
});
For all buttons in the div, follow John's answer. Use class for some buttons-
$('.btnClass').click(function(){
alert("all class");
});
btw, i like to put my all jquery function inside ready function like-
$(document).ready(function(){
});
How about
$("#wrapper :button").click(function() {
alert("I love Imogen Poots");
});
See this
Try this:
$("#wrapper > input[type=button]").click(function() {
alert("hi there");
});

Categories

Resources