when i click the image and click add button image name should shown on alert message.but it is now working. what i tried the code so far i attached below if i click Chocolate image alert msg displayed Chocolate same like i need to do.
this is the form
<div class="form-group">
<div >
<img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal" >
<b>Chocolate</b>
</div>
<div>
<img src="images/mango.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Mango</b>
</div>
<div >
<img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Venila</b>
</div>
<div >
<img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Strawberry</b>
</div>
<div>
<img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100" >
<b>MixFruit</b>
</div>
<input type="button" class="btn btn-info" value="ADD" onclick="add()">
</div>
</form>
if i click Chocolate image alert msg displayed Chocolate same like i need to do jQuery
function add()
{
if("Chocolate")
{
alert("Chocolate");
}
else if("Venila")
{
alert("Venila");
}
else if("Strawberry")
{
alert("Strawberry");
}
else if("Mixfruit")
{
alert("Mixfruit");
}
Try like below :
var a="";
//on click of image get id value
$("img").on("click",function(){
a=$(this).prop('id')
});
function add() {
if(a==="Chocolate")
{
alert("Chocolate");
} else if(a==="Venila")
{
alert("Venila");
} else if(a==="Strawberry")
{
alert("Strawberry");
} else if(a==="MixFruit")
{
alert("Mixfruit");
} else{
alert("Mango");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group">
<div>
<img class="photo" id="Chocolate" src="images/chocolate-ice.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Chocolate</b>
</div>
<div>
<img src="images/mango.jpg" id="Mango" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Mango</b>
</div>
<div>
<img class="photo" id="Venila" src="images/venila.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Venila</b>
</div>
<div>
<img class="photo" id="Strawberry" src="images/sww.jpg" width="100" height="100" data-toggle="modal" data-target="#exampleModal">
<b>Strawberry</b>
</div>
<div>
<img class="photo" id="MixFruit" src="images/mixfruit.jpg" width="100" height="100">
<b>MixFruit</b>
</div>
<input type="button" class="btn btn-info" value="ADD" onclick="add()">
</div>
</form>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments