Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!
Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">
Related
When I am putting the whole card into the form tag in HTML then the js is not working please give me a solution. I want to put form because the enter key of the keyboard is not working. and I want that to work, and in future, i want to save the conversation into the database model , the backend is made up of Django.
here is my html:
<section>
<div class="container py-5">
<div class="row d-flex justify-content-center">
<form>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center p-3"
style="border-top: 4px solid blue; background-color:#3792cd;" >
<h5 class="mb-0" style="text-align:center; color:white;">Your chatbot is here!
</h5>
<div class="d-flex flex-row align-items-center">
<i class="fa fa-minus me-3 text-muted fa-xs"></i>
<i class="fa fa-comments me-3 text-muted fa-xs"></i>
<i class="fa fa-times text-muted fa-xs"></i>
</div>
</div>
<div class="card-body" data-mdb-perfect-scrollbar="true" style="height: 440px;
overflow-y:auto">
<h5>Let's Chat<img style=""></h5>
<div id="chatbot">
</div>
</div>
<div class="card-footer text-muted d-flex justify-content-start align-items-
center p-3" style="text-align:center; background-color:#3792cd">
<div class="input-group mb-0">
<input type="text" class="form-control" id="textInput" name="userMessage"
placeholder="Type message"
aria-label="Recipient's username" aria-describedby="button-addon2" />
<button type="submit" id="buttonInput" style="padding-top: .55rem;">
Send<i class="fa fa-send" style="padding-left: 0.5em;"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<section>
</form>
Here is my Java scripts:
function getUserResponse(){
var userText = $('#textInput').val();
var userHTML = "<div class='userhtml'><div class='img'><img style='width:36px'
src='https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png'/></div><div
class='userText'><span>"+userText+"</span></div></div>";
$('#textInput').val("");
$('#chatbot').append(userHTML);
$.get('/getResponse',{userMessage:userText}).done(function(data){
var returnedMessage = "<br/><div class='bothtml'><img style='width:46px'src=''/><p
class='botText'><span>"+ data +"</span/></p></div>";
$('#chatbot').append(returnedMessage);
})
}
$('#buttonInput').click(function(){getUserResponse();})
if you tell me how to store the conversation into the django model it will be really appriciated too
Thankyou!
I have multiple columns like this
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>
What I am looking for is get value of nearest p text inside flip-card-front class when I click copy class image icon. I am new in javascript and does not getting idea how I can do it.
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
//get text નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
console.log("p tag value which is inside flip-card-front");
});
}
I am trying from last hour but have not found any working solution for achieve my goal. Let me know if someone here can help me for same. Thanks!
regarding your structure
you search closest blog_content, from there search flip-card-front p:
copy[i].addEventListener('click', evt => {
const el = evt.target.closest('.blog_content');
const mySearchedText = el.querySelector('.flip-card-front p).innerHTML;
});
not tested but should be ok
You you need to do:
Navigate to the necessary node.
For this, you will have to go to common parent in the DOM tree. You can use .closest to do that.
Once you have parent, you can lookup any necessary element from it
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
const content = this.closest('.blog_content')
const cardFront = content.querySelector('.flip-card-front p')
const text = cardFront.textContent;
console.log(text)
});
}
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<c:forEach items="${datelist}" var="list" varStatus="status" >
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight"
aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">${"Day"} ${status.count}</strong>
<small>${list}</small>
</div>
<div class="col-10 mb-1 small">${city.name}</div>
</a>
</c:forEach>
</div>
Above is my code. When 1day is clicked, I want to change the background color corresponding to 1day's div to red.
And when 2day is clicked, I want to return the color of 1day back to blue and change the background color to red only for 2day.
How can I do this?
Have a look at this
CSS could be this
#schedulelist a strong:active { background-color: red }
and you could use checkboxes too in combination with the + selector.
Here I use JavaScript
const schedulelist = document.getElementById("schedulelist");
const items = schedulelist.querySelectorAll("a strong")
const activate = e => {
const tgt = e.target;
items.forEach(item => item.classList.remove("active"));
if (tgt.tagName==="STRONG") tgt.classList.add("active");
};
schedulelist.addEventListener("click",activate)
//schedulelist.addEventListener("mouseover",activate)
#schedulelist a strong { background-color: blue }
/* #schedulelist a strong:active { background-color: red } */
#schedulelist a strong.active { background-color: red }
<div id="schedulelist" class="list-group">
<label class="sclist" for="sclist">List</label>
<input id="sclist" type="checkbox">
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">1</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">A</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">2</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">B</div>
</a>
<a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">3</strong>
<small>list</small>
</div>
<div class="col-10 mb-1 small">C</div>
</a>
</div>
I have this collapse in my Laravel project using data from database :-
<div class="col col-md-5">
<div class="card">
<div class="card-header text-right">
<h4>{{__('home.course_card')}}</h4>
</div>
<div class="card-body">
<div id="accordion" >
<div class="card">
#foreach ($mysection as $section)
<?php $sec_name='home.sec'.$section->section_name ;
$collaps_count++;
?>
<div class="w-100 card-header py-0 px-0" id="" style="border: none">
<button class=" btn w-100 text-right bg-light " type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" >
<h5 class="">{{__($sec_name)}}</div></h5>
</button>
</div>
<div style="height:5px"></div>
#foreach ($course->Lession as $lession)
#if ($section->section_name == $lession->section_name)
<div id="collapseOne" class="collapse <?php if($collaps_count == 1) echo
'show'?>" aria-labelledby="headingOne" data-parent="#accordion">
<div class="flex-row d-flex justify-content-between text-right mx-auto
w-100 py-2">
<div>- {{$lession->$less_lang}}</div>
#if ($lession->id==$order->lession_id)
<div class="text-left ml-2"><i class="material-icons"
style="color:green">visibility</i></div>
#else
<div class="text-left ml-2"><i class="material-icons"
style="color:grey">visibility</i></div>
#endif
</div>
</div>
#endif
#endforeach
#endforeach
</div>
</div>
</div>
</div>
</div>
When I have more than two collapse data the switch between them not work correctly ,when I press in first one both second and third collapse open,
How can I make toggle between many collapse depend on data from server?
I solved first issue which happened as a reason of same id name of collapse ,therefore I used this code to change id names :
$collaps_count++;
$nf = new NumberFormatter("en", NumberFormatter::SPELLOUT);
$numbers_name=$nf->format($collaps_count);
$numbers_name=ucfirst($numbers_name);
$collapse_id='collapse'.$numbers_name;
$heading='heading'.$numbers_name;
How to get values from 2 card and store in array using jquery. i want Store card value like this given below using dynamic way.
array(
card_1{
a:'AAA',
b:'BE',
c:'ECE',
d:'June 1994',
e:'Pursuing',
f:'Full-Time',
g:'AAAA',
h:'BBBB',
i:'//placehold.it/115'
},
card_2{
a:'BBB',
b:'BE',
c:'CSE',
d:'June 2000',
e:'May 2010',
f:'Part-Time',
g:'DDDD',
h:'CCCC',
i:'//placehold.it/115'
},
)
<div class="content with-padding col-sm-12 no-border education">
<div class="card flex-row flex-wrap border-bottom m-3 " style="border:none;">
<div class="card-header no-border p-0">
<img src="//placehold.it/115" alt="">
</div>
<div class="card-block col-sm-10 no-border p-2">
<h5 class="card-title m-0 p-0">AAA</h5>
<p class="card-text m-0 p-0">BE-<span>ECE</span></p>
<p class="card-text m-0 p-0">June 1994 - Pursuing. <span>Full-Time</span></p>
<p class="card-text m-0 p-0">AAAA,BBBB</p>
</div>
<div>
<button class="float-right rounded-circle education-remove ripple-effect "><i class="icon-material-outline-delete text-danger ml-2"></i></button>
<button class="float-right rounded-circle ripple-effect "><i class="icon-feather-edit "></i></button>
</div>
</div>
<div class="card flex-row flex-wrap border-bottom m-3 " style="border:none;">
<div class="card-header no-border p-0">
<img src="//placehold.it/115" alt="">
</div>
<div class="card-block col-sm-10 no-border p-2">
<h5 class="card-title m-0 p-0">BBB</h5>
<p class="card-text m-0 p-0">BE-<span>CSE</span></p>
<p class="card-text m-0 p-0">June 2000 - May 2010. <span>Part-Time</span></p>
<p class="card-text m-0 p-0">DDDD,CCCC</p>
</div>
<div>
<button class="float-right rounded-circle education-remove ripple-effect "><i class="icon-material-outline-delete text-danger ml-2"></i></button>
<button class="float-right rounded-circle ripple-effect "><i class="icon-feather-edit "></i></button>
</div>
</div>
</div>
You would need to iterate through each card-block and access the card-block's card-title and again iterate through the card-block's inner card-text children and get their text nodes. You could use the following example to get the values of these text nodes and then you would need to use regex to filter the values for your json string
$(function()
{
$('.card-block').each((index, value) =>
{
var title = $(value).find('.card-title').text();
console.log(title);
$(value).find('.card-text').each((textIndex, textValue) =>
{
var cardtext = $(textValue).text();
console.log(cardtext);
});
});
});