I have this code
$("#tag_price").on('change', function(event) {
if ($(this).val() == -2)
$('<input type="text" class="ipt" id="customprice" name="customPrice" />').insertAfter(this),
$('<p id="customprice" class="semi_margin_top">Introduce el precio exacto</p>').insertAfter(this);
else if ($(this).val() !== -2)
$('#customprice').hide;
});
The first part is working, when the input has value -2, the second input is shown. But I want it to dissappear when another value is selected, because if not the second input will remain forever.
I want the second input ONLY to show when value -2 is selected, and dissappear when another value is selected. I thought I could achieve that with Jquery and hide, but I't wont work.
Thank you!
The corollary to hide() you're looking for is show(). There are a few other issues with your code that you'll need to take care of as well.
First, you're missing { } around your if statement, so your else if should be throwing an error as the $('<p...') line is outside of the if.
Secondly, there's no need for else if as there isn't a 3rd option. The value is either "-2" or it isn't.
Right now, you're appending a new element every time that someone selects the "-2" item, which is not the right way to do it. Check to see if those elements are already in the DOM, and only add them if they aren't there. If they are, then call show().
if ($(this).val() === -2) {
$('#customprice').show();
}
Related
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.
Good afternoon Stack Overflow,
I'm inexperienced when it comes to coding in general and I've been having a problem that's doing my head in!
If you'll allow me to set the scene...
The section of the project I am currently working on involves a user picking items from a warehouse in order to fulfil a shipment and in some cases they have to pick the same item from various locations, when that needs to be done, the small "!" type icon appears next to the item.
The user then can click on the icon and choose which locations they will be retrieving the stock from, they then press confirm on the modal and when it closes it sets the text back to blue and hides the icon.
The part I am having trouble with is that once all the locations have been established, the order needs to be processed and this requires a button to be clicked on, which I only want to appear once all the "!" icons are hidden.
I know there are alot of questions based on for loops and images checks and believe me when I say I've tried hard to figure this out myself and I've tried different approaches:
ShowProcess = false
for (i = 0; i<Picker; i++) {
if ($('#MultiLocIcon'+i).is(':visible')){
ShowProcess = true
}
if (ShowProcess == true) {
$('#ProcessConfirm').show()
};
};
This obviously wouldn't work because its setting the first variable in the list to "true" and will always read it as true, therefore always showing the image, even if the "!" icon still exists in other rows.
I also tried using .each() to test each rows text color of a specific but also had no luck:
var table = $('#RequestedItemsTable');
table.find('tbody > tr').each(function(){
if $('#Desc').css('color') == '#0000FF'){
//do something
I feel like my experience is letting me down as I still have a lot to learn and have a suspicious feeling that the solution is going to be really easy, but then again, its only easy if you know how.
If anyone could take the time to help me with this problem or offer me any advice, I'd be really grateful.
Here is a section of my code which might be useful:
Modal "Confirm" button:
//CONFIRM Button which will submit final picks.
'Confirm': function() {
//Reset the length loop
length = undefined;
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');
$(this).dialog('close');
The "!" Icon:
<td id= "MultiLocIcon<?=$i;?>"><?if($row->Count_Location > 1)
{?><img src="<?=base_url();?>public/css/images/error.png" alt="LocPick" title="Multiple Locations" style="cursor: pointer;" id= "icon<?=$i;?>" onClick="$.LocPick(<?=$i;?>);"/><?}?></td>
Basically just need to know how my image can show once the loop checks and knows that the "!" icon is hidden from every possible row.
Thank you for your patience.
You'll need to add a second check in your modal logic, perhaps after your .hide():
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
$('img[id^=icon]:visible').length || $('#ProcessConfirm').show();
What this does is combines the :visible pseudo-selector and a regex selector for all img tags with id starting with "icon". This assumes you won't have any other unrelated image tags with an id like "icon*". If the length is 0, it will go ahead and show the #ProcessConfirm element.
simplest solution I would give is to add a class warning to all the table column which has warning icon & then check for visibility of the same.
if($('.warning:visible').length === 0){
//all warning icons are hidden
}
What I would do is based off your HTML, select all the alert icons, and do a :visible psuedo selector on it. This will return all the visible alert icons, if there are none in the array, you know none of them are visible. You will need to identify them with a class, such as .alert:
if( $(".alert:visible").length === 0 ){
// Do your code in here for no visible alert icons!
}
When user clicks confirm on modal you should run a check on how many icons are still visible, and if the amount is 0 then show the button, like this:
// This searchs for every <td> with an id that contains '#MultiLocIcon'
// Then checks if the amount of those which are visible is 0 and do something
if ( $('td[id*=MultiLocIcon]').not(':visible').length === 0 ) {
$('#ProcessConfirm').show()
}
In the following code, each "Id" is connected to a checkbox, so when I check it a word is printed and if I uncheck it the word disappears.
function DrawRequest()
{
if(document.getElementById("name").checked == true)
document.getElementById("drawrequest").innerHTML="checked";
else
document.getElementById("drawrequest").innerHTML="";
if(document.getElementById("surname").checked == true)
document.getElementById("drawrequest").innerHTML="checked";
else
document.getElementById("drawrequest").innerHTML="";
if(document.getElementById("age").checked == true)
document.getElementById("drawrequest").innerHTML="checked";
else
document.getElementById("drawrequest").innerHTML="";
}
Or at least that is what should have happened when I tried the code. What really happened is that when I checked the checkbox with id "name" nothing printed. The also happened with the checkbox with id "surname." But the last checkbox with id "age" works fine!
One more question: if the three checkboxes are checked will Ihave three words printed ?
Thanks a lot :)
You always update the innerHTML for each box, whether it's checked or not. And each if or else will overwrite what the previous statements set, making the previous actions irrelevant.
You'll want to either:
set the innerHTML to blank at the beginning of the function, get rid of the elses, and only set the HTML to "checked" if a box is checked (not doing anything if it's unchecked), if you want one "checked" total if any box is checked;
append to the HTML rather than setting it, if you want a "checked" for each box; or
Have a separate element to reflect each box's checkedness.
The HTML on the page has 20 <input> fields each named and given ID's in increasing order from 1 to 20.
If the variable id is set to the next sequential id (id + 1), this function will cause focus to apply to that field. However, when clicking outside of the current input field, the last one input field will not regain focus if the number entered is greater than 10, but an alert will be displayed.
$(":input").focusout(function(){
var input = $(this).val();
var id = $(this).attr('id');
if(input > 10){
alert('You must enter a number between 0 and 10 '+id);
$("#"+id).select();
}
});
How can the last input field be set to regain focus?
Try replacing:
$("#"+id).select();
With:
$(this).focus();
In this case, $("#"+id) and $(this) are the same element, and I'm assuming you want to focus the element when there is an error.
Aside: I don't believe that id or name values can legally start with a number, you may want to prefix them with something like option1, option2, etc. It might work, but it might also cause issues later that are difficult to debug. Best to err on the side of caution and best practices.
What are valid values for the id attribute in HTML?
Edit: After failing to get focus() to work, I tried with setTimeout and was able to make it happen. I'm not sure why, or if this is really necessary, but it seems to work.
$(":input").focusout(function(){
var $this = $(this),
input = $this.val();
if (input > 10){
alert('You must enter a number between 0 and 10');
setTimeout(function(){
$this.focus();
}, 1);
}
});
I'd love to hear if there is a better way to do this or an explanation. I suspect that the blur and focus events are not fired in an order that makes the previous method possible?
Demo: http://jsfiddle.net/zRWV4/1/
As mentioned in the comments, you should eventually make sure the value is an integer with parseInt or similar (you seem to already be aware of this).
replace
$("#"+id).select();
by
$("#"+id).focus();
or even by
$(this).focus();
You should parse the text inside the input to compare it with a number. var input = parseInt($(this).val());
'
$(":input").blur(function(){
var input = parseInt($(this).val());
var id = $(this).attr('id');
if(input > 10){
alert('You must enter a number between 0 and 10 '+id);
$("#"+id).select();
}
});
(Try to use .blur() instead of .focusout(). But that probably won't help)
Try to remove the alert() for a while - it sometimes can make problems with focus...
jsFiddle Example
This is my code, I'll explain what I changed:
$('input[id^="input"]').focusout(function(){
var selected = parseInt($(this).val(), 10);
if (selected <= 10) {
$("#input-"+selected).focus();
}
else {
alert('Invalid Argument! 1-10 only!');
$(this).focus();
}
});
I use focus() instead of select() which won't work.
You confused id with select which caused you to always try and select $("#input-IDOFSELECTIONINPUT") instead of $("#input-IDOFWANTEDINPUT")
In your code, although an alert would have been thrown, the rest of the code would have continued normally. It won't in my code.
You've put your desired result ($("#"+id).select();) in the undesired condition (input > 10), which practically never gave it a chance.
Last but not least, I gave the inputs a better (and valid) id. IDs must not start with a number.
I am trying to add javascript validation to a bunch of check boxes, basically what I want is as soon as the user has selected 3 tickboxes, it should disable all of the tickboxes except the three that were ticked.
How could I go about doing that?
Thanx in advance!
The following will disable the rest of the checkboxes if you select 3 of them, and also enable them once you uncheck one of the three selected..
$(':checkbox').click(
function(){
var selected = $(':checkbox:checked').length;
if (selected == 3)
{
$(':checkbox:not(:checked)').attr('disabled',true);
}
else
{
$(':checkbox:not(:checked)').attr('disabled',false);
}
}
);
Live demo
Have on onclick handler that when a checkbox is clicked it ups a counter by one if it is unchecked it decreases the count. After raising the count, test to see if it is three. Then probably the easiest method is to either save the ids of the three checked boxes or save them in the previous step. Then change the click event to return true only if the ids match the saved ids.
Sorry I don't have time right now to actually write up any code. Hopefully this will get you started.
jQuery
$("#container :checkbox").click(function(){
if ($("#container :checkbox").length >= 3) {
$("#container :checkbox").attr("disabled", "disabled");
}
});