I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.
I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.
I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)
The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.
I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.
i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.
Live demo here: museum.smallfilms.ch/drei
The code for the form is the following:
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>Katalog:</h1>
<p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
<p>
<form onsubmit="searchpage()">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>
The Javascript code is the following:
function searchpage() {
var num = document.getElementById('num');
var targetFrame = document.getElementById('targetFrame');
if (num.value) {
var page = 'pages/' + (+num.value) + '.html';
targetFrame.setAttribute('src', page);
}
}
If you need more code I can deliver this. Just let me know that you need.
The site is now designed to show something for the numbers 1 and 2.
The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)
I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.
Thanks in advance for any help and hint.
Dabbax
Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip
I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :
<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">
In this case, when you press enter, the form will be submitted and call the searchPage function.
On your code for the form, try:
<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>
edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.
That's why you should use button and not input here.
This could be your html:
<form id="searchForm" action="some_url">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<input type="button" value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>
Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like
$('.entr').keypress(function(event) {
if (event.which == 13) { // this is the enter key code
document.getElementById('searchForm').submit();
}
});
Related
I'm trying to follow this guide and I'm having a bit of an issue I can't figure out how to fix.
Basically in PassKeys.html you have these 2 following bits of code:
<button class="btn btn-success" onclick='start()'>Add Key</button>
function start(){
$("#modal-title").html("Enter a token name")
$("#modal-body").html(`<p>Please enter a name for your new token</p>
<input type="text" placeholder="e.g Laptop, PC" id="key_name" class="form-control"/><br/>
<div id="res"></div>
`)
$("#actionBtn").remove();
$("#modal-footer").prepend(`<button id='actionBtn' class='btn btn-success' onclick="begin_reg()">Start</button>`)
$("#popUpModal").modal('show')
}
Now I'm no JavaScript expert but I would wager that when I click that button (which I can see in my webpage) a function should run that activates a modal.
In the example provided by the guide things do work exactly that way, but in my application it doesn't seem to, and the code itself is exactly the same.
What could be the cause of that?
I´m trying to submit a HTML form while keeping content of displayed page on the screen and triggering browser to make an offer to save username and password.
<div id="signInForm" class="init">
<form>
<input id="username" type="text" placeholder="Username">
<br><br>
<input id="password" type="password" placeholder="Password">
<br><br>
<button type="submit">Sign in</button>
</form>
</div>
I´ve found out, that keeping content can be done various ways:
preventDefault(), onsubmit="return false", action="javascript:".
I successfully made work each of them. But each of them prevents browser (Chrome and Edge) from doing an offer of saving username and password. As long as I´ve learnt, an HTML form has a default behavior on submit which is navigating to the submission link. My theory is that the "navigating event" itself is what triggers an offer to save username and password. If I´m right, the only way to reach my goal is probably based on letting submission happen default way, while making browser keep the content somehow.
Bur all I ever get after hitting <button type="submit">Sign in</button> is a blank page.
Is it even possible to overcome this simply in Apps Script? Or am I missing something basic?
I tried to programmatically reload my page, but wasn´t able to do so. I don´t know how to work with reload().
I´ve tried this:
<!DOCTYPE html>
<html>
<body>
<div id="x">I´m ORIGINAL page</div>
<button onclick="document.getElementById('x').innerHTML= 'I´m EDITED page';">edit page</button>
<br>
<button onclick="myFunction()">Reload page</button>
</body>
<script>
function myFunction() {
window.location.reload(true);
}
</script>
</html>
The snippet above works for me in Stackoverflow snippet editor, but it doesn´t work in my published GAS web app.
EDIT Probably close to solution for my problem is answer in this post: Redirecting from doPost() in Google Web App, HTML form with App script where the author suggests this:
<form method="post" action="<?!= ScriptApp.getService().getUrl() ?>">
<input type="submit" value="submit">
</form>
But it does nothing for me when copied and pasted and I don´t know how to implement it any other way. It looks general...
I was having the same issue when trying to avoid the page to reload to a blank page. The solution that worked for me was a piece of code that is on Google Apps Script Documentation (I leave the link here)
I hope this solution can help you to solve the blank reloading issue.
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
</script>
First off, let me say I'm very much new to Javascript, and relatively clueless when it comes to the backend of the application I recently had developed. I'm working on the front-end design/minor functionality. So, if you could please keep that in mind with your answers, that'd be much appreciated!
I have an input field where a user can enter an address, and click submit to bring up a property results page.
<input type='text' class='main-search-address' id="main-search-address" placeholder="Enter Street Address">in Seattle, WA
<input value="Search" type="submit" class="submit" id='main-search'>
On the results page, there is a section where nearby addresses are displayed, via AJAX/js like so:
<span id="nearby_address">this gets replaced with an address</span>
For example
<span>1103 YAKIMA AVE S</span>
I'm looking for some javascript that will allow me to click the address in the span tag, have it paste into the input above, and automatically 'submit'-- all with one click.
Any help?
Thanks!
Change your search button code to:
<input value="Search" type="submit" name="submitSearch" class="submit" id='main-search'>
And your span code to:
<span id="nearby_address" onclick="FillSub()">
And then use this javascript code.
<script type="text/javascript">
function FillSub(){
var elem = document.getElementById("nearby_address").innerHTML;
var elem2 = document.getElementById("main-search-address");
elem2.value = elem;
document.NAME-OF-YOUR-FORM.submitSearch.click();
}
</script>
You should do a bit research before you ask a question next time. I was just curious how would I solve this myself, so I did. Edit the last value of the script, because you didn't post the name of your <form>.
My button with id "jump-button" is not working at all. Whenever it is clicked nothing will happen. (I have added a alert(); to the onclick attribute so I know when the button is working.
The other two buttons (next and prev) are working absolutely fine.
<body>
<div id="fact">Fact #1: In 2002, the most popular boat name in the U.S. was Liberty</div>
<input id="next" type="image" src="images/next-button.png" name="next" value="Next" onClick="num++;document.getElementById('fact').innerHTML=getFact(num);"/>
<input id="prev" type="image" src="images/prev-button.png" name="previous" value="Prev" onClick="num--;document.getElementById('fact').innerHTML=getFact(num);"/>
<p id="jump-text">Jump To Fact #</p>
<input id="textarea" type="text" name="factNumber" />
<input id="jump-button" type="image" src="images/jump-button.png" name="jump" value="Jump" onClick="alert();num = document.getElementById('textarea').value;document.getElementById('fact').innerHTML='getFact(num);"/>
</body>
External JS File (it has been inported in the HTML header)
facts = [element1, element2, ... wayy too many elements to have them all here];
var num = 1;
function getFact (num){
return 'Fact #' + num + ' ' + facts[num-1];
}
As you can see, this is a very simple app being built (something that just runs through various interesting facts). I am fairly new to javascript, so please excuse me if I made a very blatant error.
My CSS file is very nice and simple too, I doubt it it causing the trouble, but if it is required I will shot it upon request.
Lastly, the rest of the html <head> is also very simple (only consists of some meta data, title, css and javascript imports).
If anyone needs more information to help me get the "jump" button working, please ask.
You have a stray ' in your inline onClick attribute.
// ---------------------------------------------------v
onClick="...document.getElementById('fact').innerHTML='getFact(num);"
I have a piece of javascript which is initialized on the click of a button, and takes information from a form input to perform geolocation etc based on the data.
The issue I am having is that I have to place the button outside of the form in the html, otherwise when it is clicked, no javascript is fired!
This of course means that my users cannot hit enter in the offending text box (as they lose their data!)
Is there a way I can stop this from happening and be able to include the button in the form?
The HTML is:
<form>
<input id="addyInput" placeholder="Don't forget postcode!" size="25">
</form>
<button id="start" onclick="initialize()">Find Me!</button>
I can also include some of the javascript if needs be! (although that works fine!) :)
Thanks!
use :
<button id="start" onclick="return initialize()">Find Me!</button>
and then make sure initialize() returns false.