I currently have a radio that displays an additional input field if clicked and hides that input field if another radio is selected. What I am looking to accomplish is that when another radio input is clicked i'd like to clear that text input of any value that was put in it.
I am also utilizing MUI CSS for floating labels on form inputs which appends the .mui--is-empty class to fields that are empty and .mui--is-not-empty class to fields that contain values.
I've tried the following:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'tip-custom') {
$('#show-me').fadeIn();
} else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val('');
}
});
});
But this just sets the value to "" where I need to completely reset this specific field for the .mui--is-empty to append back to it.
Here's is a gyazo of what I am experiencing which you can see the starting state of the floating label and how it reacts when cleared.
https://gyazo.com/b848a5855d27b2d6ebd9202bda7fabe9
Is there a way to completely reset the text input as if there is actually no value?
UPDATE
I was able to accomplish what I was trying to do with the following script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
But i'm concerned that even if the value is set to '' will it return anything on form submit? I would prefer that if there is no actual value that it did not.
I'm not sure my answer is right or wrong because I cant check part of the code. I think you have a typo in your code. So, I think I could fix it. Please, check this code if it works:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name="tip-custom-value"]').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
The typo was inside else statement. I think you forgot to close square brackets for your code.
I hope it works.
Related
As you guys see here, I want to be able to hide and show the Birthday and Anniversary boxes based on the answer you give in the dropdown.
I'm not able to hide Birthday cars when I select anniversary, it only works for one box only despite adding the same id to the group of divs.
I've also tried putting on the same class but it still didn't work. Any help is much appreciated !
$("#kindofgreeting").change(function() {
if ($(this).val() == "Birthday") {
$('#ann').hide();
$('#bday').show();
}
enter code here
$('#bday').hide();
$('#ann').show();
}
});
$("#kindofgreeting").trigger("change");
https://codepen.io/bennyblanco4/pen/rNBLPrrI
your pen link is not working but i think i can help you.
$("#kindofgreeting").change(function () {
if ($(this).val() == "Birthday") {
$('#ann').hide();
$('#bday').show();
} else if ($(this).val() == "Anniversary") {
//enter code here
$('#bday').hide();
$('#ann').show();
}
});
$("#kindofgreeting").trigger("change");
i think you forget the else statement, and if you want to validate two different values then, you need to put an else if with the confition you need.
hope this help, english provided by google.
I'm trying to create a custom control using leaflet; here you can see the jsfiddle: https://jsfiddle.net/1tca13f3/
When the user clicks on the submit button, i need to read the value from the dropdown and the one from the text field.
This...
L.DomEvent.on(this._container, 'click', this._doSomething, this);
...as predictable, doesn't work.. and I can't read the values from the input fields. How can I do this?
The main issue you are having is that you are just alerting the string 'clicked' in your _doSomething() function. You need to look up all the values and then you can do what ever you want with those values. Here is some quick code that will at least get you going in the right direction.
_doSomething: function(event){
if(event.target.className === 'leaflet-control-opt-submit') {
var select = document.querySelector('.leaflet-control-opt-dropdown');
var input = document.querySelector('.leaflet-control-opt-input');
console.log(select.value, input.value)
}
}
it first checks to make sure the event.target is the submit button if it is it looks up the values from the inputs and for now we just console.log() them you can do whatever you want from then on with the values.
I can't figure out how to get this phone number input mask and Save/Edit input feature to play nice together.
jsfiddle
Basically I need the input field to be disabled unless Edit is selected, then it becomes enabled, then disabled again when Save is selected.
var phoneInputEdit = document.getElementById('phone-input-edit');
if (phoneInputEdit) {
new Formatter(phoneInputEdit, {
'pattern': '({{999}}) {{999}}-{{9999}}',
'persistent': true
});
And
$(document).ready(function() {
$('.has-feedback input[name="Edit"]').click(function() {
$(this).val(function(i,v) {
return v === 'Edit' ? 'Save' : 'Edit';
});
//$(this).parent().prev().prev().next('img').toggle();
$(this).parent().prev().prev().next('img').toggleClass('icon-inactive');
$(this).parent().prev().prev('input[required]').prop('readonly',function(i,r) {
return !r;
});
});
});
I tried wrapping the input mask in noConflict() but that didn't seem to work. If I get rid of all of the input mask code then of course the Save/Edit works which made me think it must be a library conflict. Maybe I did it wrong.
You're missing the disabled property. By adding/removing this property when you click the save/edit button it will work
I'm trying to use jquery to check if every input-field has already been filled out. And if yes, I'd like to make a green border around the form.
This was my approach:
if($('input:text[value=""], textarea[value=""]').length == 0){
alert("DONE");
}
Hovever the value="" -Selector doesn't work.
It seems that the value-attribute only contains the input-field's default-value, but not the actual content inserted by the user - according to firebug.
This command alerts me the actual contents:
$('input:text[value!=""]').each(function(){
alert($(this).val());
});
My Question: Where are the actual input-field contents stored? And how can I use jQuery to check efficiently, if there are empty fields?
You are right, the attribute selectors only work with the value the attribute really has. Later on, changing the value of the input will only change the DOM element's internal state.
Where are the actual input-field contents stored?
You can access the value via the value property of the DOM element elementNode.value.
And how can I use jQuery to check efficiently, if there are empty fields?
You can use .filter:
$('input').filter(function() {
return !this.value;
});
A neat way of validating inputs is to attach a validation rule to the element for your script to find and validate against.
To make a field required:
<input type="text" data-validate="required" />
Your script:
$('[data-validate]').each(function() {
var rule = $(this).attr('data-validate'), value = $(this).val();
switch (rule) {
case 'required':
if (!value) {
alert('Field invalid!');
}
break;
}
});
It works pretty well for me.
You can make it more efficient by selecting only specific element types or children of a specific element (such as a form).
You could try using .filter() like this:
var empty = $('input:text').filter(function(){ return $(this).val() == "" }).length;
if(empty > 0){
alert("There are "+empty+" fields which have not been filled out");
}
my approach if you are not willing to use Jquery validate.
give a class to each of your input fields and then use Jquery class selector to test if those all have filled or not. You can use this even for dropdown too.
You should use this construction:
var incomplete = $('form :input').filter(function() {
return $(this).val() == '';
});
if (incomplete) {
alert('Please fill all fields!');
}
:input selector selects all input, textarea, select and button elements.
Read this: http://api.jquery.com/input-selector/
I have tried researching this and I cannot get it to work. People have asked similar questions but mine is a little different. Basically, we have a form that asks a user for an amount which has an id of amount_c in the form. The hidden field in the form is this:
So, if there amount selected is "$7,500 to $9,999" for amount_c then the hidden buyer value should be 2, otherwise (if they select any other dollar amount) it should submit the hidden buyer field with a value of 1.
Currently, there is another script that is called to validate the form on submission. It is done so like this:
<form action="http://www.example.com/submission.php" method="post" onsubmit="return validate_form(this); ">
Therefore,
Should I create another script or add to the existing one?
If I can add to the existing one, what have I done wrong below (see below)?
If I can create a separate script, how would the form action line change above to call that additional script?
Here is what I have as I added it to the existing script:
$(function() {
$('#amount_c').change(function() {
if (amount_c === "$7,500 to $9,999") {
var buyer = $("#buyer").val(2);
} else {
$("#buyer").val(1);
}
});
});
Any help is greatly appreciated.
$(function() {
$('#amount_c').change(function() {
if ($(this).val() === "$7,500 to $9,999") {
$("#buyer").val(2);
} else {
$("#buyer").val(1);
}
});
});