Set focus after an alert message in jquery - javascript

I'm trying to set the focus in a input after an alert box appear. I have problem to set the focus on my field, ref.
My code is simple:
Javascript
var toFix = true;
$( "#add" ).click(function(e) {
if(toFix){
if (confirm('Not valid')) $( "#ref" ).focus();
e.preventDefault();
}
});
HTML:
<input class="input-text submit" type="submit" id="add" name="submit" value="Add" style="text-align: center"/>
<input class="input-text" type="text" name="ref" id="ref">
EDIT:
Demo

Don't use a confirm:
var toFix = true;
$( "#add" ).click(function(e) {
if(toFix){
alert("fix it");
$( "#ref" ).focus();
e.preventDefault();
}
});
http://jsfiddle.net/stevemarvell/fEmfa/

Working code at JSFIDDLE.
Just remove if(tofix).

Related

.focus() not firing for elements added to the DOM with JQuery [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I'm trying to use .focus () after adding more input fields with jQuery, but it only works with the input field already present in HTML and not with the ones added.
For example, if I click on the input field that is in the form, an alert will appear, but if I add more input fields and click on them, nothing will appear.
Is there a solution?
Thanks! :)
$(document).ready(function(){
var cont = 1;
$( "#add-campo" ).click(function() {
cont++;
$( '<div class="form-group" id="campo'+cont+'"> <label>Campo: </label> <input type="text" name="titulo[]" placeholder="Digite aqui"> <button id="'+cont+'" class="btn-apagar"> - </button> </div>' ).appendTo( "#formulario" );
});
$('form :input').focus(function() {
alert( "Handler for .focus() called." );
});
$( "form" ).on( "click", ".btn-apagar", function() {
var button_id = $( this ).attr("id");
$( '#campo' +button_id+'' ).remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>ADICIONAR CAMPOS</h1>
<form id="add-pub" method="POST">
<div id="formulario">
<div class="form-group">
<label>campo: </label>
<input type="text" name="titulo[]" placeholder="Digite aqui">
<button type="button" id="add-campo"> + </button>
</div>
</div>
<div class="form-group">
<input type="button" name="PubRot" id="PubRot" value="PUBLICAR">
</div>
</form>
Change this...
$('form :input').focus(function() {
To this...
$(document).on('focus', 'form :input', function() {
This will cause all future-created elements to retain that binding. These are called Delegated Event Handlers. The jQuery POD explains both the problem and the solution...
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated event handlers to attach event handlers....
The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready. (Source: jQuery on Handler Documentation.)
Full working demo with your code sample...
$(document).ready(function(){
var cont = 1;
$( "#add-campo" ).click(function() {
cont++;
$( '<div class="form-group" id="campo'+cont+'"> <label>Campo: </label> <input type="text" name="titulo[]" placeholder="Digite aqui"> <button id="'+cont+'" class="btn-apagar"> - </button> </div>' ).appendTo( "#formulario" );
});
$(document).on('focus', 'form :input', function() {
alert( "Handler for .focus() called." );
});
$( "form" ).on( "click", ".btn-apagar", function() {
var button_id = $( this ).attr("id");
$( '#campo' +button_id+'' ).remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>ADICIONAR CAMPOS</h1>
<form id="add-pub" method="POST">
<div id="formulario">
<div class="form-group">
<label>campo: </label>
<input type="text" name="titulo[]" placeholder="Digite aqui">
<button type="button" id="add-campo"> + </button>
</div>
</div>
<div class="form-group">
<input type="button" name="PubRot" id="PubRot" value="PUBLICAR">
</div>
</form>

creating a display popup message in jquery if both the values are same in two input filed

How can i create in j query or java script if both the input values are same display popup message (That both the values are same) bootstrap please show with example.
You can do like this in html:
<input class="text" id="text1" type="text">
<input class="text" id="text2" type="text">
And using jQuery:
$("input.text").on('change paste input', function(){
if($("#text1").val()==$("#text2").val()){
alert("Equal");
}
});
You can find what you seek in this thread. It has done with id and the keyup event listner. Apart from that use jQuery will make that more easier.
$( "#text1" ).bind( "keyup", function() {
testpassword2();
});
$( "#text2" ).bind( "keyup", function() {
testpassword2();
});
function testpassword2() {
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
if ($("text1").val() == $("text2").val())
text2.style.borderColor = "#2EFE2E";
else
text2.style.borderColor = "red";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input type="text" id="text1" size="30">
<input type="text" id="text2" size="30">
</body>

Trigger on click of submit button

I'm trying to trigger a short script click of the following submit button. It should add the "loading" css when the purchase button is clicked. The code will be loaded using Googletagmanager only on this page. The code I am currently attempting is:
<script>
jQuery( document ).ready( function( $ ) {
$( '.form-row.place-order' ).click( function() {
$( this ).addClass( 'loading' );
});
});</script>
Here is the html
<div class="form-row place-order">
<input type="submit" class="button alt"
name="woocommerce_checkout_place_order" id="place_order" value="Finalizar
compra" data-value="Finalizar compra">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="6df1de1da5"><input
type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review">
</div>
I've also tried it with #place_order instead of .form-row.place-order however in both cases without sucess. Does anybody have an idea what I can?
Thanks for your help.
Best regards,
Your code works fine check it out. I think you should check your css class is doing what you mean to do.
.loading input{
color : white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery( document ).ready( function( $ ) {
$( '.form-row.place-order' ).click( function() {
$( this ).addClass( 'loading' );
});
});</script>
<div class="form-row place-order">
<input type="submit" class="button alt"
name="woocommerce_checkout_place_order" id="place_order" value="Finalizar
compra" data-value="Finalizar compra">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="6df1de1da5"><input
type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review">
</div>
I think you should wait for DOM, and just use normal javascript like below
Or maybe your submit is too fast and does not show the animation?
<script>
jQuery( document ).ready( function( $ ) {
$('#place_order').click(function(e) {
$(this).addClass('loading');
});
})();
</script>

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

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>

Categories

Resources