I need to show a popup along with custom information if customer select radio button.
You need to use javascript
document.addEventListener('input',(e)=>{
if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})
1 Like
I am a newbie, make a pardon nonsense mistake.
I just take code form https://jsfiddle.net/IA7medd/pd86o68u/2/
and put into my local system after run the code i will something like,
my localhost code:
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='bn']").click(function() {
var radio_value = $(this).val();
if (radio_value == '0') {
$("#contact").fadeIn("slow");
$("#dlcert").fadeOut("slow");
} else if (radio_value == '1') {
$("#dlcert").fadeIn("slow");
$("#contact").fadeOut("slow");
}
});
});
$('input[name="bn"]').change(function() {
if($(this).is(':checked') && $(this).val() == '0') {
$('#myModal').modal('show');
}
});
</script>
</head>
<body>
<div class="container-fluid myBackground2">
<div class="row">
<div style="text-align: center;">
<div style="display: inline-block; text-align: left">
<h3>Name: %Name Goes Here%</h3>
<h3>garbage</h3>
<p> </p>
<blockquote>
<p>Is the information above accurate?</p>
</blockquote>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 optionFill" style="text-align: center;">
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio1" value="1" name="bn">
<label for="inlineRadio1">Yes</label>
</div>
<div class="radio radio-danger radio-inline">
<input type="radio" id="inlineRadio2" value="0" name="bn">
<label for="inlineRadio2">No</label>
</div>
<p> </p>
<a href="http://google.com" button type="button" class="btn btn-primary btn-lg" id='dlcert' style="display: none;">Download Certificate</a>
<div id="contact">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Contact
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Incorrect Certificate Information</h4>
</div>
<div class="modal-body" style="text-align:center;">
<p>Please contact Nathan Finch at PPE</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any help thanks
You are using jQuery, so you going to have to add the jQuery library.
Add this above the javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I’m assuming you have a continuous internet connection otherwise you going to have to download a standalone jQuery Library.
BTW doing something that you are doing would be easy to do in vanilla-js as well. I’m a vanilla-js person and I haven’t worked in JQuery for sometime, so I will probably be no help there. However, I am sure others here are more comfortable with JQuery.
after adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
output nothing changes.
https://www.phphelp.com/uploads/default/original/2X/2/22d01a9e66d845472c92d2b5f8903daf10d4786e.png
I’m a Vanilla-js person, so I’m not going to be that helpful with jQuery as I haven’t worked with jQuery in a long time. However, I’m sure others are and will be able to help. Though I can say console.log is a great debugging tool that you use with most browser. Do a Google search should have tutorials on how to use it.
1 Like
Thank You for your help 