jquery .animate() called on click anywhere on page - javascript

I have the below jquery. It all works correctly except.... if I input a value in "name=bidz" and then click anywhere on the page, this triggers the animation but nothing else. How do I get clicks outside of my submit button to stop triggering the animation?
Does this have something to do with first clicking in the input box, then adding the value, and then the follow click is a second change?
<form action="" method="post">
<div id="<?php echo $this->item['id']; ?>">
<div class="ab">
<label for="ab_input"><?php echo $this->translate('To get the auction started, you must enter a starting bid.'); ?></label>
<span class="auction_bid_container">
<input id="ab_input" type="text" maxlength="12"
class="middle nmr event-clear-focus"
name="bidz" value="Enter something" />
<input id="updateBidButton" type="submit"
class="button grey-button num-items-button"
name="bidz"
value="<?php echo $this->translate('submit'); ?>"/>
</span>
</div>
</div>
</form>
<div class="clear mb20"></div>
$('input[name="bidz"]').live('change', function () {
var bidz = this.value;
$.ajax({
type: 'post',
url: "?module=is&controller=index&action=syy",
dataType: "text",
data: 'bid=' + bidz + '&id=' + id,
beforeSend: function () {
$('.ab').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
console.log(bidz);
$('.ab').animate({
'backgroundColor': '#A3D1A3'
}, 300);
} else {
$('.ab').animate({
'backgroundColor': '#FFBFBF'
}, 300);
}
}
});
});

If you just want clicks outside of your submit button to stop triggering the animation, then you should attach the event handler to your submit button instead of text input. Something like this should work fine:
$('#updateBidButton').live('click', function (e) {
e.preventDefault();
var bidz = this.value;
$.ajax({
type: 'post',
url: "?module=is&controller=index&action=syy",
dataType: "text",
data: 'bid=' + bidz + '&id=' + id,
beforeSend: function () {
$('.ab').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
console.log(bidz);
$('.ab').animate({
'backgroundColor': '#A3D1A3'
}, 300);
} else {
$('.ab').animate({
'backgroundColor': '#FFBFBF'
}, 300);
}
}
});
});
Edit:
Also please remember that live() method was removed in jQuery 1.9, so consider replacing it with:
$(document).on('event', 'yourSelector', function() {
// your code hear
});
So in your case it would be:
$(document).on('click', '#updateBidButton', function() {
// ...rest of your code...
});
This will attach an event to the document object and then when you click an element it will check if the target is #updateBidButton, so it will work even if the html is generated dynamically.

Related

Change text of Input button after clicking on it

I have the following input HTML tag
<input type="submit" id="submitForm" value="Submit" class="btn btn-primary start" autocomplete="off" onclick="submitForm();" />
When I click on the submit button, it goes to the related JavaScript file and executes the function submitForm();
I would like to change the text of the submit form to "Please wait..." until the function is completed.
Is there a way this can be done?
This is how the submitForm() function looks like:
function submitForm() {
$("#submitForm").val("Please wait...");
if (formValidation() === true) {
submitFormInfo().done(function () {
$("#submitForm").val("Submit");
});
}
}
function submitFormInfo() {
return $.ajax({
cache: false,
url: "URLHERE"
error: function (xhr) {
},
success: function (result) {
},
async: false,
processData: false
});
}
Are you having asynchronus operation in submitform() ?
if yes then you can use following line
$("#submitForm").val("Please Wait");
You can use jquery please see:-
https://jsfiddle.net/swawrm1g/3/
I have removed:-
onclick="submitForm();"
and added:-
$('#submitForm').click(function(){
$(this).val('Please Wait...');
submitForm()
});
function submitForm() {
alert('Form submitted');
};
Simple javascript is enough to do this..
<script>
function submitForm(){
document.getElementById('submitForm').value="Please wait..";
}
</script>
<input type="submit" id="submitForm" onclick="submitForm()" value="Submit">
Use the beforeSend option on your ajax call, so in your submitForm() function, you can do something like this:
function submitForm() {
var submitForm = $("#submitForm");
if (formValidation() === true) {
$.ajax({
cache: false,
url: "URLHERE",
async: false,
type: 'post',
data: { somedata: 'here' },
beforeSend: function (){
submitForm.val("Please wait...").attr("disabled", "disabled");
},
success: function (data){
// do something
},
error: function (){
// do something
},
complete: function () {
// regardless of the response status (success/error)
// the codes below will be executed.
submitForm.val("Submit").removeAttr("disabled");
}
});
}
}

How to fix return Ajax in a div without return false

I'm working on a web application, and i have a problem with a return of Ajax.
I can see the result of the return of AJAX, but my problem is that this result appears and then disappears. I found a solution that is return false, the problem being that once the display is done and I return false, my div remains on the page but I can not reuse the button on which I made my onclick (to call my javascript function and so the ajax call).
If someone has a solution.
This is the code :
<input class="Admin-Bouton" type="submit" onclick="affOtp();return false" value="Générer" form="formParametres" />
<div id="syntheseOTP"></div>
function affOtp() {
$(function(){
$.ajax({
url: 'vue/ressources/affOtp.php',
type: 'POST',
dataType: 'html',
data: { idEmploye: nom },
success: function(msg) {
console.log(msg);
document.getElementById("syntheseOTP").innerHTML = msg;
},
error: function(resu, statut, erreur) {
console.log(erreur);
alert("papa");
}
});
});
};
That happen because the form will be submited and the page refresh, you could avoid that by using type button instead of submit :
<input id="Admin-Bouton" class="Admin-Bouton" type="button" onclick="affOtp();return false" value="Générer" form="formParametres" />
I suggest to attach the event click in the js code instead of inline-event onclick :
$('#Admin-Bouton').on('click', affOtp);
HTML will be like :
<input id="Admin-Bouton" class="Admin-Bouton" type="button" value="Générer" form="formParametres" />
Hope this helps.
Edit: Left out "return" before affOtp();
<input class="Admin-Bouton" type="submit" onclick="return affOtp();" value="Générer" form="formParametres" />
<div id="syntheseOTP"></div>
function affOtp() {
$(function(){
$.ajax({
url: 'vue/ressources/affOtp.php',
type: 'POST',
dataType: 'html',
data: { idEmploye: nom },
success: function(msg) {
console.log(msg);
document.getElementById("syntheseOTP").innerHTML = msg;
},
error: function(resu, statut, erreur) {
console.log(erreur);
alert("papa");
}
});
});
return false;
};
Since none of the answers are still working for you, I would recommend you to do following changes (keeping in mind you don't want to change type="submit").
<input id="AjaxButton" class="Admin-Bouton" type="submit" value="Générer" form="formParametres" />
<!-- remove onlick attribute and add a Id attribute in above line -->
<div id="syntheseOTP"></div>
Now make sure you add a click event handler in your scripts.
$('#AjaxButton').on('click',affOtp);
function affOtp(e) { // add e as input parameter
// removed unnecessary wrapper
e.preventDefault(); // this will now stop the click event.
$("#syntheseOTP").html("Loading...."); // add loading text into div
$.ajax({
url: 'vue/ressources/affOtp.php',
type: 'POST',
dataType: 'html',
data: { idEmploye: nom },
success: function(msg) {
console.log(msg);
$("#syntheseOTP").html(msg); //refactored to use jquery syntax
},
error: function(resu, statut, erreur) {
console.log(erreur);
alert("papa");
}
});
};

Google Recaptcha is not showing after click on radio button

I have two radio buttons. When I click into one of them to change the form fields, the captcha version 1 does not show anymore.
So, I have to click the refresh button to generate a new captcha image.
<input type="radio" name="data[Form][sv]" id="FormV1" value="1" /> V1
<input type="radio" name="data[Form][sv]" id="FormV2" value="2" checked="checked" /> V2
The jquery code is:
$(document).ready(function () {
$("#FormV1").bind("change", function (event) {
$.ajax({async:true,
beforeSend:function (XMLHttpRequest) {
$('#loading').show();
},
complete:function (XMLHttpRequest, textStatus) {$('#loading').hide()},
data:$("#FormularioSituacaoVeiculo1").closest("form").serialize(),
dataType:"html",
evalScripts:true,
success:function (data, textStatus) {
$("#search").html(data);},
type:"post",
url:"\/mysite\/theurl\/"});
return false;
});
$("#FormV2").bind("change", function (event) {
$.ajax({async:true,
beforeSend:function (XMLHttpRequest) {
$('#loading').show();
},
complete:function (XMLHttpRequest, textStatus) {
$('#loading').hide()
},
data:$("#FormV2").closest("form").serialize(),
dataType:"html", evalScripts:true, success:function (data, textStatus) {
$("#search").html(data);
},
type:"post",
url:"\/mysite\/url\/"});
return false;
});
function showRecaptcha(element) {
Recaptcha.create('hjfsdjklsdjklfsdjklfsdjklfjksdl', element, {
lang : 'en-gb',
theme : 'custom',
custom_theme_widget: 'recaptcha_widget',
callback: Recaptcha.focus_response_field
}
);
}
showRecaptcha('recaptcha_div');
How can I switch the form fields (V1 to V2) and generate the captcha automatically without having to click on the refresh button?
Today the captcha is not generated when I do click on the radio button. So I have to click on the refresh button to regenerate a captcha image.
Please check this working example (I have tried my best to make this example as close as possible to your situation):
$('input[name="data[Form][sv]"]').change(function(e) {
$.ajax({
async: true,
beforeSend: function(XMLHttpRequest) {
$('#loading').show();
},
complete: function(XMLHttpRequest, textStatus) {
$('#loading').hide()
},
data: $(this).closest("form").serialize(),
evalScripts: true,
success: function(data, textStatus) {
$("#search").html(data);
Recaptcha.reload();
},
dataType: "html",
type: "POST",
url: "https://httpbin.org/post"
});
return false;
});
function showRecaptcha(element) {
Recaptcha.create('6Ld3TPkSAAAAAPckREYZuVQ6GtjMQsD-Q5CkzNxj', element, {
lang: 'pt-BR',
theme: 'white',
custom_theme_widget: 'recaptcha_widget',
//callback: Recaptcha.focus_response_field
});
}
$(function() {
showRecaptcha('recaptcha');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<div id="recaptcha"></div>
<h4>Radio Inputs: </h4>
<form>
<input type="radio" name="data[Form][sv]" id="FormV1" value="1" />V1
<input type="radio" name="data[Form][sv]" id="FormV2" value="2" checked="checked" />V2
</form>
<h4>Ajax Post Result <span style="display:none" id="loading">Loading...</span>: </h4>
<div id="search">
</div>
Refresh codes are what you are looking for?
for v1:
Recaptcha.reload();
for v2:
grecaptcha.reset();

ajaxSubmit: Duplicate Entry on the database

I have a form and a input type file inside.
<form id='imageform' method='post' enctype='multipart/form-data' action='php/exec/add-message-image-exec.php' style='clear:both'>
<div id='imageloadstatus' style='display:none'><img src='assets/loader.gif' alt='Uploading....'/></div>
<div id='imageloadbutton'>
<div class='file-field input-field'>
<div class='btn'>
<span>Upload</span>
<input type='file' name='file' id='photoimg'/>
</div>
<div class='file-path-wrapper'>
<input class='file-path validate' type='text'>
</div>
</div>
</div>
</form>
It performs whenever i attach an image in the input file, and an ajax will handle it to submit it automatically and save it to the database.
$(document).ready(function () {
$('#photoimg').on('change', function () {
var A = $('#imageloadstatus');
var B = $('#imageloadbutton');
$('#imageform').ajaxSubmit({target: '#preview',
beforeSubmit: function () {
A.show();
B.hide();
},
success: function () {
A.hide();
B.show();
},
error: function () {
A.hide();
B.show();
}}).submit();
});
});
My problem is that it submits the image twice and save it to my database/table twice. But when i remove the .submit(); inside my script, it only perform once but there's a small modal-like window and another screen appeared whenever i attach an image/submit.
Remove 'action' and put it in an ajax POST request instead.
$(document).ready(function () {
$('#photoimg').on('change', function () {
var A = $('#imageloadstatus');
var B = $('#imageloadbutton');
$.ajax({
url: 'php/exec/add-message-image-exec.php',
type: 'POST',
data: $('#imageform').serialize(),
beforeSubmit: function () {
A.show();
B.hide();
},
success: function (data) {
//do something with data
//ex: console.log()
console.log(data);
A.hide();
B.show();
},
error: function () {
A.hide();
B.show();
}
});
});
});

Click button show div and hide same div after 5 seconds

I have an email submitting form and when a user submits, I would like to show a confirmation text below the input. After 5 seconds the confirmation text has to fade-out again.
this is my code
<div class="input-group newsletter-group">
<input type="text" class="form-control" id="email-to-submit">
<div id="submit-email" class="input-group-addon">go!</div>
</div>
<div id="email-submit-form">THANKS!</div>
<div id="invalid-email-warning" style="color: red; display: none;">Not an email address</div>
$(function() {
setTimeout(function() { $("#email-submit-form").fadeOut(1500); }, 5000)
$('#submit-email').click(function() {
var emailAddress = $('#email-to-submit').val();
if (validateEmail(emailAddress)){
$('#email-to-submit').val('');
$('#email-submit-form');
$.ajax({
type: "POST",
url: '/submitEmailAddress',
dataType: 'json',
data: JSON.stringify({'email': emailAddress})
});
} else {
$('#invalid-email-warning').show();
}
$('#email-submit-form').show();
setTimeout(function() { $("#email-submit-form").fadeOut(1500); }, 5000)
})
});
You can use jQuery delay()
$('#email-submit-form').fadeIn().delay(5000).fadeOut();
Try this..
$('#email-submit-form').fadeIn('slow', function () {
$(this).delay(5000).fadeOut('slow');
});
Write your timeout logic inside the if(){ condition or ajax success
$.ajax({
type: "POST",
url: '/submitEmailAddress',
dataType: 'json',
data: JSON.stringify({
'email': emailAddress
}),
success: function (response) {
$('#email-submit-form').show();
setTimeout(function () {
$("#email-submit-form").fadeOut(1500);
}, 5000)
}
});
Also,
if (validateEmail(emailAddress)){
$('#email-to-submit').val('');
$('#email-submit-form'); //this line
The third line does nothing, remove it.

Categories