This question already has answers here:
How can I prevent refresh of page when button inside form is clicked?
(16 answers)
button not working when placed inside form
(3 answers)
Closed 8 days ago.
There is the following code:
<div class="my-page">
<!-- <form id="my-form"> -->
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<fieldset id="my-fieldset">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">1234</button>
<div id="File1" class="dropdown-content">
1
2
3
4
</div>
</div>
</fieldset>
<!-- </form> -->
</div>
If you comment out in it, then everything works correctly. Otherwise the work is wrong
Can someone explain what is wrong here?
A button has by default the type submit. Submit buttons in a form will submit the form, reloading the page.
If you want to use a button inside a form that does not submit the form, give it type "button" explicitly.
<button type="button" onclick="myFunction()" class="dropbtn">1234</button>
Related
This question already has an answer here:
what are data-* HTML attributes?
(1 answer)
Closed 4 months ago.
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap home">
<nav class="header row">
</nav>
<!-- Off Canvas Menu -->
<aside class="right-off-canvas-menu">
<!-- close the off-canvas menu -->
<!-- whatever you want goes here -->
<div class="close">
In the first line, I can understand after div the class. Then, data-offcanvas. What is this? I noticed this while viewing the "view source page" of a web page.
Please help me to understand above html code.
data-offcanvas is a non standard or custom attribute which in this case appears to have no value.
You can read more in this here:
https://www.w3schools.com/tags/att_data-.asp
This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 1 year ago.
I would like to change a HTML class with JavaScript!
<div class="not-submitted-check" data-submit-check>
<i class="fas fa-check-circle"></i> Thank you for contacting us,
<button type="button" class="close"><i class="fas fa-times"></i></button>
</div>
I want the div class to change when i press the submit button
<button type="submit" class="submit" data-submit-button>submit</button>
const submitButton = document.querySelector("[data-submit-button]");
submitButton.addEventListener("submit", handleSubmit);
I want to create a function where the moment i press the button the classes change one with another
Use this:
element.classList.remove("oldclass");
element.classList.add("newclass");
This question already has answers here:
Nifty Modal - how to trigger a modal without a button
(7 answers)
Closed 7 years ago.
I want to show my nifty window modal popup on page load. This is my nifty window popup modal code:
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>Modal Dialog</h3>
<div>
<p>This is my first nifty modal window. </p>
<button class="md-close">Close me!</button>
</div>
</div>
</div>
Thanks in advance.
I've looking in to the source code of the demos, and I believe that this would do the trick:
$(function() {
$('#modal-1').addClass('md-show');
});
I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>
It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...
There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.
The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>
I have this piece of HTML:
<div class="pop-up rooster-toevoegen">
<div class="pop-up-container">
<div class="pop-up-header clearfix">
<div class="pop-up-title">
Rooster toevoegen
</div>
<div class="sprite close"></div>
</div>
<div class="pop-up-content clearfix">
<form id="rooster-toevoegen-form" class="form rooster-toevoegen-form">
<div class="afdeling-container">
</div>
<div class="date-container">
</div>
<div class="button-container clearfix">
<button value="" name="rooster-toevoegen-button" class="rooster-toevoegen-button button-green">Toevoegen</button>
</div>
</form>
</div>
</div>
</div>
Now I want a click function on .rooster-toevoegen and exclude all children from this click function EXCEPT the button. Also the button has already a function(submitting the form), this must stay the buttons event handler.
CONTEXT:
This is a pop-up with a form inside. When the user clicks next to the pop-up the pop-up has to close. Not when clicking on the pop-up which happens when I don't exclude the children from the click event. BUT when the user clicks on the button the form has to submit. So the button should not be excluded from the click and perform his own action.
How do I do this?
You can prevent from bubbling to all elements using e.preventDefault(), and manually trigger click on button.
Better way is to bind one more click event only to button.