How should I implement if varA not selected display not selected? - javascript

I have a simple product page with a few sizes and an add to cart button. I want to use jquery to $("").toggle(); a message saying "choose a size" if a size isn't selected onClick of the Add to Cart button.
Here is my code:
ryan.js
function ryanClicked(id, b, c){
b = b || null;
c = c || null;
document.getElementById(id).style.borderColor = "black";
document.getElementById(b).style.borderColor = "#e0e0e0";
document.getElementById(c).style.borderColor = "#e0e0e0";
}
html.html
<div class="pp">
<div id ="sizeButton1"class="sizeButton" onclick="ryanClicked('sizeButton1','sizeButton2','sizeButton3')"> S </div>
<div id ="sizeButton2"class="sizeButton" onclick="ryanClicked('sizeButton2','sizeButton1','sizeButton3')"> M </div>
<div id ="sizeButton3"class="sizeButton" onclick="ryanClicked('sizeButton3','sizeButton1','sizeButton2')"> L </div>
</div> <br>
//I want to prevent the onClick from happening if size is not selected
<p class="ryanAddButton" onclick="simpleCart.add('quantity=1','name=Black Gold','price=58','image=images/thumbs/blackGold.jpg');return false;" >Add to Cart</p>
<p class ="hiddenTilClicked"> You must select a size! </p>
I want the onclick to be called when a size is selected and I want a jquery toggle to be called if a size is not selected.
How can I do this? I can just use js if statement but I don't know how to use JS to display html.
edit: can i pass in a function to be called in js? is that a callback? the simplecart.add() will have different parameters for each item

You need to set a style and width on your border.
Use a variable to track if a style was selected or not.
b = b || null isnt needed because you always pass in a parameter
var sizeSelected = false;
function ryanClicked(id, b, c) {
sizeSelected = true;
document.getElementById(id).style.border = "1px solid black";
document.getElementById(b).style.border = "1px solid #e0e0e0";
document.getElementById(c).style.border = "1px solid #e0e0e0";
}
function addClicked() {
if (sizeSelected) {
document.getElementById('hiddenTilClicked').style.display = 'none';
simpleCart.add('quantity=1', 'name=Black Gold', 'price=58', 'image=images/thumbs/blackGold.jpg');
} else {
document.getElementById('hiddenTilClicked').style.display = 'block';
}
}
.hiddenTilClicked {
display: none;
}
<div class="pp">
<div id="sizeButton1" class="sizeButton" onclick="ryanClicked('sizeButton1','sizeButton2','sizeButton3')">S</div>
<div id="sizeButton2" class="sizeButton" onclick="ryanClicked('sizeButton2','sizeButton1','sizeButton3')">M</div>
<div id="sizeButton3" class="sizeButton" onclick="ryanClicked('sizeButton3','sizeButton1','sizeButton2')">L</div>
</div>
<br>
<p class="ryanAddButton" onclick="addClicked();">Add to Cart</p>
<p id="hiddenTilClicked" class="hiddenTilClicked">You must select a size!</p>

You can simply add a flag that tells if a button has been clicked or not. And instead of directly calling the add function of the simpleCart you can make a new function for the click and wrap your product addition to the cart happen only when a button has been clicked.
You also need to set the hidden element hidden by style and toggle the style to visible only when the customer tries to add a product to the cart without selecting a size.
HTML:
<div class="pp">
<div id ="sizeButton1"class="sizeButton" onclick="ryanClicked(this.id)"> S </div>
<div id ="sizeButton2"class="sizeButton" onclick="ryanClicked(this.id)"> M </div>
<div id ="sizeButton3"class="sizeButton" onclick="ryanClicked(this.id)"> L </div>
</div> <br>
//I want to prevent the onClick from happening if size is not selected
<p class="ryanAddButton" onclick="simpleCart.add('quantity=1','name=Black Gold','price=58','image=images/thumbs/blackGold.jpg');return false;" >Add to Cart</p>
<p id="hiddenTilClicked" style={ visibility: none }> You must select a size! </p>
JS:
var sizeSelected = false;
function ryanClicked(id){
// set the flag that some size has been selected
sizeSelected = true;
// hide the warning since a size was selected
$('#hiddenTilClicked').css('visibility', 'hidden');
// add the border colors
$('.sizeButton').each(function(i, element) {
if(element.id == id) {
element.style.borderColor = "black";
} else {
element.style.borderColor = "#e0e0e0";
}
});
}
function addToCart() {
// add to cart only when a size was selected
if(sizeSelected) {
simpleCart.add('quantity=1','name=Black Gold','price=58','image=images/thumbs/blackGold.jpg')
} else {
$('#hiddenTilClicked').css('visibility', 'visible');
}
}
Here is a fiddle where you can test it: http://jsfiddle.net/sqkosy0b/

You can set a flag and put this simpleCart.add('quantity=1','name=Black Gold','price=58','image=images/thumbs/blackGold.jpg');return false;" inside JS:
HTML:
<p class="ryanAddButton" onclick="checkIfSel()" >Add to Cart</p>
JS:
var flag=0;
function ryanClicked(id, b, c){
b = b || null;
c = c || null;
document.getElementById(id).style.borderColor = "black";
document.getElementById(b).style.borderColor = "#e0e0e0";
document.getElementById(c).style.borderColor = "#e0e0e0";
flag=1;
}
function checkIfSel(){
if(flag==1){
simpleCart.add('quantity=1','name=Black Gold','price=58','image=images/thumbs/blackGold.jpg');
$('.hiddenTilClicked').hide();
}
else{
$('.hiddenTilClicked').show(); //OR document.getElementsByClassName('hiddenTilClicked')[0].style.display="block";
}
}

You'll have to set a variable in ryanclicked that will check if a button has been clicked:
add this line to ryan clicked:
sizeselect = false;
function ryanClicked(id, b, c) {
sizeselect = true;
}
You can associate a function with the onclick button like this:
<p class="ryanAddButton" onclick="checkforclick()" >Add to Cart</p>
And you can define your function like this:
function checkforclick()
{
if(sizeselect)
{
simpleCart.add('quantity=1', 'name=Black Gold', 'price=58', 'image=images/thumbs/blackGold.jpg');
}
else
{
document.getElementsByClassName('hiddenTilClicked')[0].style.display = 'block';
}
}

Related

How to show a response when filtering through a list of elements using javascript

Hello I am creating an FAQ page that has to be filtered using javascript as below
Credit : https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/
$(document).ready(function () {
$('#filter').keyup(function () {
// Search text
var text = $(this).val().toLowerCase();
var error = document.getElementById("error");
// Hide all content class element
$('.mobrog-ux-text').hide();
// Search
$('.mobrog-ux-text').each(function () {
if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
$(this).closest('.mobrog-ux-text').show();
setTimeout(
function () {
var x = document.getElementById("myDIV");
x.style.display = "none";
}, 4000);
error.style.display = "none";
}
else if($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
error.style.display = "block";
}
});
});
});
<form align="center">
<input id="filter" onkeydown="keydownFunction()" oninput="keyPress(this.value)" class="searchfield" type="text"
name="search" placeholder="Search the help center">
</form>
<div style="color: white;padding : 10px" align="center"></div>
</div>
<div class="content2">
<h2>Frequently asked questions</h2>
<div id"pag"="id" pag""="pag" ""></div>
<div align="center" class="col-10">
<div class="mobrog-tab-container maxwidth">
<div id="myDIV" class="loader"></div>
<div class="error" id="error"> No result found!!</div>
<div id="results" class="mobrog-ux-vertical-tabs">
<div id="tar" class="mobrog-tabs">
<button data-tab="tab1" class="active">sample tab button?<span></span></button>
<button class="empty"></button>
</div>
<div class="mobrog-maincontent">
<div data-tab="tab1" class="mobrog-tabcontent active">
<div class="mobrog-ux-text">
<button class="mobrog-accordion">sample button</button>
<div class="mobrog-panel">
<p>
sample text
</p>
</div>
</div>
Which works, but then I am trying to show a message when the filtered word is not found within the list of DIVS I'm searching through on my FAQ page
I tried the below with
else if ($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
//error message display
}
But then it does not work
(e.g when I type in a word which does not exist within my FAQ I want to display an error message which is in a div) and vice versa when the word is found in my FAQ page)
like the way its been used in the method of RegExp
Live search on an Div with input filter
at the moment when I type in available and unavailable words the error message appears
Please how do I effectively display a message when a filtered word is found or not found
Thanks
Expanding on my comment, this is an example of how you could implement something like this.
To reiterate - the main problem was that the error was being shown if any result didn't match instead of showing if none match
To fix that, we can add a variable outside the loop to determine if any result was matched
$(document)
.ready(function () {
$('#filter')
.keyup(function () {
// Search text
var text = $(this).val().toLowerCase();
var error = document.getElementById("error");
// storing this in a variable will reduce how many times you call the function
var $ux_texts = $('.mobrog-ux-text');
// Hide all content class element
$ux_texts.hide();
// variable to update if any match is found
var has_match = false;
// Search
$ux_texts
.each(function () {
var $this = $(this);
if ($this.text().toLowerCase().indexOf("" + text + "") === -1) {
// flip the logic so we can return early - makes for cleaner code
return;
}
$this.closest('.mobrog-ux-text').show();
setTimeout(function () {
var x = document.getElementById("myDIV");
x.style.display = "none";
}, 4000);
has_match = true;
});
// error handling
if (has_match) {
error.style.display = "none";
} else {
error.style.display = "block";
}
});
});

Insert a parameter to a function with a javascript event

I have a sequence of button groups that will change depending on what button was clicked before. I have the first group to choose the type of the piece the user is creating (for example a shirt or a hoodie), and depending on what type the user chooses it will generate a different group to choose its design.
To do that I created a button group with only one hidden button on my HTML file, when the user chooses a type a for loop creates the next group cloning the hidden button, displaying it, and inserting some text.
JavaScript
var designs = {
shirt : ['Simple', 'V-Neck', 'Polo'],
hoodie : ['Sweater', 'Hoodie'],
}
function chooseType(type) {
var btnGroup = document.getElementById('btn-group');
var btn = document.getElementById('design-btn');
for (k in designs){
if (type == k) {
for (i=0; i < designs[k].length; i++) {
var clone = btn.cloneNode(true);
btnGroup.appendChild(clone);
clone.classList.remove('d-none');
clone.innerHTML = designs[k][i];
}
}
}
}
However, in order to generate the next step, I would have to know what design the user chose to put it as a parameter on my chooseDesign(design) function on the same way I had type as a parameter on my chooseType(type) function.
HTML
<div id="design" class="d-none">
<p>Design da peça:</p>
<div class="btn-group" role="group" id="btn-group">
<button onclick="chooseDesign()" type="button" class="d-none" id="design-btn"></button>
</div>
</div>
Is there a way to insert a different parameter on the chooseDesign(design) function to each button after it was cloned?
This uses event delegation to listen for clicks. NOTE: I had to add the Shirt and Hoodie to demonstrate.
var designs = {
shirt : ['Simple', 'V-Neck', 'Polo'],
hoodie : ['Sweater', 'Hoodie'],
}
const createButton = (style) => {
let button = document.createElement('button');
button.dataset.style = style;
button.innerText = style;
return button;
}
function chooseType(type) {
let btnGroup = document.getElementById('btn-group');
btnGroup.innerHTML = "";
designs[type].forEach(s => {
btnGroup.appendChild(createButton(s));
});
}
document.addEventListener('click', (e) => {
if(e.target.matches('.design-select')) {
chooseType(e.target.id);
}
});
<div id="design" class="d-none">
<p>Design da peça:</p>
<button id="shirt" class="design-select">Shirt</button>
<button id="hoodie" class="design-select">Hoodie</button>
<div class="btn-group" role="group" id="btn-group">
</div>
</div>

How to hide and visible the text content based on some value?

How to write HTML and Javascript code.
I have two text content like(Hi, Hlo how are you)& (I'm 5n what about you?).
When the values comes 3 need to show 1st content(Hi, hlo how are you).
If does not come value 3 need to show second content(l'm 5n what about you)..
Thanks.
Your question is too broad to understand, where does this value come from? Is these text in same element or two different element? what you need covering few show hide use here:
Input from API call, with two div for two output:
HTML:
<div id="when3" class="hide">Hi, hlo how are you</div>
<div id="not3" class="hide">l'm 5n what about you</div>
CSS:
/* Hide block */
.hide {
display: none
}
JS:
let value = 3; //use user input here
function show() {
if (value === 3) {
document.getElementById("when3").classList.remove("hide");
document.getElementById("not3").classList.add("hide");
} else {
document.getElementById("not3").classList.remove("hide");
document.getElementById("when3").classList.add("hide");
}
}
show();
When need to change value of same element based upon some input, no two different element:
HTML:
<div id="output"></div>
JS:
let value = 3; //use user input here
function show() {
if (value === 3) {
document.getElementById("output").innerHTML = "Hi, hlo how are you";
} else {
document.getElementById("output").innerHTML = "l'm 5n what about you";
}
}
show();
Show/Hide HTML <div> based upon some clicks. Used for navigation.
HTML:
<ul>
<li onclick="show('profile')">Profile</li>
<li onclick="show('friends')">Profile</li>
<li onclick="show('messages')">Profile</li>
</ul>
<div id="profile" class="hide">Profile Details</div>
<div id="friends" class="hide">Friends</div>
<div id="messages" class="hide">Messages</div>
CSS:
/* Hide block */
.hide {
display: none
}
JS:
function show(id) {
hideAll();
let element = document.getElementById(id);
element.classList.remove("hide");
}
function hideAll() {
document.getElementById("profile").classList.add("hide");
document.getElementById("friends").classList.add("hide");
document.getElementById("messages").classList.add("hide");
}
HTML:
<div id="sample"></div>
JS:
var test = document.getElementById("sample");
var value;
if(value === 3){
test.innerHTML = "Hi, hlo how are you";
}
else{
test.innerHTML = "l'm 5n what about you";
}
html
<input type="text" id="txt"/><br/>
<input type="button" name="go" onClick="result()" value="send"/><br/>
<div id="msg"> </div>
javascript
function result(){
var test = document.getElementById("msg");
var value=document.getElementById("txt");
if(value === 3)
{
test.innerHTML = "Hi, Hlo how are you";
}
else
{
test.innerHTML = "l'm 5n what about you";
}
}
Something like this should work
function showText(val, id) {
document.getElementById(id).innerHTML = val == 3 ? "Hi, Hlo how are you" : "l'm 5n what about you";
}
showText(3, 'text');
showText(4, 'text1');
<div id="text"></div>
<div id="text1"></div>

Dynamically toggle placeholder color with JavaScript

I have an HTML input, as well as some buttons.
<input type="number" placeholder="" id="id"/>
<button onclick="myfunction()" >Click Me</button>
<button onclick="toggle()">toggle</button>
The first button has this JavaScript function
var myfunction=function(){
if(bool){
a=document.getElementById('id');
a.placeholder='Invalid Character';
}
};
bool=false;
and the second button's function is this:
toggle=function(){
bool=!bool;
};
Basically, click the second button to change whether
bool
is true or false. The first button will set a placeholder if the value of bool is true. I want to figure out how to DYNAMICALLY set the color of a placeholder with JavaScript. I have found how to do it with CSS, but I need JavaScript. No jQuery or other frameworks please.
Thanks!
Travis J I specifically said that this is not a duplicate, as I CANNOT use CSS, like the question you mistakenly marked this as a duplicate of
I can ONLY use javscript, not css.
May be this is the not the RIGHT way to add inline styles, but this is the only way i found to full fill the OP requirement.
var placeholderColor = '#f0f';
var FontColor = '#000';
bool = true;
function toggle() {
bool = !bool;
}
function myfunction() {
if (bool) {
a = document.getElementById('id');
a.placeholder = 'Invalid Character';
a.style.color = placeholderColor;
}
}
function textChange() {
a = document.getElementById('id');
if (a.value != '') a.style.color = FontColor;
else {
a.placeholder = 'Invalid Character';
a.style.color = placeholderColor;
}
}
<input type="text" id="id" onkeyup='textChange()' />
<button onclick="myfunction()">Click Me</button>
<button onclick="toggle()">toggle</button>

Display another DIV when submit button is clicked

This is my script
<script type="text/javascript">
function showlevel1() {
var l1 = document.getElementById('default');
l1.style.display = 'block';
var l2 = document.getElementById('secondDiv');
l2.style.display = 'none';
}
function showlevel2() {
var l2 = document.getElementById('secondDiv');
l2.style.display = 'block';
var l1 = document.getElementById('default');
l1.style.display = 'none';
}
function selectHandler(select) {
if (select.value == 'count') {
showlevel2();
} else if (select.value == 'Top') {
showlevel1();
}
}
</script>
HTML:
<form>
<select id='type'>
<option value="Top">TOP</option>
<option value="count">COUNT</option>
</select>
<input type='submit' value='submit' onclick=selectHandler(this)>
</form>
<div id='default' style="display:block">
<h1>Div 1</h2>
</div>
<div id='secondDiv' style="display:none">
<h2> Div 2</h1>
</div>
When I load the page the DIV 1 does shows up, since the property is set to display:'Block' but when I perform the selection from drop down it never changes to DIV2 upon the Count selection from drop down and a submit click button?
Can anyone please help in figuring out the issue and let me know what am I doing wrong?
Thanks
Your select.value outputs submit since your this element referes to
-> <input type="submit" value="submit"/>
Why
selectHandler(this) is triggered by your submit button and not by your <select> tag, so when you perform select.value it returns submit as your text.
After seeing your question I guess you are in need of getting the select tag value.
Try this
function selectHandler(select) {
// get your drop down list element i.e select tag
var selected = document.getElementById('type');
if (selected.value === 'Count') {
showlevel2();
}
else if (selected.value === 'Top') {
showlevel1();
}
}
After seeing your comments
The problem is your using type="submit"
which posts to the same page when your click on it. Change it to type="button"
<input type='button' value='submit' onclick="selectHandler()">
function selectHandler() {
// get your drop down list element i.e select tag
var select = document.getElementById('type');
if (select.value === 'Count') {
showlevel2();
}
else if (select.value === 'Top') {
showlevel1();
}
}
Or
<input type='submit' value='submit' onclick="return selectHandler()">
function selectHandler() {
var select = document.getElementById('type');
if (select.value === 'Count')
showlevel2();
else if (select.value === 'Top')
showlevel1();
return false;
}
js fiddle here http://jsfiddle.net/QGsza/68/
Just taking a quick look, it seems that you have checked for a lowercase value 'count' instead of 'Count'.
i.e. replace
select.value == 'count'
with
select.value == 'Count'
in your onclick on the button, you're passing "this" which would be a pointer to the button itself.
change it to document.getElementById('type') because it looks like your selectHandler is expecting the select element
also, change the button from "submit" to "button" as submit will tell the browser to make a request.
the first DIV:
<div style="display:block;" id="first">
the second DIV:
<div style="display:none;" id="second">
and on the function add:
document.getElementById('first').style.display = 'none';
document.getElementById('second').style.display = 'block';

Categories