Javascript create button and trigger onclick function on HTML - javascript

I'm facing an issue , where the javascript is responsible to create the button then show it on HTML( Pop up box ).
Once it's created, i want the user to freely click a button to close it.
The workaround is by setting the modal.style.style=display
.
In the HTML:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close'>×</span>
<div id ="sub" >
</div>
</div>
I have a function to create a modal box upon getting success variable, i'm appending to the id sub.
div.innerHTML =
"<div id=''><span class='close'><input type='image' id='vicious' onclick='clear()' style='width:100%;' border='0' src='images/DUK.png' ></span></div>"
When it shows on HTML, i want to trigger an onclick function to close this modal box.
Because everything is created by the javascript, so I think the issue it's not triggering any line.
I've tried creating an onclick function to trigger
var modal = document.getElementById('myModal');
function clear(){
modal.style.display = "none";
}
I've also tried
var modal = document.getElementById('myModal');
var vicious = document.getElementById("vicious");
vicious.onclick = function() {
modal.style.display = "none";
}
I'm out of idea, could someone guide me?
Thanks in advance.
JSBIN: http://jsbin.com/rusapudodo/edit?html,js,output

As you are using jQuery, you can achieve hiding of modal as per below steps,
Remove binding of click event, onclick='clear()'. This is not needed.
Bind listener to the element with id as vicious using,
$('#vicious').click(function() {
$('#myModal').modal('hide');
});
Alternatively try the following approach,
$("#vicious").on("click", function(e){
$("#modal").modal("hide");
e.stopPropagation();
});
Stop the event from bubbling up.
If you want to use vanilla javaScript onlt then include the following code after you set the inner html,
var btn = document.getElementById("vicious");
btn.onclick = function() {
alert();
modal.style.display = "none";
}

You can try something like that :
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class='modal-header'>
<span class='close' onclick="close()">×</span>
<div id="sub">
</div>
</div>
</div>
</div>
<script>
function close(){
document.getElementById('myModal').style.display = 'none';
}
</script>

You need to move the selector inside the function:
function clear() {
var modal = document.getElementById('myModal');
modal.style.display = "none";
}
EDIT: using your second technic:
div.innerHTML = ...;
var vicious = document.getElementById("vicious");
vicious.onclick = clear;

For disabling button, you can use the below code
$("#button0000000001").find("button").attr("disabled", true);

Related

show a modal on a different file after completing registration on another file

I have a registration button when I click on it to submit and if registration is successful, will redirect to another page and THEN show the modal I have what code should I have to achieve this?
REGISTRATION:
<input type="submit" class="btn form-control color-white mwc-orange-background-color" id="register" name="register" value="REGISTER">
MODAL: (again this is the HTML file that registration redirects to if successful and submitted)
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Welcome, New White Card Holder!</h2>
</div>
<div class="modal-body">
<h3>Congratulations! you are entitled for a 30-day free trial of our <img src="../img/ribbon-elite.png" class="small-icon"> Elite Membership.</h3>
<h3>You may begin browsing our cards right away as soon as you close this window</h3>
<h3>Also, if you wish to avail of our other membership options, click here.</h3>
<h3>Enjoy a wealth of deals for wellness!</h3>
<br>
</div>
</div>
</div>
I have this javascript the triggers the modal but id like to know how to do this when the registration is submitted.
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I think I can't exactly place the modal in the registration file since it just redirects to another page.
will appreciate any coded help given thank you
UPDATE: heres what i tried based on the example provided
<?php
if(isset($_POST['register']) && $_POST['register'] == 'REGISTER') {
?>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php
}
?>
my if condition "if(isset($_POST['register']) && $_POST['register'] == 'REGISTER')" is the same line that works when a registration is valid. i assumed it will do the same with ".modal('show')" but the modal does not show up.
PS. i added that if condition on the page that gets redirected after registration is successful.
Does registration redirect to some general page that could be opened with or without modal?
If so you could use GET parameter.
For example some-page?showModal=true
Then based on value of that parameter you could decide whether show or not modal onLoad of given page.
Make a session active after successful form submit and show the modal if that session is active. Refer following code:
<?php
if($_POST)
{
//Your code goes here
......
$_SESSION["msg_succ"]=true;
}
if(isset($_SESSION["msg_succ"])){
?>
<script>
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php
}
?>

How can I know which button called my javascript?

Good day,
I have three buttons - let's call them myBtn1, myBtn2 and myBtn3 - doing basically the same operation (i.e. opening a div in modal mode).
I am a little bit stuck to know "who" (i.e. which button) called my javascript. Is there an easy way to know that or do I need to duplicate my javascript part ?
Sorry if the question may sound silly.
Thanks a lot for your help.
Cheers
My html code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn1">Open Modal</button>
<button id="myBtn2">Open Modal</button>
<button id="myBtn3">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal... </p>
<p>Called by [myBtn1 or myBtn2 or myBtn3] </p>
</div>
<script type="text/javascript" src="./scripts/modal.js"></script>
</div>
</body>
</html>
My javascript (modal.js) :
/*
modal.js
*/
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
The event listener is passed an event object. It's target property is the element on which the event was fired.
document.querySelectorAll("button").forEach(function (e) {
e.addEventListener("click", function (event) {
console.log(event.target)
});
});
<div>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
</div>
You can use event.target in your event handler to determine the object that dispatched the event. This way you can easily attach one handler to the parent to process events on all of its children.
document.getElementById("div").onclick = function(e){
console.log(e.target);
}
<div id="div">
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
</div>
<button id="myBtn1" onclick="btnclick(this)">Open Modal</button>
<button id="myBtn2" onclick="btnclick(this)">Open Modal</button>
<button id="myBtn3" onclick="btnclick(this)">Open Modal</button>
And in your javascript function you can see:
function btnclick(ref){
var id = $(ref).attr('id');
}
Since you have included the js using the script tag in your HTML file, all the js functionalities and events will be available.
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
there is a mistake in your code, you should provide a valid id.
var btn = document.getElementById("myBtn1"); // this will work
now myBtn1 will initiate the onclick call
// in your modal.js
document.querySelectorAll("button").forEach(function (e) {
e.addEventListener("click", function (event) {
console.log(event.target)
});
});

jQuery replace div content

I am playing around with Bootstrap modal and I want to change content of div when clicking a button. Here is the code :
html code of modal content
<div class="modal-content">
<div class="modal-body">
<div id="login-box" class="animated fadeIn">
Login form
<button id="show-register">Register</button>
</div>
<div id="register-box" class="animated fadeIn">
Register form
<button id="show-login">Login</button>
</div>
</div>
</div>
css styling
#register-box {
display: none;
}
javascript function to hide/show div
$(document).ready(function(){
loginRegisterSwitch();
});
function loginRegisterSwitch(){
var registerBtn = $("#show-register");
var loginBtn = $("#show-login");
var registerBox = $("register-box");
var loginBox = $("#login-box");
registerBtn.on('click',function(){
loginBox.hide();
registerBox.css('display','block');
});
loginBtn.on('click', function(){
registerBox.hide();
loginBox.css('display','block');
});
}
When user clicks register button, login-form div hides and register box shows.I can't get this code working(When user click register button , register div shows but login div does not hide). I would like to know if there is a better way to achieve this for example using jQuery html()
You're missing the # in the selector for the registerBox.
Change var registerBox = $("register-box"); to var registerBox = $("#register-box");

Show fancybox with class instead of id

I am at the beginning to learn Javascript. And I hope you can help me.
I want to use a fancybox if someone clicked on a link with a class attribute. I have done it also with an id. With id attributes the code works very fine. But if I cange it with class attributes it doesn´t work.... :(
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
This code works very fine. But why don´t work this one with only class attributes? The code have also the same element as the upper one. Only the following lines of codes have been changed.
<button class="myBtnNew">Open Modal New</button>
var myBtnNew = document.getElementsByClassName("myBtnNew");
myBtnNew.onclick = function() {
modal.style.display = "block";
}
Thank you for your help...
getElementsBy as it says, resturns multiple elements, a list. So myBtnNew is a list of elements and the list does not have an onclick. So just add the [0] as you did with span :
var myBtnNew = document.getElementsByClassName("myBtnNew")[0];
document.getElementsByClassName returns an array of objects, not just one object. Use this:
var myBtns = document.getElementsByClassName("myBtnNew");
myBtns[0].onclick = function() {
modal.style.display = "block";
}

Can't Create more than one Button Modal

I duplicate my modal button and The problem is I can't show "Open Modal 2" in my code.
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
Here is my complete code:
https://jsfiddle.net/dedi_wibisono17/xn3npwc4/
What should I do? Thank You
You should use different ID for your "Open Modal 2" elements.
According to definition and usage from W3School,
the getElementById() method accesses the first element with the specified id.
In my humble opinion you ignored what id means
Two button's ids are same which captions are Open Modal and Open Modal2
So btn variable is connected with only first element which id is myBtn
var btn = document.getElementById("myBtn");
Thanks
Try this. Hope it helps :)
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<button id="myBtn2">Open Modal 2</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
You have same id for yours button "Open Modal" and "Open Modal 2". When you write var btn = document.getElementById("myBtn"); then you got first of two of yours button. And any events you bind only for this first button. So you need to change id of second button for something like 'myBtn1' and use something like this piece of code to set event handlers:
function setModal(btn,modal) {
btn.onclick=function() {
modal.style.display="block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var span=modal.querySelectorAll(".close") [0];
span.onclick = function() {
modal.style.display = "none";
}
};
setModal(document.getElementById("myBtn"),document.getElementById('myModal'));
setModal(document.getElementById("myBtn1"),document.getElementById('myModal'));
I've modified your fiddle here: https://jsfiddle.net/1fgmfpfc/
Your HTML id conflict in Javascript ,it's a major issue of your code. document.getElementById always bind your upper HTML code like as when u change your modal2 code upper above than modal1 then modal2 open but not open in modal1, so define different HTML id or try to dynamic name of HTML id.

Categories

Resources