Give a JavaScript function a 'false' option? - javascript

How do you make a JavaScript function have a false option, which makes sure the function doesn't execute?
Here's the code:
function deleteExtraRows(tableID){
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}
I want to also be able to give it a (false) option, so I can run deleteExtraRows(false), which will not make the function run. I know this seems kind-of backwards, but it would fit in the project I'm working on if I can do this.
Please help!

This should do the trick:
function deleteExtraRows(tableID){
if(tableID === false)
return;
....
}
It is important to use === as opposed to == since === checks the type as well. If tableID were 0 or an empty string, it would evaluate to true and return as well.

What you have should already work if there isn't an element on the page with an id of false.

Do it like this
function deleteExtraRows(tableID){
if(!tableID)
return;
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}

just do return
return stops the execution of the function..
function deleteExtraRows(tableID, valid ){
if(!valid)
return;
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}

Try this:
function deleteExtraRows(tableID, doWork){
if (!doWork) return;
tableID = '#'+tableID;
$(tableID+' tr').each(function(){
if($(tableID+' tr').length>1){
$(this).remove();
}
});
}

where is it being called?
just do:
if(!!tableID) deleteExtraRows(tableID);

I'd suggest Greg's answer above, but thought that you can optimize your code a bit by rewriting it like this:
function deleteExtraRows (tableID) {
if (tableID === false) {
return;
}
$('#' + tableID).find('tr:not(:last)').remove();
}
... unless I'm misinterpreting your code there.

Related

How to show and hide something in jQuery using if's

Hello everyone so I want to show and hide a button using jQuery, but only if a variable is true for example.
Ex:
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
var st1wch1 = true
state1_1warrior()
});
});
$(document).ready(function(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
})
But for some reason it never hides, any ideas??? Thanks in Advance.
The most simple way to do it may be this:
$(document).ready(function(){
$("#choice1").click(function(){
$("button#choice1").toggle()
});
});
The logic you've implemented to show or hide the element is defined within the document ready event, which is raised before the user has a chance to click on the button and raise the event handler which toggles your global variable.
You probably wanted to hide and show when the element is clicked?
$("#choice1").click(function(){
$(this).toggle();
});
After changing the variable, you code does not go through the if else conditions. Put that show and hide condition inside a function like below
function toggleButton(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
and then call this function everytime you change the variable's value.
You must place your code inside the click handler.
I think you want to add at least 2 buttons later, and you want to toggle just a part of them or something like this.
var st1wch1 = false;
$(document).ready(function(){
$("#choice1").click(function(){
if(st1wch1 == false){
st1wch1 = true;
$("button#choice1").show()
}
else if(st1wch1 == true){
st1wch1 = false;
$("button#choice1").hide()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="choice1">choice1</button>
You can use toggle:
var st1wch1 = true;
$('#choice1').toggle(condition);
Side note: Don't use things like
if (st1wch1 === true)
Do:
if (st1wch1)
and (for the == false / === false case):
if (!st1wch1)
document.ready() is only called when the page initially loads, so it evaluates the if/else statement when you load the page and then never again. Clicking the element doesn't rerun the if else statement.
To get the behavior you want you can either do
$("#choice1").click(function(){
$(this).toggle();
});
or
$("#choice1").click(function(){
evaluateBoolean();
});
function evaluateBoolean(){
if(st1wch1 == false){
$("button#choice1").show()
}
else if(st1wch1 == true){
$("button#choice1").hide()
}
}
You can use toggleClass.
$('#button').toggleClass('hidden', condition);
Created css class with display: none;

Remove option with value = MRW if I checkbox if checked

I'm trying to remove a option with value equal to MRW if #natural_person_lives_in_ccs_0 is checked but if I unchecked the checkbox then the SELECT should be as it was by default meaning same options. This is what I did:
$(document).ready(function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
But it's not working since Option1 is added by default and I don't know how to write this. I think to use .toggle() but don't know if it's the right one. I leave a Plunker here for testing. Any help on this?
Steps:
Check Yes option value=MRW should be removed
Remove the check from Yes option value=MRW as by default (same position)
Try to use the .change() function to accomplish your task here,
$('#natural_person_lives_in_ccs_0').click(function () {
var elem = $(".shipping_from option[value='MRW']");
if (this.checked) {
elem.remove();
} else if (elem.length == 0) {
$(".shipping_from").prepend('<option value="MRW">Option1</option>');
}
});
DEMO
The best way would be,
$('#natural_person_lives_in_ccs_0').click(function () {
$(".shipping_from option[value='MRW']").toggle(!this.checked);
$(".shipping_from option:eq(" + ((this.checked) ? 1 : 0) + ")").prop('selected', true);
});
DEMO
Write your script like bellow.
var showOptionsAcorrdingCheckbox = function(){
var lives_in_css = $('#natural_person_lives_in_ccs_0').is(':checked');
if (lives_in_css) {
$(".shipping_from option[value='MRW']").remove();
} else {
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
}
$(document).ready(function(){
$(':checkbox').change(showOptionsAcorrdingCheckbox);
});
DEMO
code:
$(document).ready(function(){
$(document).on('change', '#natural_person_lives_in_ccs_0', function(){
if($(this).is(':checked'))
{
$(".shipping_from option[value='MRW']").remove();
}
else
{
$(".shipping_from").append('<option value="MRW">Option1</option>');
}
});
});

How to make an input restriction function using jquery

I want to do is put a character and length restriction in an input using this rules:
A combination of at least ten numbers, letters and punctuation marks
(like ! and &)
and if the user didnt complete the rules the input value will be back to empty again.
My problem is I'm still a beginner and my current code wont work as i wanted. Can anyone help me with this please.
Current output: http://jsfiddle.net/5kcsn/271/
Script:
$(document).ready(function () {
$('#example').on('blur', function () {
$('#example').change(inputVerify);
inputVerify()
})
$('#example').on('keydown', function () {
$('#example').change(inputVerify);
inputVerify()
})
$('#example').change(inputVerify);
function inputVerify(value) {
return /^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value) && /[a-z]/.test(value) && /\d/.test(value)
};
});
I don't want to tell you "how to do it better in general", but what about giving live feedback instead of reverting a bad entry? This way the user can a) see as soon as it is correct, b) correct his former entry:
$("#example").on('keydown',function(){
if(!inputVerify($("#example").val())){
$("#example").css("border","1px solid red");
} else {
$("#example").css("border","1px solid black");
}
});
function inputVerify(value){
return /^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value)
&& /[a-z]/.test(value)
&& /\d/.test(value)
};
You should really do this only on blur, it should look something like this:
$(document).ready(function(){
$('#example').on('blur', function(){
if( !inputVerify() ) {
$(this).val('');
}
});
});
function inputVerify(value){
return /^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value)
&& /[a-z]/.test(value)
&& /\d/.test(value)
};
You see, your inputVerify function returns true or false and you would have to remove the input yourself by $(this).val('');.
The jsFiddle: http://jsfiddle.net/5kcsn/272/
Please note that I have not tested your regex, as I am not too familiar with them, yours seem to work though.
Try this, note I did not check your regular expression:
$(document).ready(function () {
$('#example').keydown(inputVerify);
function inputVerify(event) {
var value = $(this).val();
if (!(/^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value)
&& /[a-z]/.test(value)
&& /\d/.test(value))) {
$(this).val('');
}
};
});
Link to JSFiddle
The function inputVerify catches the event passed by the keydown handler and uses the $(this) which refers to the element the event is triggered on to get the value of the input.
And then, if the regex tests fail, empty the input.

How to match two html elements

For example, I have
<div class="welcome_font">name</div>
and
<div id="nameho" style="color:#5AC7E6;">another-name</div>
I want to write an "if" statement in jquery/javascript where if "name" matches "another-name", then do something. How do I do that?
The .html() function grabs the inner html when using jQuery. So you could use the following to compare the two:
if ( $('.welcome_font a').first().html() === $('#nameho').html() )
{
...
}
let me know if that makes sense or if you have any questions :)
Try,
if( $('.welcome_font a').text() == $('#nameho').text() )
{
////Do something
}
Research first next time. You could get this with a simple search.
if($(".welcome_font a").text() == $("#nameho").text())
{
//To do
}
var name_1 = $('.welcome_font').text();
var name_2 = $('#nameho').text();
if(name_1===name_2) {
alert('yes');
} else {
alert('no');
}
Demo : http://jsfiddle.net/TSGqC/
or
var name_check = ($('.welcome_font').text()===$('#nameho').text()?true:false);
if(name_check) {
alert('yes');
}
Demo : http://jsfiddle.net/TSGqC/1/

Why won't function output into this jQuery selector?

I'm hoping this is something silly I've done. I got a function unigref near the bottom, which (I believe) outputs a string. However, when I call the function to build a jQuery selector, I can't get it to work properly. I know that everything else works because when I use a static string the radio button is selected.
Here's my jsfiddle/9Edxx. Please help.
var checkCount = 0;
var maxChecks = 2;
$(document).ready(function() {
$("#test").click(function() {
alert($(':checked').length);
});
$(':checkbox[name=checkbox]').change(function() {
checkCount = $(':checkbox:checked').length;
if (checkCount >= maxChecks) {
$(':checkbox[name=checkbox]').not(':checked').attr('disabled', true);
$(":radio[value="+uniqref()+"]").prop('checked', true);
} else {
$(':checkbox[name=checkbox]:disabled').attr('disabled', false);
}
if (this.checked) {
$("td.label").append("<label>" + this.value + "</label>");
} else {
$("td.label").find(":contains('" + this.value + "')").remove();
}
});
$('#button').click(function() {
alert(uniqref());
});
function uniqref() {
return $("td.label").text().split('').sort().join('').replace(/\s/g, "");
}
});​
UPDATE: The typo has been correct, but the problem still exists.
http://jsfiddle.net/9Edxx/
Yeah it's really silly: It's just a typo.
$(":radio[value="+unigref()+"]").prop('checked', true);
should be
$(":radio[value="+uniqref()+"]").prop('checked', true);
with a lowercased Q instead of a G.
Also, you're calling uniqref() before actually updating the value of td.label.
Should be in this order:
if (this.checked) {
// ...
}
if (checkCount >= maxChecks) {
// ...
}
http://jsfiddle.net/7mvmT/7/
http://jsfiddle.net/7mvmT/6/
Basically this line:
$(":radio[value="+uniqref()+"]").prop('checked', true);
is called prematurely (before the checkbox is actually checked. A simple, ugly hack:
setTimeout(function(next) {
$(":radio[value="+uniqref()+"]").prop('checked', true);
}, 0);
solves it.
Also you had a typo as Niko mentioned.
No need for hack.
http://jsfiddle.net/dn7gM/
p.s.: only works for the 2 first radios, since not all ids are setted correctly ;-)

Categories

Resources