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

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.

Related

javascript autoclick with condition

I want to make a form where if someone type the word ok in the input field, the button will be auto clicked. How can this be done?
<input type="text" id="text"><br><br>
<input id="autoclick" type="button" value="type ok">
Try this:
HTML:
<input type="text" id="text"><br><br>
<input type="button" id="button" value="type ok">
jQuery:
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').trigger('click');
}
})
// this block is for test
$('#button').on('click', function() {
alert('clicked');
});
Working example: https://jsfiddle.net/fnoL4j7m/1
You need to apply keyup event on the input box.
Every time something is entered, it will check if the input is "ok".
If so, a click event is triggered on the button.
$("#text").on('keyup', function(){
if ($(this).val() == 'ok') {
$('input[type="button"]').trigger('click');
}
});
Refer to this: https://jsfiddle.net/dts2aa5o/10/
Try this code:
<input type="text" id="text"><br><br>
<a href="#" id="autoclick">
<input type="button" id="button" value="type ok">
</a>
Jquery:
$('#text').keyup(function(){
if($(this).val()=='ok')
{
$( '#button' ).trigger( "click" );
}
});
you can do something like this :
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').click()
}
})

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

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

Jquery click, show and hide function

please help me with my snippet.. I have this code and I don't know what is wrong.. This is my code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</form>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
When I click next It seems does not go to the next form.. thank you all.
This may be due to some missing attibutes of your form
HTML
<form id="krishna">
<input type="text" readonly value="krishna" />
<br />
<button type='button' id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" />
<br />
<button type='button' id="prev">Previous</button>
</form>
Script
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function () {
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function () {
$("#radha").hide();
$("#krishna").show();
});
});
check here
You need to prevent the default action, which is the form submit. When you prevent the default action from happening, you will see the desired result
Check this fiddle
$(document).ready(function () {
$("#radha").hide();
$("#next").click(function (e) {
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function (e) {
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
P.S I am not sure why you are still using jquery 1.3.x.
Also, check the fiddle for the updated HTML
Because it is trying to submit the form. So you need to make that button type to button. It is "submit" by default in a form.
JSFidle Demo
<form id="krishna">
<input type="text" readonly value="krishna" ><br>
<button type="button" id="next">Next</button>
</form>
<form id="radha">
<input type="text" readonly value="radha" ><br>
<button type="button" id="prev">Previous</button>
</form>
Your code is fine but What is happening here that your submit button required post request. So you can prevent this behavior by e.preventDefault() function of jquery. I have updated the jquery code as below.
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function(e){
e.preventDefault();
$("#radha").show();
$("#krishna").hide();
});
$("#prev").click(function(e){
e.preventDefault();
$("#radha").hide();
$("#krishna").show();
});
});
visit the following link to get demo on jsfiddle :
http://jsfiddle.net/4N95Q/
This is how I did it.
http://jsfiddle.net/GnzWZ/2/
$('form button').click(function(e){
$("#radha, #krishna").toggle();
return false;
});
Notes:
return false is the jquery solutions for preventdefault.
You can simplify your selectors and optimize your code a little more.
Avoid making style changes that should be originally made in CSS.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="krishna">
<input type="text" readonly value="krishna" ><br>
<button id="next">Next</button>
</div>
<div id="radha">
<input type="text" readonly value="radha" ><br>
<button id="prev">Previous</button>
</div>
<script>
$(document).ready(function(e) {
$("#radha").hide();
$("#next").click(function() {
$("#radha").show();
$("#krishna").hide();
console.log("next click");
});
$("#prev").click(function() {
$("#radha").hide();
$("#krishna").show();
});
});
</script>
Working fine if you change
form
in the
div

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/

Categories

Resources