I'm working on a Woocommerce site where my client would like it so that if the "every month" radio button gets selected then .wapf-wrapper will appear.
I've tried multiple solutions but they are not working. This is the code I've I'm working with currently:
$(document).ready(function() {
$('input[name="convert_to_sub_36"]:radio').click(function() {
var inputValue = $(this).attr("1_month");
var targetBox = $("." + inputValue);
$(".wapf-input").not(targetBox).hide();
$(targetBox).show();
});
});
.wapf-wrapper {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<span>Choose a purchase plan:</span>
<ul class="wcsatt-options-product wcsatt-options-product--">
<li class="one-time-option">
<label>
<input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
<span class="one-time-option-details">one time</span>
</label>
</li>
<li class="subscription-option">
<label>
<input type="radio" name="convert_to_sub_36" value="1_month">
<span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
</label>
</li>
</ul>
<div class="wapf-wrapper">
<div class="wapf-field-group" data-group="74">
<div class="wapf-field-row">
<div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">
<div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
<div class="wapf-field-input">
<div class="wapf-radios">
<label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
<label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
</div>
</div>
</div>
</div>
</div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>
</html>
You can see the product here.
With vanilla JS (add it to the end of your JS file):
document.addEventListener("DOMContentLoaded", () => {
const wapf = document.querySelector(".wapf-wrapper");
document.addEventListener("click", (e) => {
if (e.target && e.target.name == "convert_to_sub_36") {
wapf.style.display = e.target.value === "1_month" ? "block" : "none";
}
});
});
You can see it in action here - https://codepen.io/ivanduka/pen/eYzJBJv?editors=1111
You can use toggle and pass it a boolean (true/false) to show/hide.
Single line: $(".wapf-wrapper").toggle(($(this).val() == "1_month"));
I also changed the click event to change since that is the appropriate event for radio/checkboxes
$(document).ready(function() {
$(document).on("change",'input[name="convert_to_sub_36"]',function() {
$(".wapf-wrapper").toggle(($(this).val() == "1_month"));
/*
var inputValue = $(this).attr("1_month");
var targetBox = $("." + inputValue);
$(".wapf-input").not(targetBox).hide();
$(targetBox).show();*/
});
});
.wapf-wrapper {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<span>Choose a purchase plan:</span>
<ul class="wcsatt-options-product wcsatt-options-product--">
<li class="one-time-option">
<label>
<input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
<span class="one-time-option-details">one time</span>
</label>
</li>
<li class="subscription-option">
<label>
<input type="radio" name="convert_to_sub_36" value="1_month">
<span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
</label>
</li>
</ul>
<div class="wapf-wrapper">
<div class="wapf-field-group" data-group="74">
<div class="wapf-field-row">
<div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">
<div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
<div class="wapf-field-input">
<div class="wapf-radios">
<label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
<label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
</div>
</div>
</div>
</div>
</div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>
</html>
Related
I am creating a product filter based on checkbox click. It should show and hide based on data-ftype and will match it with the id of the checkbox.
I saw this on StackOverflow but my version doesn't work, and I do not know why. I would be thankful for any help.
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.c1 >a1').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.c1 >a1[data-ftype=' + this.id + ']').show();
});
} else {
$('.c1 >a1').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
<div class="a1" data-ftype="full">
abc
</div>
<div class="a1" data-ftype="half">
pqr
</div>
<div class="a1" data-ftype="without">
stuv
</div>
</div>
Please check the below code, it is working now
A fix has been given to selector instead of $('.c1 >a1') replaced with $('.c1 > .a1')
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.c1 > .a1').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.c1 > .a1[data-ftype=' + this.id + ']').show();
});
} else {
$('.c1 > .a1').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
<div class="a1" data-ftype="full">
abc
</div>
<div class="a1" data-ftype="half">
pqr
</div>
<div class="a1" data-ftype="without">
stuv
</div>
</div>
I'm trying to get the background color of the button to change based on if a sessionStorage item is marked true. On the next page, the Kitchen page, when all the buttons are checked, the sessionStorage item becomes true so when you go back to the "home page",the kitchen is now marked green instead of red. This is the show completion. I think you can use jQuery but I don't really know how to use it.
Home
function loader(){
var form = document.getElementById("myForm");
//error somewhere in here
for(var i=0;i<form.length;i++){
if(sessionStorage.getItem(form.elements[i].value) == "true"){
document.getElementById(form.elements[i].value).style.backgroundColor = "green";
return true;
}else{
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
return false;
}
}
}
function initial(){
if (localStorage.getItem("hasCodeRunBefore") === null) {
var form = document.forms[0];
var tot = document.forms[0].length;
var i;
for(var i = 0; i < tot ; ++i){
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
}
localStorage.setItem("hasCodeRunBefore", true);
}
}
function start(){
initial();
loader();
}
Home HTML
<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>
<ul align=center>
<form id="myForm">
<li>
<input type="button" name="area" id="livingroom" value="Living Room" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("livingroom","false");
document.getElementById("livingroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="kitchen" value="Kitchen"><br><br>
<script type="text/javascript">
sessionStorage.setItem("kitchen","false");
document.getElementById("kitchen").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bathroom" value="Bathroom" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bathroom","false");
document.getElementById("bathroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="dining" value="Dining" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("dining","false");
document.getElementById("dining").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bedroom1" value="Bedroom 1" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bedroom1","false");
document.getElementById("bedroom1").onclick = function () {
location.href = "url";
};
</script>
</li>
</form>
</ul>
Kitchen
function checkTasks(form){
var count = 0;
for(var i=0;i<form.task.length;i++){
if(form.task[i].checked){
count++;
}
}
if(count == form.task.length){
sessionStorage.setItem("kitchen","true");
window.open("url");
}else{
alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
}
}
Kitchen HTML
<body>
<header align=center>Kitchen To Do List</header>
<form name="todolist" >
<div id="button">
<label>
<input type="checkbox" name="task" value="1" ><p>Microwave</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Coffee Maker</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Oven</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Dishwasher</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Stove Top</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Other</p>
</label>
</div>
<textarea id="other"></textarea><br><br>
<p align=center>
<input type="submit" name="box" id="box" value="Complete" onclick="checkTasks(this.form)">
</p>
</form>
<div class="close">
<form align=center action="url" target="_self">
<input type="submit" name="back" value="Back">
</form>
</div>
Every time you load the home page you are setting the value to false with those inline scripts. Remove the sessionStorage.setItem("livingroom","false"); calls in home.html and it looks like everything will work.
I am making a questionnaire and am not brilliant with JS. I want to take the results of the radio buttons which have been marked, so either True or False, and then show them on another page. I have the questions in a form.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling/style.css">
<title>1</title>
</head>
<body>
<script>
function sendclick() {
var answers = [document.forms["questionarre"]["clickRule"].value,
document.forms["questionarre"]["404error"].value,
document.forms["questionarre"]["colour"].value,
document.forms["questionarre"]["H2Tag"].value,
document.forms["questionarre"]["SiteMap"].value,
document.forms["questionarre"]["heading"].value,
document.forms["questionarre"]["alttag"].value,
document.forms["questionarre"]["UseAgain"].value];
var count = 0
for (var i = 0; i<answers.length; i++) {
if (answers[i] == "") {
var temp = i+1;
alert("Please complete question "+temp);
break;
}
count++;
}
if (count == answers.length) {
var correct = [document.getElementById("correct1").checked,
document.getElementById("correct2").checked,
document.getElementById("correct3").checked,
document.getElementById("correct4").checked,
document.getElementById("correct5").checked,
document.getElementById("correct6").checked];
//window.open("YourResults.html", "_self")
}
}
/*
for (var i = 0; i<x.length; i++) {
if (x[i] == "") {
var temp = i+1;
// alert("results"+x)//window.open("results"+x);
break;}
}
}function - sendClick end
function opener() {
var text = document.getElementById('correct7').value;
var target = {
non text content : alert("correct")
};
if (text in targetNames) {
window.open(targetNames[text]);
}
}
document.getElementById('name').addEventListener('keyup', opener, false);
*/
</script>
<div id="questionarre_bg">
<form name="questionarre" action="" method="post">
<div id="Question1">
<p class="thicker">How many clicks do developers use to keep the user close to information? </p>
<input type="radio" name="clickRule" value=1>1<br>
<input type="radio" name="clickRule" value=4>4
<input type="radio" name="clickRule" id="correct1" value=3>3<br>
<input type="radio" name="clickRule" value=6>6
</div>
<div id="Question2">
<p class="thicker">How are developers using the 404 Error Page, for keep the users happy?</p>
<input type="radio" name="404error" id="correct2" value="Including links">Including links<br>
<input type="radio" name="404error" value="displaying a video">displaying a video<br>
<input type="radio" name="404error" value="playing music">playing music<br>
</div>
<div id="Question3">
<p class="thicker">Should you rely on colour alone in a website build?</p>
<input type="radio" name="colour" value="Yes">Yes<br>
<input type="radio" name="colour" id="correct3" value="No">No
</div>
<div id="Question4">
<p class="thicker">A H2 Tag is useful for?</p>
<input type="radio" name="H2Tag" id="correct4" value="The disabled autoreaders">The disabled autoreaders<br>
<input type="radio" name="H2Tag" value="Pretty webpages">Pretty webpages<br>
</div>
<div id="Question5">
<p class="thicker" >What is correct name given to page of the websites pages?</p>
<input type="radio" name="SiteMap" value="Tube Map">Tube Map
<input type="radio" name="SiteMap" id="correct5" value="Site Map">Site Map <br>
<input type="radio" name="SiteMap" value="Map">Map
<input type="radio" name="SiteMap" value="Page List">Page List
</div>
<div id="Question6">
<p class="thicker">A webpage heading should do what?</p>
<input type="radio" name="heading" id="correct6" value="Tell the user about the content in a few words">Tell the user about the content in a few words<br>
<input type="radio" name="heading" value="include meaningless text">include meaningless text<br>
<input type="radio" name="heading" value="Be short">Be short<br>
</div>
<div id="Question7">
<p class="thicker">The Alt tag is used for what....</p>
<input type="text" name="alttag" id="correct7" ><br><!--ANSWER__non text content-->
</div>
<div id="Question8">
<p class="thicker">Would you use this website again for information?</p>
<input type="radio" name="UseAgain" value="Yes">Yes<br>
<input type="radio" name="UseAgain" value="No">No<br>
<textarea rows="4" cols="50"></textarea>
</div>
</form>
<button onclick="sendclick()">send</button>
</div>
</div>
</body>
</html>
you could pass the answer through local storage
it would be something like this
//save the info on page 1
//resultArr will be the array holding all the radio results,
//you could get them by jQuery or any other method to you are comfortable with
localStorage.setItem("answers", answers);
// Retrieve the info on page 2
document.getElementById("answer1").innerHTML = localStorage.getItem("answers")[0];
you can read more about it here:
http://www.w3schools.com/html/html5_webstorage.asp
I' trying to write function that will fill spaces provided with elements from predefined arrays when I select them from dropdown menu. Code here only works in firefox, but not in other browsers(IE or Chrome - I tested with them). A don't know what is wrong with this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="zadatak2.css"/>
<script type="text/javascript">
var milos=["Milos","Teodosić","Olimpijakos","1987","196cm","20.6","6","8","plejmejker"];
var nenad=["Nenad","Krstić","Oklahoma","1983","212cm","20.4","13.5","8","centar"];
var marko=["Marko","Kešelj","Olimpijakos","1988","207cm","11.1","3","1","krilo"];
function set(a) {
for (i=0, o=1; i<8; i++, o++) {
document.getElementById('b'+o).value=a[i];
}
document.getElementById('plejmejker').checked = false;
document.getElementById('centar').checked = false;
document.getElementById('bek').checked = false;
document.getElementById('krilo').checked = false;
document.getElementById(a[8]).checked = true;
}
</script>
<title>Zadatak</title>
</head>
<body>
<div id="titles">
<img class="logo" src="slike\kss_logo.png"/>
<h1>Košarkaška reprezentacija Srbije</h1>
</div>
<div id="side">
<h3>Reprezentacije</h3>
<ul>
<li>
Grupa A
<ul>
<li>Srbija</li>
<li>Argentina</li>
</ul>
</li>
<li>
Grupa B
<ul>
<li>SAD</li>
<li>Slovenija</li>
</ul>
</li>
<li>
Grupa C
<ul>
<li>Turska</li>
<li>Grčka</li>
</ul>
</li>
<li>
Grupa D
<ul>
<li>Litvanija</li>
<li>Španija</li>
<li>Francuska</li>
</ul>
</li>
</ul>
<img class="logo" src="slike\bbcup_logo.jpg"/>
</div>
<div id="main">
<form action="#" method="post">
<div class="kosarkas">
<label>Odaberite košarkaša: </label>
<select id="player">
<option value="milos" onmousedown="set(milos)">Miloš Teodosić</option>
<option value="nenad" onmousedown="set(nenad)">Nenad Krstić</option>
<option value="marko" onmousedown="set(marko)">Marko Kešelj</option>
</select>
<h2>Podaci o košarkašu:</h2>
</div>
<div id="formleft">
<label class="label">Ime:</label>
<input type="text" id="b1"/><br />
<label class="label">Rođen:</label>
<input type="text" id="b4"/><br />
<label class="label">Visina:</label>
<input type="text" id="b5"/><br />
<label class="label">Skokova:</label>
<input type="text" id="b7"/><br />
</div>
<div id="formright">
<label class="label">Prezime:</label>
<input type="text" id="b2"/><br />
<label class="label">Klub:</label>
<input type="text" id="b3"/><br />
<label class="label" style="margin-top:-5%">pozicija:</label>
<div id="dropdown">
<input type="radio" id="plejmejker"/>plejmejker<br />
<input type="radio" id="bek"/>bek<br />
<input type="radio" id="krilo"/>krilo<br />
<input type="radio" id="centar"/>centar<br/>
</div>
<label class="label">Asistencija:</label>
<input type="text" id="b8"/><br />
</div>
<div class="kosarkas">
<label class="label">Prosek poena: </label>
<input type="text" id="b6"/><br />
</div>
</form>
<p id="footer">Svjetsko prvenstvo u košarci, septembar 2014</p>
</div>
</body>
</html>
I think the problem is in the onmousedown event - I don't think it reliably fires for option elements across all browsers. Try changing your select to:
<select id="player" onchange="set(this.options[this.selectedIndex].value)">
<option value="milos">Miloš Teodosić</option>
<option value="nenad">Nenad Krstić</option>
<option value="marko">Marko Kešelj</option>
</select>
You'll also need to change your set function slightly, since it's currently expecting the object to be passed in, not a string value:
function set(player) {
var a;
switch(player) {
case 'milos':
a = milos;
break;
case 'nenad':
a = nenad;
break;
case 'marko':
a = marko;
break;
}
for (i=0, o=1; i<8; i++, o++) {
document.getElementById('b'+o).value=a[i];
}
document.getElementById('plejmejker').checked = false;
document.getElementById('centar').checked = false;
document.getElementById('bek').checked = false;
document.getElementById('krilo').checked = false;
document.getElementById(a[8]).checked = true;
}
<script type="text/javascript">
$('#checkallindus').click(function () {
if($('#checkallindus').attr('checked',false)){
$('.cat1').hide();
}
});
$('#checkallpro').click(function () {
if ($('#checkallpro').attr('checked', false)) {
$('.cat2').hide();
}
});
$('.checkall').click(function () {
if ((document.getElementById('checkallindus').checked == false) && (document.getElementById('checkallprod').checked == false)) {
$('.disp').hide();
}
});
</script>
<html>
<body>
<div class="disp">
Case 1
<div class="cat1">Industry: Environment</div>
<div class="cat2">Product: ASP.NET</div>
<div class="des">The asp.net product in the envirnmen industry</div>
</div>
<div class="disp">
Case 2
<div class="cat1">Industry: Hobbyist</div>
<div class="cat2">Product: WinRT</div>
<div class="des">The Winrt product in the hobbyist industry</div>
</div>
<div class="disp">
<div class="cat1">Industry: Hobbysit</div>
<div class="cat2">Product: ASP.NET</div>
<div class="des">The ASP.NET product in the hobbyist industry</div>
</div>
<div class="head">Industry</div>
<input type="checkbox" id="checkallindus" checked/>ALL
<input type="checkbox" class="checkindus" checked/>Environment
<input type="checkbox" class="checkindus" checked/>Hobbyist
<div class="head">Product</div>
<input type="checkbox" id="checkallpro" checked/>ALL
<input type="checkbox" class="checkpro" checked/>ASP.NET
<input type="checkbox" class="checkpro" checked/>WinRT
</body>
</html>
In the code I have written the script for the "ALL" checkboxes but for indivual checkboxes I am unable to write the script. The content under "disp" must be hidden only if the checkbox under industry and also the corresponding checkbox under product is unchecked. Can anyone help me how to write the script in this case.
I made this, check is it fulfilling your needs or not.
<html>
<script type="text/javascript" src="./jquery.js"></script>
<body>
<div class="disp">
Case 1
<div class="cat1 env" style="display: block;">Industry: Environment</div>
<div class="cat2 net">Product: ASP.NET</div>
<div class="des">The asp.net product in the envirnmen industry</div>
</div>
<div class="disp">
Case 2
<div class="cat1 hobb" style="display: block;">Industry: Hobbyist</div>
<div class="cat2 win">Product: WinRT</div>
<div class="des">The Winrt product in the hobbyist industry</div>
</div>
<div class="disp">
Case 3
<div class="cat1 hobb" style="display: block;">Industry: Hobbysit</div>
<div class="cat2 net">Product: ASP.NET</div>
<div class="des">The ASP.NET product in the hobbyist industry</div>
</div>
<div class="head">Industry</div>
<input id="checkallindus" type="checkbox" checked="">ALL
<input class="checkindus" type="checkbox" checked="" id="indEnv">Environment
<input class="checkindus" type="checkbox" checked="" id="indHobb">Hobbyist
<div class="head">Product</div>
<input id="checkallpro" type="checkbox" checked="">ALL
<input class="checkpro" type="checkbox" checked="" id="prodNet">ASP.NET
<input class="checkpro" type="checkbox" checked="" id="prodWin"> WinRT
<script type="text/javascript">
$('#checkallindus').change(function () {
console.log($('#checkallindus').attr('checked'));
if($('#checkallindus').attr('checked')){
$('.cat1').show();
}else {
$('.cat1').hide();
}
});
$('#checkallpro').change(function () {
if ($('#checkallpro').attr('checked')) {
$('.cat2').show();
}else{
$('.cat2').hide();
}
});
$("#indEnv").change(function(){
if($("#indEnv").attr("checked")){
$(".env").show();
}else {
$(".env").hide();
}
});
$("#indHobb").change(function(){
if($("#indHobb").attr("checked")){
$(".hobb").show();
}else {
$(".hobb").hide();
}
});
$("#prodNet").change(function(){
if($("#prodNet").attr("checked")){
$(".net").show();
}else {
$(".net").hide();
}
});
$("#prodWin").change(function(){
if($("#prodWin").attr("checked")){
$(".win").show();
}else {
$(".win").hide();
}
});
</script>
</body>
</html>