Hide and show button in each click - javascript

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);
});
});

Related

How to disable a button by default, but then enable it with javascript?

I have a text field with a counter next to it. But beneath that is the submit form, and I want it to be inactive (grayed out, unable to submit) unless they have typed 100 characters.
I'm using a jsfiddle which I found on here and adapted to demonstrate what I'm doing:
http://jsfiddle.net/xqyWV/396/
Does not seem to be working exactly right. First of all, it's not grayed initially... but when I begin typing, it then recognizes that there aren't 100 characters and it does disable.
But, my code should re-enable the button if the length is not less than 100, i.e. when it reaches or exceeds 100 characters. However, it does not. What am I doing wrong?
$("#field").keyup(function() {
el = $(this);
$("#charNum").text(el.val().length);
if(el.val().length < 100) {
$('#submit').attr('disabled','true');
} else {
$('#submit').attr('disabled','false');
}
});
You want this in your JS:
$('#submit').removeAttr('disabled');
and this in your HTML:
<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>
Demo: http://jsfiddle.net/xqyWV/398/
To fix your html you just need to add a disabled attribute to your submit button.
<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;" disabled="disabled" />
In you javascript the main issue is that you are setting the disabled attribute to the string "true" or "false". Change it to a Boolean true and false and you'll be all set.
$("#field").keyup(function(){
el = $(this);
$("#charNum").text(el.val().length);
if(el.val().length > 100){
$('#submit').attr('disabled', false);
} else {
$('#submit').attr('disabled', true);
}
});
JsFiddle: http://jsfiddle.net/xqyWV/400/
For completeness sake here is the same answer without jQuery:
HTML
<input type="submit" name="button" id="submit" value="do some stuff" disabled="disabled" style="float:left;width:160px;height:30px;"/>
JavaScript
document.getElementById('submit').removeAttribute('disabled');
Demo: http://jsbin.com/torug/1/edit
An easier way would just add an onclick:
<input type="submit" name="button" id="submit" value="do some stuff" style="float:left;width:160px;height:30px;"/>
and then in your <script> area, you can do:
document.getElementById('submit').setAttribute('onClick','functionname()');
By doing this you add an onClick so that the button can call a specific function.
By default the page will load it without an onClick. By adding the attribute you can the enable it.
Just add this in your HTML:
disabled="true"
... change it for this
<input type="submit" name="button" id="submit" disabled="true" value="do some stuff" style="float:left;width:160px;height:30px;" />
and add this in your JS:
$('#submit').removeAttr('disabled');

activate button after another button click in 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');

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/

How to catch the button elementId as a parameter into a function

I want to add three buttons on a web form. Each button has its own id. When I click a button, I want the content of a div to become visible and others to be hidden. However, now I use three functions that add as an event to each button. Is there a smart way to create one function and add the elementId as a parameter? I want to "trap" the requesting object.
function myCoolFunction(parameter) {
if(parameter=="button1") {
hilight("button1");
}
if(parameter=="button2") {
// do something else for example
}
}
Thanks,
Try this:
<input type="button" value="Click Me" id="button1" onClick="myCoolFunction(this.id);" />
If you're interested in jquery...
html
<div id="box_1"></div>
<div id="box_2"></div>
<input type="button" data-id="box_1" />
<input type="button" data-id="box_2" />
js
$("input:button").click(function(e) {
var id = $(this).attr("data-id"),
boxes = $(".boxes"),
boxes.hide().filter("#"+id).show();
e.preventDefault();
})
Using custom data attributes
Markup
<input type="button" value="button one" onClick="myCoolFunction(this)" data-related-div="div_one" />
<div id="div_one" />
<input type="button" value="button two" onClick="myCoolFunction(this)" data-related-two="div_one"/>
<div id="div_two" />
<input type="button" value="button three" onClick="myCoolFunction(this)" data-related-div="div_three" />
<div id="div_three" />
Script
function myCoolFunction(button) {
highlight(button.dataset.relatedDiv);
}
Note that if you add a new button you don't have to modify the javascript code.
Also, this might break in crappy browsers (e.g. IE).
Update (for those who didn't follow the original link):
The dataset attribute is (at the moment) Webkit only. Custom attributes can be accessed using getAttribute and setAttribute in all modern browsers though.

Categories

Resources