Develop Reference

Form Submit works with Button, but not with Enter key

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();
}
});

How to pass form input and music from one page to another using JavaScript?

So I've been stuck on this for a while now. I have the first page which includes this form:
<form id="user" name="user" method="GET" action="the-tell-tale-heart.html">
Name: <input type="text" name="name">
<br/>
<input type="radio" name="soundtrack" id="st1" value="oldMansion">Soundtrack 1
<br/>
<input type="radio" name="soundtrack" id="st2" value="champion">Soundtrack 2
<br/>
<input type="submit" value="Submit">
</form>
I want the user to have entered the name and chosen a soundtrack. The submit button would redirect them to a second page (the-tell-tale-heart.html) where their name would appear at the top saying "Hello, " and the soundtrack they chose would play.
I've been told to use parse URL to get this info on the second page. I only want to use javascript, no php or perl. This is what I have so far:
<script>
var name="";
var url=document.URL;
function findName(){
var re=/(name)\=(.*)?&/;
name=url.match(re);
name=name.substring(5);
alert(name);
}
findName();
var oldMansion = new Audio('music/stories-of-the-old-mansion.mp3');
var champion = new Audio('music/champion.mp3');
// play one or the other depending on which the user chooses IF STATEMENTS :D
if {
oldMansion.play();
}
else {
champion.play();
}
</script>
I'm not sure what the conditions for the music would be.
EDIT:
So the findName() function actually gets this part of the URL:
?name=izzy&soundtrack=champion
and cuts it down to this on the second page:
izzy&,name,izzy
I would just like to get "izzy" and put that on the top of the page.

Try this:
// ... your code
if(url.indexOf('soundtrack=oldMansion') != -1) oldMansion.play();
else champion.play();

If you're using javascript, you really should just initiate the music on the page you're already on. There's no point in submitting a form to another page - that's the whole point of javascript - making a more user-friendly, interactive design without breaking up the experience with new page loads.
Also, look into jQuery.

Change Image from Form Input with Javascript and HTML

I want to make a Skin Viewing Website for the game Minecraft and I need to have a simple form that displays an image from Minotar.net and then displays the entered username with thier image / skin under the form
The form should add the username to the end of the url, for example:
Form text submitted: Notch
Changes: img src="https://minotar.net/skin/username" to img src="https://minotar.net/skin/Notch"
and displays the image below the form.
--
The code that I tried
<div class="page-header">
<h2>Enter a Minecraft Username to download skin:</h2>
</div>
<div class="input-group">
<input type="text" id="page" class="form-control">
<span class="input-group-btn">
<input type="submit" value="Download Skin!" onclick="goToPage();" class="btn btn-success">
<img id="page" src="http://minecraft-skin-viewer.com/skin.php?user=">
</span>
Javascript:
function goToPage() {
var page = document.getElementById('page').value;
img.src = "http://minecraft-skin-viewer.com/skin.php?user=" + page }
JSfiddle http://jsfiddle.net/4dqbP/14/
Thanks!

Wow, you're doing well for just starting JavaScript. I found a few errors in your code and corrected them in a JSFiddle at the end of my answer. Here are your mistakes, for future reference:
Unlike classes, ids MUST be unique. You had two ids both named "page." This is not valid HTML, and will cause errors.
You used img.src. This is allowed, but only if img is a variable. In the fiddle, I made img a variable, by using the getElementById method.
You should close your img tags and input tags. People will say "what do you mean, close those tags?" Well, just for consistency, and making XHTML easier to learn later, it's a good habit to make sure your input tag looks like this:
<input type="text" id="textbox1"/>
Not this:
<input type="text" id="textbox2">
(Notice the missing "/" at the end.)
Other than that, I just cleaned up some formatting. You're good to go!
JSFiddle Here

Change href tag based on button press

EDIT: The buttons in the corner will not be submitting the search. The go button would still be clicked to submit it.
So, I'm working on a little project when I'm bored at work. It isn't meant to be anything serious and I'm teaching a bit of javascript, jquery, html and css as I go (Thanks to you fine folks of course). This part I can't figure out, or find anything about.
My page is: http://afrohorse.netau.net/
As of right now, I have a form that when you type in, and press go, it will search google. I plan on having it so I can click one of four buttons (located on each corner of the page) and it will change where it searches when you submit. Here is the code for my form.
<form onsubmit="location.href='https://www.google.ca/#q=' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go"><span>GO!</span></button>
</form>
So, Ideally, I would like to have it so "https://www.google.ca/#q=" would change to "http://www.youtube.com/results?search_query=" after clicking the youtube button. Is this doable? If so how would be the easiest way?
Thanks. :)

You're actually better off removing the form and just using a button. You could do what you have above like this...
HTML
<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go" id="search-button">GO!</button>
Javascript
$(function() {
$("#search-button").on("click", function() {
var query = $("#myInput").val();
// if using Google search...
location.href = "https://www.google.ca/#q=" + query;
// if using Youtube search...
location.href = "http://www.youtube.com/results?search_query=" + query;
});
});

I would do it diffirently. I would give the button/ an ID. If this button/ is clicked i would check what button, so youtube or google. Then get the input and send the user to the correct link. so something like this:
google it
youtube it
<input type="text" id="input_search" placeholder="What are you searching for?">
the JS:
$('btn_google').addEvent("click", function(e){
e.preventDefault();
location.href='http://www.google.ca/#q='.$('input_search').value;
});
$('btn_youtube').addEvent("click", function(e){
e.preventDefault();
location.href='http://www.youtube.ca/results?search_query='.$('input_search').value;
});
btw i use mootools :) so the events are abit diffirent in jquery

html5 form submission issue

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.