I use a captcha in my login form and I want to refresh the captcha when I click the captcha itself!but it doesn't work!
my html code:
<cite class="fr">
<img id="captcha_img" src="securimage/securimage_show.php" alt="点击图片刷新验证码" />
</cite>
my jquery code:
$('#captcha_img').click(function(){
//alert("hh");
$('#captcha_img').attr("src","securimage/securimage_show.php");
});
I also search some docs about this question and try some other ways,but it still doesn't work,can someone give me some ideas?
Both methods below should work ( uncomment one by one and try it ):
jQuery(function ($) {
$('#captcha_img').on( 'click', function() {
// $(this).attr( "src","securimage/securimage_show.php?"+Math.random() );
// $(this).attr( "src","securimage/securimage_show.php?"+new Date().getTime() );
});
});
Browser is probably caching image. Try this:
$('#captcha_img').click(function() {
var imageUrl = 'securimage/securimage_show.php?' + new Date().getTime();
$(this).attr('src', imageUrl);
});
DEMO
$(function () {
$('#foo').click(swapImages);
var secondImg = 'http://digital-photography-school.com/wp-content/uploads/2013/03/Acorn256.png';
function swapImages() {
var img = $("<img id='foo' src='" + secondImg + "' />");
$(this).replaceWith(img);
$(img).click(swapImages);
}
});
$('#captcha_img').click(function(){
//alert("hh");
$('#captcha_img').attr("src","securimage/securimage_show.php");
return false;
});
Or use e.preventDefault() like
$('#captcha_img').click(function(e){
e.preventDefault();
$('#captcha_img').attr("src","securimage/securimage_show.php");
//return false;
});
tell me if that works. In this case, return false will work just fine because the event doesn't need to be propagated.
Related
I tried to make a comment box, in which every user can delete their own comments.
Everything is good, less delete button. I can comment but when i click x button(delete btn), there is not posted data before success.
jquery-code
$(document).ready(function(){
$('.buton-stergere').each(function(){
var buton = this;
$(buton).click(function(){
stergere_com(buton.id);
});
});
});
function stergere_com(_id_comment){
$.post("/site/ajax/stergere_com.php", {
task: "stergere_com",
Serverside: true,
id_comment: _id_comment
}
).success(function(data)
{
console.log("succes");
});
}
php code
if(isset($_POST['task']) && $_POST['task'] == 'stergere_com'){
require_once $_SERVER['DOCUMENT_ROOT'].'/directoaredef.php';
echo "server side";
}
html btn
<ul>
<li id="<?php echo $comment->id_comment; ?>" class="buton-stergere">X</li>
</ul>
Try:
$(document).ready(function(){
$('.buton-stergere').each(function(){
var buton = $(this);
buton.click(function(){
stergere_com(buton.attr('id'));
});
});
});
function stergere_com(_id_comment){
$.post("/site/ajax/stergere_com.php", {
task: "stergere_com",
Serverside: true,
id_comment: _id_comment
}
).success(function(data)
{
console.log("succes");
});
}
and if you need var buton to be the Javascript this - instead of jQuery object $(this):
var buton = this;
use:
var buton = $(this)[0];
You don't need to use $.each, just use the button class for click event.
$(document).ready(function(){
$('.buton-stergere').click(function(){
stergere_com(this.id);
//stergere_com($(this).prop('id')); //you can use this also
});
});
function stergere_com(_id_comment){
$.post("/site/ajax/stergere_com.php", {
task: "stergere_com",
Serverside: true,
id_comment: _id_comment
}
).success(function(data)
{
console.log("succes");
});
}
I am having name, email in content of a html page. i have to validate it on clicking continue button. and also the content in the content div has to change. how can i do both on clicking the continue button. help me with some suggestions. thanks.
am using the following code for changing div content.
<script>
$(document).ready(function () {
$("#button").click(function () {
$("#content").load("<?php echo base_url().'survey/categories' ?>");
});
});
$(document).ready(function () {
$("#button1").click(function () {
$("#content").load("<?php echo base_url().'survey/budget_overview' ?>");
});
});
</script>
As i understand your question, i think what you want is to do the two tasks at the same time on click of the button. So here's some sample code assuming this is what you want. If you have any doubts just ask. And i have added just sample Email Validation Using RegExp in JavaSript at the end of the code as a function.. Get the idea, Hope this helped you,,
//
$(document).ready(function() {
//Button1 Click
$("button").click(function(){
//initialize inputs here
var email =$("#email").val;
var input1=$("#input1").val;
//Validate Inputs Here
if(IsEmail(email)==true && input1!=""){
return true
}
else{
return false;
}
//Loading the first content after validating inputs
$("#content").load("<?php echo base_url().'survey/categories' ?>");
//To Trigger the other button
$('#button1').trigger('click');
});
//Button1 Trigger Will fire Click event
$("#button1").click(function () {
$("#content").load("<?php echo base_url().'survey/budget_overview' ?>");
});
});
//Email Validation In JavaScript
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
I think the problem is with your syntax. You have to specify a file URL in the load method like this:
$(document).ready(function(){
$("form").submit(function(){
$("#content").load("myfile.php");
return false;
});
});
You can have a look on the load documentation.
I have a link that opens a modal when clicked, however that element also has a data-id="#id here" attribute that I need to grab so I can pass it to my php script for processing. How can I accomplish this?
My JS code:
$(document).ready(function() {
$('#edit_general').click(editModal);
});
function editModal(event)
{
var modal = $('#editModal');
modal.modal({
show: true
});
}
My html:
<li><a id="edit_general" href="#editModal" data-uid="<?php echo $u->id; ?>">Edit General</a></li>
I tried using the this keyword but it didn't work.
How can I accomplish this?
Try this: Demo http://jsfiddle.net/szS2J/1/ or http://jsfiddle.net/ug7ze/
$(this).data('uid')
Hope it fits the cause :)
like this:
$('#edit_general').click(editModal);
$(this).data('uid')
full
$(document).ready(function() {
$('#edit_general').click(editModal);
});
function editModal(event) {
alert($(this).data('uid'));
var modal = $('#editModal');
modal.modal({
show: true
});
}
You can get the value using the attr method: $(this).attr('data-uid')
Like this stored in data_id.
$(document).ready(function() {
$('#edit_general').click(function() {
var data_id = $(this).data('uid');
var modal = $('#editModal');
modal.modal({
show: true
});
});
});
I have a form with number of submit type as images. Each image has a different title. I need to find out the title of the clicked image. But my click function inside form submit is not working.
My form is:
<form action='log.php' id='logForm' method='post' >
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" title="<?=$url;?> id="<?="image".$j?> class="images" />
<?
}
?>
</form>
Jquery:
$("#logForm").submit(function(e)
{
$(".advt_image").click(function(event) {
var href=event.target.title;
});
var Form = { };
Form['inputFree'] = $("#inputFree").val();
// if($("#freeTOS").is(":checked"))
Form['freeTOS'] = '1';
$(".active").hide().removeClass('active');
$("#paneLoading").show().addClass('active');
var url="http://"+href;
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
setTimeout( function() { location=url }, 2500 );
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
How can I get the title value of clicked image inside this $("#logForm").submit(function())?
How can I use the id of clicked image for that?
You can use event.target property
$("#logForm").submit(function(e)
alert($(e.target).attr('title'));
});
http://api.jquery.com/event.target/
[UPDATE]
I just realized it wouldn't work. I don't think there is a simple solution to this. You have to track the click event on the input and use it later.
jQuery submit, how can I know what submit button was pressed?
$(document).ready(function() {
var target = null;
$('#form :input[type="image"]').click(function() {
target = this;
alert(target);
});
$('#form').submit(function() {
alert($(target).attr('title'));
});
});
[Update 2] - .focus is not working, but .click is working
http://jsfiddle.net/gjSJh/1/
The way i see it, you have multiple submit buttons. Instead of calling the function on submit, call it on the click of these buttons so you can easily access the one the user chose:
$('input.images').click(function(e) {
e.preventDefault(); //stop the default submit from occuring
alert($(this).attr('title');
//do your other functions here.
});
// Runtime click event for all elements
$(document).on('vclick', '.control', function (e) { // .control is classname of the elements
var control = e.target;
alert(e.currentTarget[0].id);
});
if you are not getting proper message in alert, just debug using Firebug.
Check following code you can get the title of clicked image.
Single click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").click(function(event) {
alert(event.target.title);
});
return false;
});
});
Double click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").dblclick(function(event) {
alert(event.target.title);
});
return false;
});
});
add following ondomready in your rendering page
$(document).ready(function(){
$("form input[type=image]").click(function() {
$("input[type=image]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
Now in your form's submitt action add follwing behaviour and yupeee!... you got it!....
$("#logForm").submit(function(e)
{
var title = $("input[type=image][clicked=true]",e.target).attr("title");
.....
.....
});
I have a div:
<div id="test" style="width:auto; height:auto;">
</div>
And a function:
$(function() {
$("#test").attr("contentEditable", "true");
$("#test")
.attr("tabindex", "0")
.keydown(function(){ alert(1); return false; })
.mousemove(function(){ alert(2); return false; });
});
How can I implement this code in JavaScript without including the JQuery library?
You can do it like this in javascript without using jquery, Demo available here JsFiddle
You can put it in onload method of body then it will call onload of body or just put it in script section below all controls without putting it in function then it will call when document is ready like jquery method $().ready();
var test = document.getElementById('test');
test.setAttribute("contentEditable", "true");
test.setAttribute("tabindex", "0");
test.onkeydown = function(event) { alert("KeyDown");}
test.onmousemove = function(event) { alert("MouseMove");}
function runme() {
var elm = document.getElementById("test");
elm.contentEditable = "true";
elm.tabIndex = 0;
elm.onkeydown = function() { alert(1); return false; };
elm.onmousemove = function() { alert(2); return false; };
}
if(window.addEventListener)
window.addEventListener("load", runme, false);
else
window.attachEvent("onload", runme);
Adil has the right idea, but to improve upon it a bit, you could store the element in a variable so you do not have to make a call to get the element every time. So I would change it to look something like this:
var t = document.getElementById('test');
t.setAttribute("contentEditable", "true");
t.setAttribute("tabindex", "0");
t.onkeydown = function(event) { alert("KeyDown");}
t.onmousemove = function(event) { alert("MouseMove");}
Upvoted Adil for beating me to it and for providing the jsfiddle link :)
updated: nevermind, since you just updated your post