Develop Reference

Conditional statement not working on a VueJs method

I'm trying to add conditional statement, so when the user toggle the buttons it would trigger an action, for example output the some text.
I tried to add the conditional as method, and as computed property without success, also I tried with switch statement.
I'll add the codepen link https://codepen.io/manosx/pen/KELmpj?editors=0010
clickedTag: function (indexTag) {
// toggle the active class
this.$set(this.isClickedTag, indexTag, !this.isClickedTag[indexTag])
let tagsSelected = _.keys(_.pickBy(this.isClickedTag, _.identity))
let tagsSelectedSingle = tagsSelected.map(s => `'${s}'`).join(', ')
console.log(tagsSelectedSingle)
if (tagsSelectedSingle === '0') { console.log('naylon') }
else if (tagsSelectedSingle === '1') { console.log('espiga') }
else if (tagsSelectedSingle === '2') { console.log('omega') }
else if (tagsSelectedSingle === '3') { console.log('crochet') }
else if (tagsSelectedSingle === '4') { console.log('thread') }
else if (tagsSelectedSingle === '5') { console.log('bordado') }
},
I would like to add a conditional statement that would trigger different actions depending of the buttons that are on.

Its beter to use indexOf() because includes will not work on some browsers.
Try this.
if (tagsSelectedSingle.indexOf('0')>=0) { console.log('naylon') }
if (tagsSelectedSingle.indexOf('1')>=0) { console.log('espiga') }
if (tagsSelectedSingle.indexOf('2')>=0) { console.log('omega') }
if (tagsSelectedSingle.indexOf('3')>=0) { console.log('crochet') }
if (tagsSelectedSingle.indexOf('4')>=0) { console.log('thread') }
if (tagsSelectedSingle.indexOf('5')>=0) { console.log('bordado') }

javascript which I wrote is wrong(may be)

I have tried to write js for my html form. js is working fine with the logically. But if logic fails,I mean if any condition fails it reloads the page,which I don't want. I am providing the code. Please point me out the mistake in js if any.
window.onload = function() {
document.getElementById('submitlink').onclick = function() {
var bflag = document.addpro.brandflag;
var brand = document.addpro.brand1.value;
var cflag = document.addpro.catflag;
var cat = document.addpro.cat1.value;
var color1 = document.addpro.color1.value;
var color2 = document.addpro.color2.value;
if(cb_validation(bflag,brand))
{
if(cb_validation(cflag,cat))
{
if(colorcheck(color1,color2))
{
document.getElementById('addproform1').submit();
return false;
}
}
}
}
function cb_validation(flag,field)
{
if(flag[0].checked)
{
if(field==0)
{
alert('Please Select Both Brand And Category');
field.focus();
return false;
}
else
return true;
}
else
return true;
}
function colorcheck(c1,c2)
{
if((c1==0) && (c2==0))
{
alert('Please Select Both Colours');
document.addpro.color1.focus();
return false;
}
else if((c1==0))
{
alert('Please Select 1st Colour');
document.addpro.color1.focus();
return false;
}
else if((c2==0))
{
alert('Please Select 2nd Colour');
document.addpro.color2.focus();
return false;
}
else
return true;
}
}
I am rookie in js. Please also tell me if I have done any mistake.

return false is what keeps the page from reloading. Right now it is inside your final color check condition. If you never want the page to reload it needs to be after your first cb_validation condition.

Submit() is causing the page refresh which is in below line
document.getElementById('addproform1').submit();
Also both your function is returning true becauseyou are returning true in else block. Hope this points you to right direction....
Good luck....

jquery form validation without click -> when ok show div

is it possible to do this automatically. mean when i type text and click on the second textfield autocheck the first one. then when both ok show the div2 and so on.
here is some code
var step1 = function() {
var first = $("#f_name").val();
var last = $("#l_name").val();
var error = false;
if (first == "") {
$("#f_name").next().text("*ErrorMsg");
error = true;
} else {
$("#f_name").next().text("");
}
if (last == "") {
$("#l_name").next().text("*ErrorMsg");
error = true;
} else {
$("#l_name").next().text("");
}
if (error == false) {
$("#send").submit();
$('#div1').show('slow');
} else {
returnfalse;
}
}
var step2 = function() {
var email1 = $("#e_mail").val();
var adress1 = $("#adress").val();
var error2 = false;
if (email1 == "") {
$("#e_mail").next().text("*ErrorMsg");
error2 = true;
} else {
$("#e_mail").next().text("");
}
if (adress1 == "") {
$("#adress").next().text("*ErrorMsg");
error2 = true;
} else {
$("#adress").next().text("");
}
if (error2 == false) {
$("#send2").submit();
$('#div2').show('slow');
} else {
returnfalse;
}
}
$(document).ready(function() {
$('#div1').hide();
$('#div2').hide();
$("#send").click(step1);
$("#send2").click(step2);
});
hope anyone can help me. and sorry for my bad english :)
greatings

The way that I would do it is:
Assign a variable, something like numSteps and set its initial value to 1
onFocus and onBlur, run a function that steps through each field, based on numSteps
If any fields are empty (or however you want to validate them), set error = true
if !error numSteps++
Make all elements up to numSteps visible
Hope this helps
Very crude example, but demonstrates what I was referring to:
http://jsfiddle.net/aSRaN/

Return through all functions

Is it possible to return through multiple functions?
I have a jQuery on click function with a $.each loop in it. In the $.each loop I test for various conditions, and if not met display an alert message and then return. Here is a cut down version of my code:
$(document).on('click', '.add-to-basket, #add-to-basket', function(e) {
var data = {
id: $(this).data('id'),
quantity: 1
};
if($('#quant').length > 0) {
data.quantity = $('#quant').val();
}
var i = 0;
var j = 0;
if($('.product-option').length > 0) {
$('.product-option').each(function(index, element) {
if($(this).is('select')) {
//check to see if this is a required select, and return if a selection has not been made.
if($(this).data("force") == 1 && $(this).val() == 0) {
AlertDialogue($(this).data("title") + " requires a selection before you can add this product to your basket.", "Required Option");
return;
}
data.opts[i++] = $(this).val();
} else if($(this).is('input[type="checkbox"]:checked')) {
data.opts[i++] = $(this).val();
//check to see if this is a required group of checkboxes, and if so at least one has been checked. If not return.
} else if($(this).is('input[type="checkbox"]')) {
if($(this).data("force") == 1 && $('input[name="' + $(this).prop("name") + '"]:checked').length == 0) {
AlertDialogue($(this).data("title") + " requires at least one option to be checked before you can add this product to your basket.", "Required Option");
return;
}
} else if($(this).is('input[type="radio"]:checked')) {
data.opts[i++] = $(this).val();
} else if($(this).is('textarea')) {
//Check to see if this is a required textarea, and if so make sure there is some text in it.
if($(this).data("force") == 1 && $.trim($(this).val()).length == 0) {
AlertDialogue($(this).data("title") + " requires text before you can add this product to your basket.", "Required Option");
return;
}
if($(this).val().length > 0) {
data.text[j].id = $(this).data("id");
data.text[j++].val = $(this).val();
}
}
});
}
//submit product to the cart
});
However the return will only break that loop of the $.each loop, and start the next loop. I would like to not only break the $.each loop, but return from the on click function entirely.
Is this possible?
If so, how can I achieve this?

To exit from $.each you should return false
To exit from event handler function you should use return
As per your requirement you can do little like below,
var break = false;
$('.product-option').each(function(index, element) {
// rest of code
if(condition) {
break = true;
return false; // this will break out of each loop
}
});
if(break) {
return; // return from event handler if break == true;
}
// rest of code

Check out the docs for jQuery.each():
We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same
as a continue statement in a for loop; it will skip immediately to
the next iteration.
Essentially, use return false; instead of just return;.

Disable Tab on the basis of value of another field in CRM 2011

I'm trying to disable a Tab on the basis of value from another field (two optionset). Basically My objective is If process complete = False then the Tab Sales Process must be disabled. If process complete =True then the Tab Sales Process must be enabled. The Process complete is a two optionset field and the Sales process is a tab. I'm using the below code for disabling all controls in tab. But I'm not able to make it work with the condition of the another field (Two option set)
function DisableAllControlsInTab(tabControlNo)
{
var factfindcontrol=Xrm.Page.getAttribute("processcomplete").getValue();
var tabControl = Xrm.Page.ui.tabs.get("sales process");
if (factfindcontrol ==false);
if (tabControl != null) {
Xrm.Page.ui.controls.forEach(
function (control, index) {
if (control.getParent().getParent() == tabControl && control.getControlType() != "subgrid") {
control.setDisabled(true);
}
else {
control.setDisabled(false);
}
});
}
}

I finally worked it out
function DisableAllControlsInTab(tabControlNo)
{
var factfindcontrol=Xrm.Page.getAttribute("processcomplete").getValue();
var tabControl = Xrm.Page.ui.tabs.get("salesprocess");
if ((factfindcontrol ==0) &&
(tabControl != null)) {
Xrm.Page.ui.controls.forEach(
function (control, index) {
if (control.getParent().getParent() == tabControl && control.getControlType() != "subgrid") {
control.setDisabled(true);
}
});
}
else {
Xrm.Page.ui.controls.forEach(
function (control, index) {
if (control.getParent().getParent() == tabControl && control.getControlType() != "subgrid") {
control.setDisabled(false);
}
});
}
}