I've been through 2 web-related classes with similar projects in popup using html and javascript, but the problem is that the popup either won't show at all or showing for half a second and immediately closing on itself. I can't post the whole code, but here's the rough block of code (I put the script at the very bottom of the file, outside the html tag):
<script type="text/javascript">
var popup = document.getElementById('popup');
var btn = document.getElementById('btn_popup');
var close = document.getElementById('close');
btn.onclick = function(){
popup.style.display = "block";
}
close.onclick = function(){
popup.style.display = "none";
}
</script>
<html>
<body>
<div id="titleBar">
<h2>Title</h2>
<div>
<form action="page.php" method="get">
<input type="text" name="item"> by
<select name="search">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3">Value 3</option>
</select>
<input type="submit" value="SEARCH">
<button id="btn_popup">Popup Button</button>
</form>
</div>
</div>
<div id="popup">
<div id="popup_content">
<header>
<span id="close">X</span>
<p>Popup Form</p><br>
</header>
<article>
<div>
<form method="POST" action="page.php">
<input type="text" name="n1" placeholder="N1">
<input type="text" name="n2" placeholder="N2">
<input type="text" name="n3" placeholder="N3">
<input type="text" name="n4" placeholder="N4"><br>
<select name="list">
<option value="">Select One</option>
<?php
//code to generate options
?>
</select><br>
<input type="submit" value="Click">
</form>
</div>
</article>
</div>
</div>
</body>
</html>
I copied these parts of code from other pages, but they no longer work on this page but they work on the previous page without any problems. I also use PHP to generate the dropdown list in the popup form. In the previous page, the popup shows like it should be, but in this page the popup only shows for like half a second and closes by itself.
Is there any fix to this? Or at least any clues on the problem? And please don't recommend me to use framework (other than w3, but not w3 modals) to fix this. I'm using the latest Google Chrome to view these files, already tried with Mozilla as well but gives the same result.
The problem is that this:
<form action="page.php" method="get">
causes a load of page.php when you click the button.
The reason for this is that the default "type" of a button tag is "submit".
Just add type="button":
<button type="button" id="btn_popup">Popup Button</button>
but the problem is that the popup either won't show at all or showing for half a second and immediately closing on itself.
This is because the form is getting submitted once u clicked on popup button.
Keep your popup button outside of the form, otherwise you have to handle prevent events.
<form>
//your code
</form>
<button id="btn_popup">Popup Button</button>
I created a fiddle, please check it once
https://jsfiddle.net/ponrajpaul/42g9bk3c/
Related
I'm working on an HTML file that acts as its own page in an Electron App. In this file, I have a button, which shows a pop-up form upon clicking.
Here's the relevant code for the button and the content that pops up:
<button class="open-button" id="openConfig">Change Configuration</button>
<div class="modal-content" id="networkConfig">
<div class="modal-header">
<h2>Configuration Settings</h2>
</div>
<div class="modal-body">
<p>To get started, enter some initial information about the network you want to configure.</p>
<p>Leave the number of nodes as zero if you would like to start from scratch.</p>
<br />
<p>Number of nodes:</p>
<input type="number" id="nodeNumber" value="0" min="0" max="30">
<br /><br />
<p>Preference:</p>
<div>
<input type="radio" id="prefsecure" name="option" value="Secure" checked>
<label for="prefsecure">Secure (Recommended)</label>
</div>
<div>
<input type="radio" id="prefefficient" name="option" value="Efficient">
<label for="prefefficient">Efficient</label>
</div>
<br />
</div>
<div class="modal-footer">
<button type="submit" class="btn">Start Configuration</button>
<button type="button" class="btn cancel" id="closeConfig">Cancel</button>
<br /><br />
</div>
</div>
Also, here are the relevant javascript functions that allow me to open/close this pop-up:
function openForm() {
document.getElementById("networkConfig").style.display = "block";
}
function closeForm() {
document.getElementById("networkConfig").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('openConfig')
.addEventListener('click', openForm);
});
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('closeConfig')
.addEventListener('click', closeForm);
});
What I would like to do is take that content that pops up when the button is clicked (the button's id="openConfig") and put that into a separate HTML file (the id of the content I want in a separate file is "networkConfig"). This is to help compartmentalize my code. How can I make the button refer to this other file? Anyone has any leads? I would greatly appreciate any help at all!
Also, I apologize if I've made any mistake while posting this. It's my first post to stackoverflow, and I haven't been able to find what I'm looking for these past few days. Thank you for reading!
If i got it right, the way for you to do that is to either POST the content you want to reuse somewhere, initializing an empty variable, adding the markdown and thus being able to prompt it elsewhere, or save a temporary file containing the markup (insecure).
I want the text box to go away once data is sent via POST method.
But I cant get the Javascript to work. Page keeps Re-loading and therefore, textbox is always there.
<script>
function puff()
{
if (document.getElementById("updat").style.display == "block")
document.getElementById("updat").style.display = "none";
else
document.getElementById("updat").style.display = "block";
}
</script>
</head>
<body>
<div class="container" id="upd">
<form class="form-signin" action="rough_page.php" method="POST">
<div class="input-group" id="updat">
<input type="text" name="text1" class="form-control" value=""/>
<input type="text" name="text2" class="form-control" value=""/>
<input type="text" name="text3" class="form-control" value=""/>
<input type="text" name="text4" class="form-control" value=""/>
<input type="hidden" name="flag" class="form-control" value=""/>
</div>
<button class="btn btn-lg btn-primary btn-block" onclick="puff()" type="submit">Update</button>
</form>
</div>
</body>
Once I click the button I want the textboxes disappear and, I want want them to Reappear once I click the button again.
Notice that you're doing a form submit every time you press the button and therefore, the browser must "reload" the page. And I put quotes because it's not a real reload. If you put in other destination you will see that you go to another page, because it's the form destination.
If you want to avoid that reload, there are several ways to do it, like preventing the submit event, changing the submit type button to a normal button,... some ones are more correct than the others.
Then you should handle your request with AJAX, like #Andreas suggested you.
When you handled your request like that, you can fix the problem with you text boxed being showed or not, like #Rahele suggested you for example.
Anyways, try to take a look on javascript documentation, because the whole thing sounds like you don't understand some basics of how the form submits work.
try this :
function puff() {
var x = document.getElementById("updat");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
I'm building an app in django and I've got a filter form that is a dropdown and you can switch between "new" and "popular" (aka filter by date or number of votes). I decided that I want this to be formatted as buttons (kind of like how it is on yik yak) where it is easier to toggle between the two.
I am using django widget tweaks to display my forms so my generated HTML looks like:
<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid">
<input type="hidden" name="csrfmiddlewaretoken" value="io55AwNMPKNzAkv69qWkcRzqNV7mwo1w">
<div class="form-group">
<label class="col-sm-1 control-label" for="id_filterType">Filter By</label>
<div class="col-sm-11">
<select class="form-control" id="id_filterType" name="filterType" onchange="this.form.submit();">
<option value="0" selected="selected">Most Recent</option>
<option value="1">Popularity</option>
</select>
</div>
</div>
</form>
UPDATE: I tried writing this javascript function to select the choice in my form
function filter(valueToSelect) {
var item = document.getElementById('id_filterType');
console.log(item);
if (item) {
item.value = valueToSelect;
}
}
And lastly in my HTML template I have two buttons
<button class="btn btn-primary" onclick="filter('0');">New</button>
<button class="btn btn-primary" onclick="filter('1');">Hot</button>
When I click the buttons, the selected option in my form changes but it doesn't submit, which does not make sense to me since it is supposed to automatically submit when the option is changed. Any ideas?
Still not sure why the form was not automatically submitting with onchange="this.form.submit();" but I ended up adding a name attribute to my form
<form action="/board/Intuna/" method="post" class="ng-pristine ng-valid" name="filter-form">
And then added to my javascript function
document.filter-form.submit();
and now it works! And to finish it up I wrapped the filterType field with <div class="hidden"> and everything looks/works perfectly!
I'm using a javascript search engine from this script page that allows me to select different providers/search engines to perform a google like search, but I'm trying to make it open in a new window after I press the send button, without success.
I've already tried to use:
target="_blank"
in <input type="button" value="Send" onClick="startSearch()" target="_blank"> and nothing happens, or:
<form name="searchForm" target="_blank">
Nothing!
I've also tried to use _new instead of _blank and didn't work either.
Finally, I've tested what suggested on w3schools.com example but unfortunately again a failure.
Can you please, guys, help? Thanks!
try something this if you want to open a new tab link by your button-
<a href="http://www.stackoverflow.com/" target="_blank">
<input type="button" value="Send" />
</a>
Quick and dirty, you can use the window.open(); method to open the search in a new window, here's some updated HTML:
<form method="GET" action="#" id="search-form">
<p><label>Search for: <input type="text" id="q" /></label></p>
<p><label>Search from: <select id="engine">
<option selected="selected" value="http://www.google.com/search?q=">Google</option>
<option value="http://www.bing.com/search?q=">Bing</option>
<option value="http://search.yahoo.com/search?p=">Yahoo!</option>
<option value="http://search.aol.com/aol/search?q=">AOL</option>
</select></label></p>
<p><input type="button" value="Send" id="send" /></p>
</form>
And the JavaScript:
<script>
var ID = function(str){return(document.getElementById(str));};
ID('send').addEventListener('click', function(){
var search = ID('q').value, select = ID('engine'), engine = select.options[select.selectedIndex].value;
if(!search) {
alert('Please include a search string');
} else {
window.open(engine + search);
}
});
</script>
Just make sure to call that at the end of the page or put it in a DOMContentLoaded event or something.
MDN Docs on window.open()
To open the link in a new window, since you are using a <form> instead o an <a> link, you have to change the javascript shown in the example, first adding an ID to the form so it is easilly accessible via the DOM:
<form id="searchForm" name="searchForm" target="blank">
Then, change the last javascript line so instead of the location.href, it changes the form's action and submits it:
document.getElementById("searchForm").action = finalSearchString;
document.getElementById("searchForm").submit();
Example:
https://jsfiddle.net/vj99ux9e/
I'm testing out using a normal HTML drop-down menu, and I've encountered a problem when it comes to the submit button of this...
The following is my code:
<head>
<script>
function submitButton()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>
<select id="myList">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<button onclick= 'submitButton()'> Submit </button>
<p>You chose: <span id= 'favorite'> </span></p>
</form>
</body>
Now when I run this code through Live in Adobe Dreamweaver, it works exactly how I want it to; when I choose something from my drop-down menu and press the submit button, the specific letter turns up after 'You chose:'.
However, when I run it in Google Chrome and Safari, it turns out different. When I choose from the drop-down and press 'Submit', the letter appears in its spot for a split second, then the page seems to automatically refresh, leaving the drop-down at its original value, and the <span> blank. Does anyone know why, and how I can solve this from happening?
By default a <button> in a form will submit the form loading the action url of the form or the same page if it doesn't have one.
Just change the button type to button which will prevent it from submitting the form.
<button type="button" onclick= 'submitButton()'> Submit </button>
you could try this also
<head>
<script>
function submitButton()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").innerHTML=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>
<body>
<form>
<select id="myList">
<option> </option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<input type="button" onclick= 'submitButton()' value="Submit" />
<p>You chose: <span id= 'favorite'> </span></p>
</form>
</body>