I am dealing with the following jQuery issue in IE.
For a form I need to replace the default placeholders fields, this is done by jquery, placeholder is hidden and the value of it is added to a position:absolute label on the input.
This all works as I want but, the problem I am facing; When I am filling down te form, the values are set (in a session). After submit I go to the second step. I can go back to the first stap by clicking a link.
This is the situation when I just fill down the form element OR I do a hard browser refresh
like F5.
When I just hit the link in the tempalte to go back one stap, this is the result
The custom placeholder (as a label in red) should be hidden but won't do this as I aspect I should have to. I am facing this issue only in IE (?)
Below some js code I am using;
$(function(e) {
//id itterator if the inputs don't have ids
if ($('input#firstname').val()) {
console.log( "ready!" );
$('.firstname-label').hide();
}
var phid=0;
$.fn.placeholder = function(){
return this.bind({
focus: function(){
$(this).parent().addClass('placeholder-focus');
},blur: function(){
$(this).parent().removeClass('placeholder-focus');
},'keyup input': function(){
$(this).parent().toggleClass('placeholder-changed', this.value!=='');
}
}).each(function(){
var $this = $(this);
//Adds an id to elements if absent
if(!this.id) this.id='ph_'+(phid++);
//Create input wrapper with label for placeholder. Also sets the for attribute to the id of the input if it exists.
$('<span class="placeholderWrap"><label class="'+this.id+'-label" for="'+this.id+'">'+$this.attr('placeholder')+'</label></span>')
.insertAfter($this)
.append($this);
//Disables default placeholder
//$this.attr('placeholder','').keyup();
});
};
console.log('set placeholders');
$('input').each(function() {
var input = $(this);
var id = $(this).attr('id');
if (!$(this).val() && $(this).attr('id') != 'photo') {
$('input#' + id).placeholder('');
console.log(id);
} else {
// do nothing
}
});
});
Thanks in advance!
Related
I have created a on change method for a select box of my project. On selecting particular option it is basically showing and hiding a div which is perfectly working fine. Now, my problem is when first time page is loading this show and hide not working for first default section of form. Can I make this onchange function also working when page load first time.
$('.contact-form').on('change', (e) => {
var selectedId = $(e.currentTarget).val();
var listofforms = $("#discount").data("display-for").split(",");
if (listofforms.indexOf(selectedId) !== -1) {
$("#discount").collapse('show');
}
else {
$("#discount").collapse('hide');
}
});
Here you go with a solution
function changeMethod(selectedId) {
var listofforms = $("#discount").data("display-for").split(",");
if (listofforms.indexOf(selectedId) !== -1) {
$("#discount").collapse('show');
}
else {
$("#discount").collapse('hide');
}
}
changeMethod($('.contact-form').val())
$('.contact-form').on('change', (e) => {
changeMethod($(e.currentTarget).val());
});
You need to move your code outside the change event, so I have kept your existing code within a method changeMethod.
Then call the method from to places
From you change event method
OnLoad of the JS file
Is it possible can I make my on change trigger on page load
Yes, you will just need to change your on change event from e.currentTarget to this as on page load e.currentTarget will be null, but this always points to the current element like:
$('.contact-form').on('change', function() {
var selectedId = $(this).val();
// Your other logic here
});
and to trigger this change event on page load, simply add .change() at last like:
$('.contact-form').on('change', function() {
var selectedId = $(this).val();
// Your other logic here
}).change(); //<---- here
I got this code for a website I am working on, but it does not work:
$(document).on('change', 'select[name="Discount"]', function() {
var $select = $(this);
var $partnerBlock = $select.closest('.col-md-2').siblings('.partner');
if ($select.val() === 'Yes') {
$partnerBlock.addClass('show');
} else {
$partnerBlock.removeClass('show');
}
});
What I want is hide the Partner dropdown by default, hiding it from everyone, and show it only when user set Discount to "Yes".
Hide it by default and then use an event listener on the change event for the dropdown.
https://jsfiddle.net/mco1sxcb/
You should use ids for your elements, easier to manipulate them.
I have a form with several checkbox fields and a corresponding Comments fields for each checkbox. I dynamically create these fields. For example, the checkbox field, tag1, would correspond to comments1. When the checkbox is checked, I don't want to require comments. When it is not checked, I want to require comments.
Sometimes the fields are pre-populated based on a user's last input. In other words, the checkbox may already be checked when the page loads or it may not be. I have logic set to build the corresponding comments field as required or not required based on this.
Everything situation seems to be working except one. When I check the box and then uncheck the box, the form allows me to submit with no comments. Below is what I have tried.
$(document).on('change', 'input[type=checkbox]', function() {
var checkbox = $(this),
otherInput = $('#comments' + this.id.replace('tag', ''));
otherInput.removeProp('required', !checkbox.is(':checked'));
if (!checkbox.not(':checked')){
otherInput.prop('required',true);
}
});
--------------------second attempt
$(document).on('change', 'input[type=checkbox]', function() {
var checkbox = $(this),
otherInput = $('#comments' + this.id.replace('tag', ''));
otherInput.prop('required', !checkbox.not(':checked'));
otherInput.removeProp('required', !checkbox.is(':checked'));
});
Both of these solve the same situations, except the one noted above. Please advise.
Just toggle the 'required' property based on checkbox status
$(document).on('change', 'input[type=checkbox]', function() {
var checkbox = $(this),
otherInput = $('#comments' + this.id.replace('tag', ''));
otherInput.prop('required', !checkbox.is(':checked'));
});
See this JSFiddle
When the "submit" button is pressed, do your validation:
psuedocode:
onSubmitPressed: function(){
if(checkbox is checked){
// alert user field is required;
return false;
}else{
return true;
}
Looks like I had some bad syntax, however it was not throwing an error. I changed my first attempt to:
$(document).on('change', 'input[type=checkbox]', function() {
var checkbox = $(this),
otherInput = $('#comments' + this.id.replace('tag', ''));
otherInput.removeProp('required', !checkbox.is(':checked'));
if ($(this).is(':not(:checked)')){
otherInput.prop('required',true);
console.log('working');
}
});
This now adds and removes the required attribute based upon the checkbox being checked or not checked.
I have an email text box that contains the text '(Not Required)' until a user clicks on it, at which point it turns blank. I'm trying to make it to where if the user clicks another text box without entering an email address (or entering anything), the text box will revert to containing (Not Required).
Here's what I have:
$(document).ready(function () {
$('#email').val("(Not Required)");
// this part works fine
$('#email').click(function(){
if ($(this).val() == '(Not Required)'){
$(this).val('');
}
});
// this isn't working
$(':text').click(function(){
var em = $('#email').val().length();
if (em<3){
$('#email').val('(Not Required)');
}
});
});
I can't figure out why the second part isn't working correctly. Any help would be rewarded with a lifetime's devotion to yourself from myself in a very big way. Forever.
var em = $('#email').text().length();
Should be
var em = $('#email').val().length;
And I show you a better way do this by chain method:
$(document).ready(function () {
$('#email').val("(Not Required)").foucs(function() {
$(this).val('');
}).blur(function() {
if ($(this).val().length < 3 ){
$(this).val('(Not Required)');
}
});
});
You have to use $('#email').val().length instead of $('#email').text().length()
Change
$('#email').text().length();
to
$('#email').val().length;
And just a suggestion, why not use the blur() event of the email input to return the 'Not Required' text instead of waiting for a click on another input box?
click isn't the event you should catch. focus is the one to go. never forget keyboard navigation.
Don't query the DOM twice, save the DOM element and work with it.
use val() instead of text and length instead od length()
:text isn't a good selector. it implies the global selector $('*')
$(document).ready(function () {
var $email = $('#email');
$email.val("(Not Required)");
// this part works fine
$email.focus(function(){
if (this.value == '(Not Required)'){
this.value ='';
}
});
$('#otherTextBoxId').focus(function(){
if ($email.val().length <3 ){
$email.val('(Not Required)');
}
});
});
I have a popup form with 4 textboxes, all of which have default values when the page loads.
Here's the scenario... The user has filled in the form with their details but decides not to submit the form and closes the popup. I want the values of the textboxes to revert to their default values when the user close the popup.
Here's my code so far.
$(".close").click( function() {
$(".popup").find("input").val("Default value of textbox");
});
Rather than inserting "Default value of textbox" as the value, I want it to be the actual default value.
You could put the default values in a 'data attribute' on the elements themselves...I'll create a fiddle to show this... As seen in this jsFiddle
I should also note that you can put the data attribute on the elements from the server...I'm just showing how you could do it all from the client...
// First store all the default values
var def_vals = [];
jQuery('#popup input[type="text"]').each(
function () {
def_vals[jQuery(this).attr('name')] = jQuery(this).val();
}
);
alert(def_vals['test']);
// Restore defaults on close
jQuery('#popup .closeButton').click( function () {
jQuery('#popup input[type=text]').each(
function() {
jQuery(this).val(def_vals[jQuery(this).attr('name')]);
}
);
});
By way of closure
// add to the place that opens the popup
$(".popup input").one(function(){
var value = $(this).val();
var that = this;
$(".close").one(function(){
$(that).val(value);
});
});