I've created a contact form with validation and was trying to bolt on a help function whereby someone clicks on the question mark and a div with the explanation pops up.
I found a way to do it using a variable and "this" selector which seemed to work fine but it's stopped working and I can't seem to prevent the default # behaviour.
Having looked at similar questions, nothing has indicated what the problem might be. Here is the function:
$(function() {
//show/hide
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
var divname= this.name;
$("#"+divname).toggle();
return false;
});
});
jsFiddle link:http://jsfiddle.net/dvmac/dpVzL/2/
The # selector selects based off of id. If you want to select off of name, you need the attribute slector: '[name="' + divname + '"]'
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
var divname= this.name;
$('[name="' + divname + '"]').toggle();
return false;
});
An even better way is to just to do this: $(this)
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
$(this).toggle();
return false;
});
And if you have dynamically created elements, then you may want to try this:
$(document).on('click', 'a.form-question-help-link', function(e) {
$(this).toggle();
e.preventDefault();
});
use $(this).attr('name') or $(this).prop('name').
Check this fiddle.
should be $(this) instead of this
$(function() {
//show/hide
$('a.form-question-help-link').click(function(event) {
event.preventDefault();
var divname= $(this).name;
$("#"+divname).toggle();
return false;
});
});
Related
Not great with Js so looking for some help with some existing code.
I have the following anchor
<span>Add</span>
I am getting a warning regarding the 'onclick' event where its telling me that i dont have keyboard equivilant handler for the the onclick="return false; I have done some research and i can prevent this warning by using preventDefault. if i put this in a script tag in the page then it works the same and i think it will get rid of the issue.
$("a.addrom").click(function(e) {
e.preventDefault();
});
However, i would prefer to add it to the existing js but im having a hard time working out whats going on. I am trying to add it to the click event.
setupRooms: function (settings) {
//hide all age fields
$(settings.agesSelector, settings.hotelSearchDiv).hide();
//hide all except first
$(settings.roomsSelector + ":not(:first)", settings.hotelSearchDiv).hide();
$('select', settings.hotelSearchDiv).prop('selectedIndex', 0); //set all to 0
$(settings.addRoomSelector, settings.hotelSearchDiv).on('click', function () {
methods.addRoom(settings);
});
$(settings.removeRoomSelector, settings.hotelSearchDiv).on('click', function () {
var id = $(this).data('id');
methods.removeLastRoom(settings, id);
});
$(settings.childrenNumberSelector, settings.hotelSearchDiv).on('change', function () {
methods.handleChildrenChange(settings, $(this));
});
},
Edit* This code worked for me thanks to #patrick & #roberto
$(settings.addRoomSelector, settings.hotelSearchDiv).on('click', function (e) {
e.preventDefault();
methods.addRoom(settings);
});
If i understood correctly you want to add that on your click handlers:
$(settings.addRoomSelector, settings.hotelSearchDiv).on('click', function (e) {
e.preventDefault();
methods.addRoom(settings);
});
$(settings.removeRoomSelector, settings.hotelSearchDiv).on('click', function (e) {
e.preventDefault();
var id = $(this).data('id');
methods.removeLastRoom(settings, id);
});
Should be enough for having the prevent default in your click handlers.
Cheers
I am adding input fields on keystroke, by using an example from the answer for this question. This is my example. I was trying in various ways to remove field if user deletes content from it, so that there are always fields that have some content and one last empty field for adding more, but I just can't find a solution.
This is the code:
$(document.body).on("input", ".external-media-input:last", function () {
var inputID = (parseInt($(this).attr('id')) + 1);
$(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
});
You can use on('blur') or .on('focusout')
//...
.on('blur', ".external-media-input:not(:last)", function () {
if(!$(this).val()) $(this).remove();
});
JSFiddle
You can use also on('keyup')
$(document.body).on("keyup", ".external-media-input", function(){
if($(this).val() == '')
$(this).remove();
});
here is your fiddle: https://jsfiddle.net/bembvptx/2/
In your style add one more event:
$(document.body).on("input", ".external-media-input", function () {
if (!$(this).val())
{
$(this).remove();
}
});
I'd like to know how to append link values to an input box. But I can't figure out how to append a new link value to the old one, separated by a space [Fiddle].
<input id="a_input_id" type="text">
<a href="" class="special_field_link">#ABC<a>
<a href="" class="special_field_link">#DEF<a>
<script>
$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($(this).html() + '');
return false;
});
});
Should I use something like:
var cur_val = $('#a_input_id').val($(this).html() + '');
if(cur_val)
$('#a_input_id').val(cur_val + "," + new_val);
else
$('#a_input_id').val(new_val);
Your help would be appreciate.
You can use like this,
$('.special_field_link').click(function (e) {
e.preventDefault();
$('#a_input_id').val($('#a_input_id').val()+" "+$(this).html());
});
Use event.preventDefault() to prevent the default click event of anchor. In each click you need to get the current input value, if you want to retain those. In your code, it was overwriting the old with the new values.
Fiddle
If you want to append the value, you could do:
var input = $('#a_input_id');
input.val(input.val() + $(this).html());
And note .live is deprecated, you'd better use .on instead if you switch to a new version of jQuery.
THE DEMO.
You could go with:
http://fiddle.jshell.net/s8nUh/149/
$(function()
{
$('.special_field_link').live('click', function()
{
var original = $('#a_input_id').val();
var val = original + ',' + $(this).html();
val = val.replace(/(^,)|(,$)/g, "");
$('#a_input_id').val(val);
return false;
});
});
$(function(){
$('.special_field_link').live('click', function()
{
$('#a_input_id').val($('#a_input_id').val() + $(this).html() + '');
return false;
});
});
To use best practices, its better to cache jquery object for anchor and also avoid using return false.
$(function(){
var txt$ = $('#a_input_id');
$('.special_field_link').live('click', function()
{
txt$.val(txt$.val() + $(this).html());
event.preventDefault();
});
});
I'm starting with jquery, and have an issue here:
http://jsfiddle.net/8guzD/
$('#test.off').click(function(){
$(this).removeClass('off').addClass('on');
});
$('#test.on').click(function(){
$(this).removeClass('on').addClass('off');
alert('ok');
});
the first part of the code goes well, the class is apply, but when I attach an event in this element with its new class it won't work.
Can someone explain me what is the problem exactly?
I tried with javascript,
http://jsfiddle.net/R5NRz/
var element = document.getElementById('test');
element.addEventListener('click', function() {
this.id ='test2';
alert("ok");
}, false);
var element2 = document.getElementById('test2');
element2.addEventListener('click', function() {
alert("ok2");
}, false);
and it didn't really help me, having the same issue
try
$(document).on("click",'#test.on',function(){
$(this).removeClass('off').addClass('on');
alert('ok');
});
$(document).on("click",'#test.off',function(){
$(this).removeClass('off').addClass('on');
alert('ok passs');
});
Demo
In your jQuery example you are binding to DOM elements that exist at that time. That is why you see the first fire but not the second. It is not a match for your '#test.on' selector when the code is run. What you want to do instead is use delegation:
$('#test').on('click',function() {
var ele = $(this);
if (ele.hasClass('on')) {
ele.removeClass('on').addClass('off');
} else {
ele.removeClass('off').addClass('on');
}
});
This assumes that you are doing more than just toggling classes. If you want simply toggle classes then an easier solution is to pick one as the default and use the other as a flag. For example, .on is on but without .on it's off. Then you can just use toggle:
$('#test').on('click', function() {
$(this).toggleClass('on');
});
$("#test.on")
Doesn't bind to anything. Try this:
$('#test').click(function() {
if($(this)).hasClass('off') $(this).removeClass('off').addClass('on');
else $(this).removeClass('on').addClass('off');
});
You might consider using an 'active' class instead and just toggling that, instead of have two separate on/off classes. Then you can write:
$("#test").click(function() {
$(this).toggleClass('active');
});
I am attempting to loop through a dynamic element and then print it with jquery,
Heres the code i use
$('.recipe-steps #addNewStep').on('click', function () {
var s = $('.recipe-steps .step').size() + 1;
$('<div class="step pure-u-1-1"><textarea id="step" name="step_detail[]" class="pure-u-1" placeholder="Step ' + s + '"></textarea>×</div>').appendTo($('.recipe-steps .steps'));
return false;
});
$(document).on('click', '.step .remove', function () {
$(this).parents('.step').remove();
return false;
});
however its only printing out the first element and not the preceding ones. I have created a fiddle can anyone see why?
http://jsfiddle.net/drk8X/
I wasn't able to come up with the perfect solution (will have a look later) but I have redesigned the function to work to an extent.
$("body").on('input propertychange', function () {
var outputme="";
$('textarea').each(function (index) {
outputme+='<br>'+(index+1) + '. ' + $(this).val();
});
$('#lp-step').html('<h3>Method</h3>'+outputme);
});
This will update the "preview" on change of the text area, use CSS Selectors to narrow down the scope, but id reccomend you looking at your HTML and try and simplify it a bit more.
http://jsfiddle.net/drk8X/2/