i have a wordpress site that when a form is filled out, if an error is thrown then the plugin shows a <span> with the error text within.
Im trying to fade that text out using jQuery and I have tried both the following to no avail...
$(".wpcf7-not-valid-tip").on("mouseenter", function(){
alert( 'test');
});
$('.wpcf7-not-valid-tip').hover(
function () {
$(this).fadeOut();
});
My HTML markup is being outputted as so...
<span class="wpcf7-form-control-wrap telno">
<input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required field wpcf7-not-valid" value="" name="telno">
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
</span>
Is it possible you are binding the events before the item exists?
try this and see if you have more luck
$('.wpcf7-not-valid-tip').live('mouseenter', function(ev) {
$(this).fadeOut();
});
or
$(".wpcf7-not-valid-tip").on("mouseenter", function(ev){
$(this).fadeOut();
});
Related
I face an issue. I have written the following code:
$(document).ready(function() {
$('.show-hide').hide();
$('.dependent').on('change', function() {
if ($(this).val() == 'Anders...')
{
$('.show-hide').show();
} else {
$('.show-hide').hide();
}
});
});
But for some reason I can't get it to work properly.
It's on here:
http://go.pardot.com/l/471061/2022-03-29/6fp8dp
I am trying to show the 'Anders...' field based on the value 'Anders...' in the dropdown. But for some reason it either shows up on all answers, it doesn't show up at all OR (my best thus far) it show's on the 'Anders...' value, but doesn't disappear anymore...
Note that I have to work with class selectors due to the form builder limitations.
Please help me out, I don't see what i'm doing wrong.
Thanks!
The example you pointed to in your link is not exactly an MCVE. Therefore my answer can only be guesswork. I picked out a few bits that seemed relevant to the question posted above:
$(document).ready(function() {
$('.show-hide').hide();
$('.dependent').on('change', function(ev) {
if ($("option:selected", ev.target.selected).text() == 'Anders...') {
$('.show-hide').show();
} else {
$('.show-hide').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-field dependent Opleidingen_Amsterdam_Arenaboulevard_61_75 pd-select required required-custom form-field-secondary dependentFieldSlave dependentField">
<label class="field-label" for="471061_186248pi_471061_186248">Opleiding *</label>
<select name="471061_186248pi_471061_186248" id="471061_186248pi_471061_186248" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="2692949">Manager handel (Filiaalmanager)</option>
<option value="2699837">Anders...</option>
</select>
</p>
<p class="form-field show-hide Opleidingen_Anders pd-text required required-custom ">
<label class="field-label" for="471061_186680pi_471061_186680">Anders *
<input type="text" name="471061_186680pi_471061_186680" id="471061_186680pi_471061_186680" value="" class="text" size="30" maxlength="65535" onchange="" onfocus="" /></label>
</p>
Your change event handler is attached to all elements with class dependent. The element I found was a <p> element with a <select> inside. So, whenever the event function is triggered the this will point to the <p> DOM element. If you want to compare the selected "value" (what you really want here is the .textContent of the selected option) to the string "Anders..." then you will need to do the following:
$("option:selected", ev.target.selected).text() == 'Anders...'
with ev.target being the changed <select> element inside the <p class="... dependent ..."> element.
I've a table in the front-end where multiple text boxes are appended to the table on button click. Here's the event that I am using:
//Add row to the table
$('#btnAdd').on('click', function () {
var $clone = $('#tblQuesAns tbody tr:last').clone();
$clone.find('input').val('')
$('#tblQuesAns tbody').append('<tr><td><input type="text" class="txtQuestionName form-control" placeholder="Input Name" /> </td> <td><input type="text" class="txtOptions form-control" placeholder="Input Value" /><span class="addOptions">(+)</span></td> <td><input type="text" class="txtAnswers form-control" class="form-control" placeholder="Input Value" /> Remove</td> </tr>');
});
The above works perfect, so it appends new row each time when 'Add' button clicked. There are two more buttons in the Options and Answers text box. So clicking on them, additional text boxes are created in the same column. So to take control of dynamic control, following is used where an event is bound:
//Add more rows for option
$('body').on('click', '.addOptions', function () {
$(this).parent().append('<div id="txtOptions"><input class="txtOptions form-control" name="" type="text" /></div><br />');
});
//Add more rows for answer
$('body').on('click', '.addAnswers', function () {
$(this).parent().append('<div id="txtAnswers"><input class="txtAnswers form-control" type="text" /></div><br />');
});
For now, the above also works. The problem is, say I navigate to another link and come back to Question Bank partial view, clicking on the plus sign (+) creates evenly text boxes each time that means double controls (Where it should create one text box for Options section on one click). Attached a screenshot below:
I tried to remove or clear the controls on page load but failed with the below:
$("#txtOptions").empty();
$("#txtAnswers").empty();
Any way I can overcome this?
The problem is this code runs in $(document).ready() so when you come back, it's binding new handlers for click event. You end up with more than one click handler and each one would add one row. Try removing existing click handlers if any by calling off() method.
//Add more rows for option
$('body').off('.addOptions').on('click', '.addOptions', function () {
$(this).parent().append('<div id="txtOptions"><input class="txtOptions form-control" name="" type="text" /></div><br />');
});
//Add more rows for answer
$('body').off('.addAnswers').on('click', '.addAnswers', function () {
$(this).parent().append('<div id="txtAnswers"><input class="txtAnswers form-control" type="text" /></div><br />');
});
I am having trouble creating a dynamic form where a user can add and remove a text field. The functionality to add an extra field works fine, but removing the field just cannot seem to work.
My html is:
<div class="formItem" id="members">
<label for="workgroup">Add Members:</label>
<br />
Add another member
<p>
<input type="text" name="members[]" placeholder="Enter email" autocomplete="off" />
</p>
</div>
My JS:
$('#addMember').on('click', function() {
$('<p><input type="text" name="members[]" placeholder="Enter email" autocomplete="off" />Remove</p>').appendTo('#members');
return false;
});
$('#removeMember').on('click', function() {
$(this).parent().remove();
});
You are adding the click listener before actually creating the element, use:
$('#members').on('click', '#removeMember', function() {
$(this).parent().remove();
});
see these examples http://api.jquery.com/on/#entry-examples
try using this
$(document).on('click','#removeMember', function() {
$(this).parent().remove();
});
I have multiple divs with the same class-'.new-contact.clearfix.invite'. The divs contain some inputs.
I want to perform validation on the form (which its class is 'invitePartners) only when I click/enter some input in different line (each div is a different line).
I tried the following, but the event is not triggered:
$('.invite').on('blur','.new-contact.clearfix.invite', function () {
$('.invitePartners').valid()
})
Example of the div's HTML:
<div class="row">
<div class="new-contact clearfix invite">
<div class="first-name invite">
<input type="text" id="firstName1" class="signup-input firstName required" name="first[1]" placeholder="">
</div>
<div class="last-name">
<input type="text" id="lastName1" class="signup-input lastName" name="last[1]" placeholder="optional">
</div>
<input type="text" data-index="1" id="inputMail1" class="signup-input mail" name="email[1]" placeholder="e.g. example#url.com" aria-invalid="true">
<span class="common-sprite sign-up-cross first clone"></span>
</div>
</div>
</div>
Quote from JQuery on help page :
The focus and blur events are specified by the W3C to not bubble, but jQuery defines cross-browser focusin and focusout events that do bubble.
This mean that your blur event don't go up the DOM when fired from .new-contact.clearfix.invite and so cannot be catch up by .invite
$('body').on('blur','.new-contact.clearfix.invite input', function () {
$('.invitePartners').valid()
});
Try .focusout() ...
$('.new-contact.clearfix.invite').focusout(function () {
$('.invitePartners').valid();
});
It's not really clear what your elements are, you should post your HTML in your question. If you are just trying to use elements that are related to the element blurred, you may need to use something like ...
$('.invitePartners', this).valid();
What is the simplest way to use a link to populate a input text box with the link content?
I have these links - quite few like these
P3030-6
P3030-6
this text box
<input type="text" name="code" value="" size="40" class="wpcf7-form-control wpcf7-text sidebarInput" id="code" aria-invalid="false">
When someone clicks on the link I want the P3030-6 etc to be added to the text box.
I have a great little script that uses jquery 1.7, but my site needed 1.10.2 - and adding the 1.7 scrip stopped some of the funcitonality of the site.
Any ideas on the best process greatly received!
Thanks
Well, you could add a class on the links
P3030-6
then something like
$('.forinput').click(function(e) {
e.preventDefault();
$('#code').val($(this).text());
});
see jsFiddle
EDIT
to add
$('.forinput').click(function(e) {
e.preventDefault();
var $code = $('code');
$code.val($code.val() + $(this).text());
});
see jsFiddle
You can do it may ways. it depends on your anchor tag position. you can get anchor tag by its parents elements. (e.g i have used a div with class content as parent).
Demo:
http://jsfiddle.net/a6NJk/597/
<div class="content">
P3030-61
P3030-62
<input type="text" name="code" value="" size="40" class="wpcf7-form-control wpcf7-text sidebarInput" id="code" aria-invalid="false">
</div>
Jquery:
$(".content a").click(function(e){
e.preventDefault();
$('#code').val($(this).text());
console.log("fddsf");
})
If you want to add all anchor clicked text:
Demo : http://jsfiddle.net/a6NJk/598/
then replace
$('#code').val($(this).text());
by
$('#code').val($('#code').val()+$(this).text());
if you don't want duplicate values :
demo: http://jsfiddle.net/a6NJk/600/
$(".content a").click(function(e){
e.preventDefault();
var out = $('#code').val();
if(out.indexOf($(this).text()) == -1) {
$('#code').val(out+$(this).text());
}
})
you can add , like this:
http://jsfiddle.net/a6NJk/607/
$(".content a").click(function(e){
e.preventDefault();
var out = $('#code').val();
if(out.indexOf($(this).text()) == -1) {
out = out == '' ? out: out+',';
$('#code').val(out+$(this).text());
}
})
href="" onclick="document.getElementById('code').value=this.innerHTML;return false;"
That should be in each link. Or you can do it systemically through Javascript but someone did that already so I'm gonna be different and lame.
onclick="var code = document.getElementById('code');code.value=(code.value.indexOf(this.innerHTML) < 0) ? code.value + ', ' + this.innerHTML : code.value;return false;"