javascript autoclick with condition - javascript

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

Related

Combine several events

I have a text field and a button. Either when the button is clicked or enter is hit, a function should be executed.
My approach works is intended. However, is it possible to combine those 2 functions (click and keypress), so that I only have 1?
$("button").click(function() {
getInput();
});
$("#name").keypress(function(e) {
if (e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
So I need to just append those events.
Here is a fiddle.
You can listen for multiple events using .on('listOfEvents')
Than you just need some additional rules to check when you need to run function.
$("button, #name").on('click keypress', function(e) {
if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
OK
</button>
function getInput(){
return $(".result").text($("input").val());
}
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="text" />
<button>ok</button>
</form>
<div class="result"></div>
you can wrap your input and button in a form and listen for a submit event on that form. Forms can be submitted by pressing enter in an input inside of them or clicking a button that is enclosed
HTML
<form action="">
<input type="text" />
<button>ok</button>
</form>
Javascript
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
#eltonkamami answer is one idea and my idea is to provide same class for both input field and button like this :
(But, this will trigger whenever input field is changed)
$(".same").bind("click keypress", function() {
getInput();
});
function getInput() {
console.log($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
OK
</button>
Hope it helps :)
We can differentiate a click and keypress by e.key or e.type parameters
Try this,
var getInput = function(e) {
if((e.which & e.which==13) || !e.key)
//e.key is a parameter for keypress event and not for click
alert($("#name").val())
}
$("button").click(getInput);
$("#name").keypress(getInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
Click
</button>
$("button,#name").on("click keypress",function(e) {
//alert($(e.currentTarget).html());
if (e.which == 13) {
getInput();
}else if(event.type == 'click'){
getInput();
}
});
function getInput() {
alert($("#name").val())
}

why doesn't listener activate?

I have the following html:
<form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post">
<input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения">
<input type="button" name="addMoney" value="Пополнить" class="btn">
</form>
and following js:
$(function () {
$('#OutSum').keypress(function (e) {
if (e.which == 13) {
alert(2);
return false;
}
});
$("input[name='add-money']").on("click",function(){alert(1);});
});
when I click on button - listener doesn't activate.
What do I wrong ?
JSFIDDLE
change add-money to addMoney in the line $("input.... So it should become:
$("input[name='addMoney']").on("click", function () {
alert(1);
});
Because you gave your input a name of addMoney in your HTML but in your JS, you are trying to access an input with a name of add-money.

To give a message regarding the users input in html textarea in jQuery/javascript

I want to make a user put input in tag and want to give him a message when he/she clicks the submit button that whether his/her input was right or wrong using jQuery/javascript.
eg: i ask them to write in the textarea and if their input is what i asked the answer should be success else failed, using jQuery/javascript.
Javascript beginner.
Thanks
Maybe this sample can get you going:
HTML:
<textarea id="text"></textarea>
<input type="submit" id="submit" value="button" />
JavaScript:
(function () {
var textarea = $('#textarea');
$('#submit').on('click', function (event) {
var value = textarea.val();
event.preventDefault();
if (value === 'value you want it to be') {
alert('yes');
} else {
alert('no');
}
});
}());
Of course you haven't given a lot of details but maybe this can get you started?
If you want check whether a user fill a field:
html:
<form action="#">
<input id="firstName" name="" type="text">
<input id="lastName" name="" type="text">
<input type="submit" value="submit" id="sub"></form>
</form>
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').on('submit',function(){
$("input[type='text']").each(function(){
var long=$(this).val().length
if(long==0){
var id=$(this).attr('id')
alert('you must fill the '+id+' field')
}
})
})
})
</script>
Try this
<input type="text" value="some text">
<p></p>
<script>
$( "input" ).keyup(function() {
var value = $( this ).val();
if (value === 'value you want it to be') {
$( "p" ).text("Correct");
} else {
$( "p" ).text("Wrong");
}
})
.keyup();
</script>

Jquery is not call on button click

i have a jquery for file selection
http://jsfiddle.net/parvathy/e8wr5/
please look the fiddle. when i am clicking on the text box, that jquery is worked .. but when clicking on the "browse" button that is not worked.i am using boot strap css for button and input text please help me..
<input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">
<button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
$('#file').change(function (e) {
var filename = $(this).val();
var ext = filename.split('.').pop().toLowerCase();
if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
alert('Only add Excel Files!');
}
else {
$('input[name="fake_section"]').val(filename);
}
});
});
Because you have 2 elements with the id fake_section, use class instead - when you use an id selector it selects the first element with the given id
<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>
then
$('.fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
Demo: Fiddle
Be attention on the ids, your mistake were the same id in two controls. Some IDEs help you with a warning when you have many controls with the same Ids.
<input type="text" name="fake_section" id="fake_section2" class="form-control" style="float:left;">
<button type="button" id="fake_section1" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section1').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});

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.

Categories

Resources